/*
 * iBlogger Design System 2026
 * Final visual layer shared by every public, account and moderation page.
 * It intentionally changes presentation only; application behavior stays in existing JS/PHP.
 */

:root {
  color-scheme: light;
  --ui-bg: #f6f7fb;
  --ui-bg-2: #eef0f7;
  --ui-surface: #ffffff;
  --ui-surface-2: #fafaff;
  --ui-surface-3: #f1f2f9;
  --ui-surface-glass: rgba(255, 255, 255, .82);
  --ui-ink: #171a35;
  --ui-ink-2: #303453;
  --ui-muted: #69718d;
  --ui-faint: #9ba1b6;
  --ui-line: rgba(32, 37, 79, .09);
  --ui-line-strong: rgba(32, 37, 79, .16);
  --ui-accent: #695be7;
  --ui-accent-2: #8f78f5;
  --ui-accent-strong: #5345ce;
  --ui-accent-soft: #efedff;
  --ui-accent-softer: #f7f5ff;
  --ui-pink: #e99bbb;
  --ui-pink-soft: #fff0f6;
  --ui-green: #18a77d;
  --ui-green-soft: #e9f8f2;
  --ui-yellow: #d99a00;
  --ui-yellow-soft: #fff7dc;
  --ui-danger: #d6516b;
  --ui-danger-soft: #fff0f3;
  --ui-shadow-xs: 0 2px 10px rgba(23, 26, 68, .04);
  --ui-shadow-sm: 0 10px 30px rgba(23, 26, 68, .07);
  --ui-shadow: 0 24px 68px rgba(23, 26, 68, .11);
  --ui-shadow-lg: 0 40px 110px rgba(23, 26, 68, .16);
  --ui-radius-sm: 14px;
  --ui-radius: 22px;
  --ui-radius-lg: 30px;
  --ui-radius-xl: 40px;
  --ui-ease: cubic-bezier(.2, .75, .2, 1);

  /* Keep every legacy token in the same visual family. */
  --color-brand-yellow: var(--ui-accent);
  --color-brand-gold: var(--ui-accent-strong);
  --color-charcoal: var(--ui-ink);
  --color-deep: #0a0d1f;
  --color-primary: var(--ui-accent);
  --color-primary-hover: var(--ui-accent-strong);
  --color-primary-active: #4639b8;
  --color-primary-soft: var(--ui-accent-soft);
  --color-secondary: var(--ui-green);
  --color-secondary-hover: #118867;
  --color-secondary-soft: var(--ui-green-soft);
  --color-accent: var(--ui-accent-2);
  --color-accent-soft: var(--ui-accent-soft);
  --color-background: var(--ui-bg);
  --color-background-alt: var(--ui-bg-2);
  --color-surface: var(--ui-surface);
  --color-surface-elevated: var(--ui-surface);
  --color-surface-subtle: var(--ui-surface-3);
  --color-text-primary: var(--ui-ink);
  --color-text-secondary: var(--ui-muted);
  --color-text-muted: var(--ui-faint);
  --color-border: var(--ui-line);
  --color-border-strong: var(--ui-line-strong);
  --color-success: var(--ui-green);
  --color-success-soft: var(--ui-green-soft);
  --color-warning: var(--ui-yellow);
  --color-warning-soft: var(--ui-yellow-soft);
  --color-error: var(--ui-danger);
  --color-error-soft: var(--ui-danger-soft);
  --color-info: var(--ui-accent);
  --color-info-soft: var(--ui-accent-soft);
  --color-on-primary: #ffffff;
  --color-on-dark: #ffffff;
  --color-overlay: rgba(10, 13, 31, .68);
  --shadow-xs: var(--ui-shadow-xs);
  --shadow-sm: var(--ui-shadow-sm);
  --shadow-md: var(--ui-shadow);
  --shadow-lg: var(--ui-shadow-lg);
  --shadow-primary: 0 14px 34px rgba(105, 91, 231, .24);

  --v4-ink: var(--ui-ink);
  --v4-muted: var(--ui-muted);
  --v4-line: var(--ui-line);
  --v4-soft: var(--ui-bg-2);
  --v4-primary: var(--ui-accent);
  --v4-shadow-soft: var(--ui-shadow-sm);
  --v4-shadow: var(--ui-shadow);
}

/* Exact fractional five-star ratings (0–100% fill per star). */
body .rating-stars-precise {
  --rating-star-color: var(--ui-yellow, #f0b90b);
  --rating-star-empty: #d3d6e0;
  direction: ltr;
  display: inline-flex;
  align-items: center;
  gap: .08em;
  white-space: nowrap;
}
body .rating-star,
html body.creator-profile-page .profile-rating-stars > span.rating-star,
html body.creator-profile-page .profile-feedback-stars > span.rating-star {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  color: var(--rating-star-empty, #d3d6e0) !important;
  font-style: normal;
  line-height: 1;
  text-align: left;
  vertical-align: middle;
}
body .rating-star::before {
  content: "★";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--rating-fill, 0%);
  overflow: hidden;
  color: var(--rating-star-color, #f0b90b);
  line-height: inherit;
  white-space: nowrap;
}
body .creator-card-stars { font-size: .78rem; }
html[data-theme="dark"] body .rating-stars-precise { --rating-star-empty: #555d76; }

html[data-theme="dark"] {
  color-scheme: dark;
  --ui-bg: #080b1b;
  --ui-bg-2: #0c1024;
  --ui-surface: #12162c;
  --ui-surface-2: #171c35;
  --ui-surface-3: #1d2340;
  --ui-surface-glass: rgba(18, 22, 44, .84);
  --ui-ink: #f6f7ff;
  --ui-ink-2: #dfe2f2;
  --ui-muted: #a8afc7;
  --ui-faint: #7f88a6;
  --ui-line: rgba(225, 228, 255, .10);
  --ui-line-strong: rgba(225, 228, 255, .18);
  --ui-accent: #9b91ff;
  --ui-accent-2: #b9a9ff;
  --ui-accent-strong: #8177ed;
  --ui-accent-soft: rgba(144, 132, 255, .15);
  --ui-accent-softer: rgba(144, 132, 255, .08);
  --ui-pink: #f0a5c2;
  --ui-pink-soft: rgba(239, 159, 190, .13);
  --ui-green: #42d5aa;
  --ui-green-soft: rgba(66, 213, 170, .13);
  --ui-yellow: #f2c45b;
  --ui-yellow-soft: rgba(242, 196, 91, .13);
  --ui-danger: #ff8198;
  --ui-danger-soft: rgba(255, 129, 152, .13);
  --ui-shadow-xs: 0 3px 12px rgba(0, 0, 0, .18);
  --ui-shadow-sm: 0 12px 34px rgba(0, 0, 0, .24);
  --ui-shadow: 0 28px 78px rgba(0, 0, 0, .34);
  --ui-shadow-lg: 0 44px 120px rgba(0, 0, 0, .45);
  --color-overlay: rgba(2, 4, 13, .80);
  --color-on-primary: #0d1023;
  --shadow-primary: 0 15px 38px rgba(116, 103, 238, .30);
}

html {
  background: var(--ui-bg);
  accent-color: var(--ui-accent);
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at 12% -8%, color-mix(in srgb, var(--ui-accent) 10%, transparent), transparent 34rem),
    radial-gradient(circle at 92% 14%, color-mix(in srgb, var(--ui-pink) 7%, transparent), transparent 30rem),
    var(--ui-bg) !important;
  color: var(--ui-ink) !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s ease, color .25s ease;
}

body, button, input, select, textarea { font-family: Vazirmatn, "Segoe UI", Tahoma, Arial, sans-serif; }
h1, h2, h3, h4 { color: var(--ui-ink); letter-spacing: -.035em; text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: color-mix(in srgb, var(--ui-accent) 28%, transparent); color: var(--ui-ink); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--ui-accent) 42%, transparent) !important; outline-offset: 3px !important; }

/* Header and navigation */
body:not(.auth-page) .site-header {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body:not(.auth-page) .site-header .header-inner {
  min-height: 64px;
  padding: 7px 10px 7px 14px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 999px !important;
  background: var(--ui-surface-glass) !important;
  box-shadow: var(--ui-shadow-sm) !important;
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
}
body:not(.auth-page) .site-header.is-scrolled .header-inner { box-shadow: var(--ui-shadow) !important; }
body .site-logo-image { object-fit: contain; }
body .desktop-nav { gap: 2px !important; }
body .desktop-nav .nav-link,
body .nav-dropdown-trigger {
  min-height: 38px;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  color: var(--ui-ink-2) !important;
  font-size: .78rem !important;
  font-weight: 760 !important;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
body .desktop-nav .nav-link:hover,
body .desktop-nav .nav-link.is-active,
body .nav-dropdown-trigger:hover {
  background: var(--ui-accent-soft) !important;
  color: var(--ui-accent) !important;
}
body .nav-dropdown-menu {
  padding: 8px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 20px !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow) !important;
}
body .nav-dropdown-menu a { border-radius: 14px !important; color: var(--ui-ink-2) !important; }
body .nav-dropdown-menu a:hover { background: var(--ui-surface-3) !important; color: var(--ui-accent) !important; }
body .icon-button,
body .menu-toggle,
body .theme-toggle {
  border: 1px solid var(--ui-line) !important;
  background: var(--ui-surface-2) !important;
  color: var(--ui-ink) !important;
  box-shadow: none !important;
}
body .icon-button:hover,
body .menu-toggle:hover,
body .theme-toggle:hover {
  border-color: color-mix(in srgb, var(--ui-accent) 28%, var(--ui-line)) !important;
  background: var(--ui-accent-soft) !important;
  color: var(--ui-accent) !important;
  transform: translateY(-1px);
}
body .mobile-nav {
  border-inline-start: 1px solid var(--ui-line) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-ink) !important;
  box-shadow: var(--ui-shadow-lg) !important;
}
body .mobile-nav-head { border-color: var(--ui-line) !important; }
body .mobile-nav-links a,
body .mobile-nav-links summary {
  border-color: var(--ui-line) !important;
  color: var(--ui-ink-2) !important;
}
body .mobile-nav-links a:hover,
body .mobile-nav-links summary:hover { background: var(--ui-accent-soft) !important; color: var(--ui-accent) !important; }
body .mobile-nav-backdrop { background: rgba(5, 7, 20, .52) !important; backdrop-filter: blur(6px); }

/* Buttons, inputs and interactive controls */
body .button,
body .v4-btn,
body .creator-primary,
body .shop-profile-action,
body button[type="submit"] {
  border-radius: 14px !important;
  font-weight: 820 !important;
  transition: transform .18s var(--ui-ease), box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}
body .button-primary,
body .v4-btn-primary,
body .creator-primary,
body .shop-profile-action,
body .authn-submit {
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent-2)) !important;
  color: #fff !important;
  box-shadow: 0 12px 30px color-mix(in srgb, var(--ui-accent) 25%, transparent) !important;
}
html[data-theme="dark"] body .button-primary,
html[data-theme="dark"] body .v4-btn-primary,
html[data-theme="dark"] body .creator-primary,
html[data-theme="dark"] body .shop-profile-action,
html[data-theme="dark"] body .authn-submit {
  color: var(--color-on-primary) !important;
}
body .button-primary:hover,
body .v4-btn-primary:hover,
body .creator-primary:hover,
body .shop-profile-action:hover,
body .authn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px color-mix(in srgb, var(--ui-accent) 34%, transparent) !important;
}
body .button-secondary,
body .v4-btn-light,
body .v4-btn-glass,
body .creator-secondary,
body .v4-text-button {
  border-color: var(--ui-line-strong) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-ink) !important;
  box-shadow: var(--ui-shadow-xs) !important;
}
body .button-secondary:hover,
body .v4-btn-light:hover,
body .v4-btn-glass:hover,
body .creator-secondary:hover,
body .v4-text-button:hover {
  border-color: color-mix(in srgb, var(--ui-accent) 36%, var(--ui-line)) !important;
  background: var(--ui-accent-soft) !important;
  color: var(--ui-accent) !important;
}
body .v4-btn-dark {
  border-color: transparent !important;
  background: #171a38 !important;
  color: #fff !important;
  box-shadow: 0 12px 30px rgba(23, 26, 56, .20) !important;
}
body.home-page .v4-final-shell .v4-btn-glass {
  border-color: rgba(255, 255, 255, .18) !important;
  background: rgba(255, 255, 255, .08) !important;
  color: #fff !important;
}
body input,
body textarea,
body select {
  border-color: var(--ui-line-strong) !important;
  background: var(--ui-surface-2) !important;
  color: var(--ui-ink) !important;
  box-shadow: none !important;
}
body input::placeholder,
body textarea::placeholder { color: var(--ui-faint) !important; }
body input:hover,
body textarea:hover,
body select:hover { border-color: color-mix(in srgb, var(--ui-accent) 24%, var(--ui-line-strong)) !important; }
body input:focus,
body textarea:focus,
body select:focus {
  border-color: color-mix(in srgb, var(--ui-accent) 64%, var(--ui-line)) !important;
  background: var(--ui-surface) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-accent) 11%, transparent) !important;
}
body input:disabled,
body textarea:disabled,
body select:disabled { opacity: .58; cursor: not-allowed; }

/* Shared visual surfaces */
body .v4-panel,
body .panel,
body .card,
body .service-card,
body .submission-card,
body .moderation-card,
body .dashboard-card,
body .feedback-card,
body .creator-card,
body .shop-profile-card,
body .reviewer-summary-card,
body .reviewer-history-card {
  border-color: var(--ui-line) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-ink) !important;
  box-shadow: var(--ui-shadow-sm) !important;
}
body .v4-panel,
body .submission-card,
body .moderation-card,
body .dashboard-card { border-radius: var(--ui-radius-lg) !important; }
body .v4-section-kicker,
body .section-kicker,
body .creator-hero-kicker,
body .v4-eyebrow {
  color: var(--ui-accent) !important;
}
body .v4-section-kicker,
body .section-kicker,
body .creator-hero-kicker {
  border-color: color-mix(in srgb, var(--ui-accent) 18%, var(--ui-line)) !important;
  background: var(--ui-accent-soft) !important;
}
body .v4-eyebrow,
body .v4-feedback-kicker {
  border-color: color-mix(in srgb, var(--ui-accent) 18%, var(--ui-line)) !important;
  background: var(--ui-accent-soft) !important;
  color: var(--ui-accent) !important;
}
body .v4-section p,
body .service-page p,
body .creator-directory-page p { color: var(--ui-muted); }
body hr { border-color: var(--ui-line); }

/* Homepage */
body.home-page .v4-home-main { background: transparent !important; }
body.home-page .v4-section { position: relative; }
body.home-page .v4-creators,
body.home-page .v4-services,
body.home-page .v4-workflow,
body.home-page .v4-faq,
body.home-page .v4-benefit-intro,
body.home-page .v4-add-creator { background: transparent !important; }
body.home-page .v4-split-card,
body.home-page .v4-workflow-shell,
body.home-page .v4-add-shell,
body.home-page .v4-final-shell {
  border: 1px solid var(--ui-line) !important;
  background: linear-gradient(145deg, var(--ui-surface), var(--ui-surface-2)) !important;
  box-shadow: var(--ui-shadow) !important;
}
body.home-page .v4-service-card {
  border: 1px solid var(--ui-line) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-ink) !important;
  box-shadow: var(--ui-shadow-sm) !important;
}
body.home-page .v4-service-card:hover { border-color: color-mix(in srgb, var(--ui-accent) 22%, var(--ui-line)) !important; box-shadow: var(--ui-shadow) !important; }
body.home-page .v4-service-card p { color: var(--ui-muted) !important; }
body.home-page .v4-service-card .v4-card-link { color: var(--ui-accent) !important; }
body.home-page .v4-service-featured {
  background: linear-gradient(150deg, #171a38, #252451 58%, #423b82) !important;
  color: #fff !important;
}
body.home-page .v4-service-featured h3 { color: #fff !important; }
body.home-page .v4-service-featured p { color: rgba(255, 255, 255, .68) !important; }
body.home-page .v4-service-featured .v4-card-link { color: #d5d0ff !important; }
body.home-page .v4-steps article,
body.home-page .v4-faq-list details {
  border-color: var(--ui-line) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-ink) !important;
  box-shadow: var(--ui-shadow-xs) !important;
}
body.home-page .v4-faq-list details[open] { border-color: color-mix(in srgb, var(--ui-accent) 26%, var(--ui-line)) !important; box-shadow: var(--ui-shadow-sm) !important; }
body.home-page .v4-add-shell { background: linear-gradient(135deg, color-mix(in srgb, var(--ui-accent-soft) 72%, var(--ui-surface)), color-mix(in srgb, var(--ui-pink-soft) 62%, var(--ui-surface))) !important; }
body.home-page .v4-final-shell { background: linear-gradient(135deg, #171a38, #252451 58%, #453e85) !important; border-color: rgba(255, 255, 255, .10) !important; }
body.home-page .v4-final-shell h2 { color: #fff !important; }
body.home-page .v4-final-shell p { color: rgba(255, 255, 255, .68) !important; }
html[data-theme="dark"] body.home-page .v4-home-hero { filter: none !important; background: radial-gradient(circle at 50% 24%, rgba(155, 145, 255, .15), transparent 34rem), var(--ui-bg) !important; }
html[data-theme="dark"] body.home-page .v4-home-hero .v4-hero-copy h1,
html[data-theme="dark"] body.home-page .v4-home-hero .v4-hero-copy p,
html[data-theme="dark"] body.home-page .v4-home-hero .v4-eyebrow { color: var(--ui-ink) !important; filter: none !important; }

/* Service pages and inner heroes */
body.service-page { background: var(--ui-bg) !important; }
body .v4-inner-hero,
body .creator-directory-hero,
body .v4-feedback-hero {
  border-bottom: 1px solid var(--ui-line) !important;
  background:
    radial-gradient(circle at 76% 22%, color-mix(in srgb, var(--ui-accent) 17%, transparent), transparent 28rem),
    radial-gradient(circle at 18% 72%, color-mix(in srgb, var(--ui-pink) 10%, transparent), transparent 24rem),
    linear-gradient(180deg, var(--ui-surface-2), var(--ui-bg)) !important;
  color: var(--ui-ink) !important;
}
body .v4-inner-hero h1,
body .creator-directory-hero h1,
body .v4-feedback-hero h1 { color: var(--ui-ink) !important; }
body .v4-inner-hero p,
body .creator-directory-hero p,
body .v4-feedback-hero p { color: var(--ui-muted) !important; }
body .v4-breadcrumb,
body .creator-breadcrumb,
body .v4-feedback-breadcrumb { color: var(--ui-muted) !important; }
body .v4-breadcrumb a,
body .creator-breadcrumb a,
body .v4-feedback-breadcrumb a { color: var(--ui-ink-2) !important; }
body .v4-inner-glow { opacity: .55; filter: saturate(.9); }
body .v4-campaign-card {
  border-color: var(--ui-line) !important;
  background: var(--ui-surface-glass) !important;
  color: var(--ui-ink) !important;
  box-shadow: var(--ui-shadow) !important;
}
body .v4-campaign-card b { background: var(--ui-accent-soft) !important; color: var(--ui-accent) !important; }
body .v4-notice,
body .access-gate,
body .v4-info-box {
  border-color: var(--ui-line) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-ink) !important;
  box-shadow: var(--ui-shadow-sm) !important;
}
body .access-gate-icon,
body .status-badge,
body .v4-status-pill { background: var(--ui-accent-soft) !important; color: var(--ui-accent) !important; border-color: var(--ui-line) !important; }
body .v4-filter-bar,
body .filter-toolbar { border-color: var(--ui-line) !important; background: var(--ui-surface-2) !important; }

/* Rich service workspaces */
body.v4-page .v4-form :is(input, select, textarea),
body.v4-page .v4-submission-grid :is(input, select, textarea),
body.v4-page .v4-filter-bar :is(input, select, textarea) {
  border-color: var(--ui-line-strong) !important;
  background: var(--ui-surface-2) !important;
  color: var(--ui-ink) !important;
}
body.v4-page .v4-form :is(input, select, textarea):focus,
body.v4-page .v4-submission-grid :is(input, select, textarea):focus,
body.v4-page .v4-filter-bar :is(input, select, textarea):focus {
  border-color: var(--ui-accent) !important;
  background: var(--ui-surface) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-accent) 11%, transparent) !important;
}
body.v4-page .v4-segmented,
body.v4-page .v4-role-switch,
body.v4-page .v4-benefit-tabs {
  border-color: var(--ui-line) !important;
  background: var(--ui-surface-3) !important;
}
body.v4-page .v4-role-switch .role-tab,
body.v4-page .v4-benefit-tabs .benefit-role-tab { color: var(--ui-muted) !important; }
body.v4-page .v4-role-switch .role-tab.is-active,
body.v4-page .v4-benefit-tabs .benefit-role-tab.is-active {
  background: var(--ui-accent) !important;
  color: var(--color-on-primary) !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--ui-accent) 22%, transparent) !important;
}
body.v4-page .request-item,
body.v4-page .opportunity-card,
body.v4-page .opportunity-meta > div,
body.v4-page .order-item,
body.v4-page .summary-tile,
body.v4-page .recommendation-card,
body.v4-page .v4-role-intro article,
body.v4-page .offer-item,
body.v4-page .guarantee-info-card,
body.v4-page .process-step {
  border-color: var(--ui-line) !important;
  background: var(--ui-surface-2) !important;
  color: var(--ui-ink) !important;
}
body.v4-page .opportunity-card,
body.v4-page .recommendation-card,
body.v4-page .v4-role-intro article,
body.v4-page .process-step { box-shadow: var(--ui-shadow-xs) !important; }
body.v4-page .opportunity-card:hover,
body.v4-page .order-item:hover,
body.v4-page .order-item.is-active {
  border-color: color-mix(in srgb, var(--ui-accent) 42%, var(--ui-line)) !important;
  background: var(--ui-accent-soft) !important;
  box-shadow: var(--ui-shadow-sm) !important;
}
body.v4-page .v4-benefit-grid article,
body.v4-page .v4-principles article {
  border-color: var(--ui-line) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-ink) !important;
  box-shadow: var(--ui-shadow-xs) !important;
}
body.v4-page .v4-benefit-grid article:hover,
body.v4-page .v4-principles article:hover { border-color: color-mix(in srgb, var(--ui-accent) 24%, var(--ui-line)) !important; box-shadow: var(--ui-shadow-sm) !important; }
body.v4-page .v4-benefit-highlight { background: linear-gradient(145deg, #171a38, #2b2d67) !important; color: #fff !important; box-shadow: var(--ui-shadow) !important; }
body.v4-page .v4-benefit-highlight h2 { color: #fff !important; }
body.v4-page .v4-benefit-highlight p { color: rgba(255, 255, 255, .70) !important; }

/* Creator and shop directories */
body.creator-directory-page .creator-directory-shell { background: transparent !important; }
body.creator-directory-page .creator-filter-panel {
  border: 1px solid var(--ui-line) !important;
  background: var(--ui-surface-glass) !important;
  box-shadow: var(--ui-shadow) !important;
  backdrop-filter: blur(20px) saturate(140%);
}
body.creator-directory-page .creator-card {
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-ink) !important;
  box-shadow: var(--ui-shadow-sm) !important;
}
body.creator-directory-page .creator-card:hover { border-color: color-mix(in srgb, var(--ui-accent) 24%, var(--ui-line)) !important; box-shadow: var(--ui-shadow) !important; }
body .creator-card-tags span { border: 1px solid var(--ui-line) !important; background: var(--ui-surface-3) !important; color: var(--ui-muted) !important; }
body .creator-card-tags .is-verified { border-color: color-mix(in srgb, var(--ui-green) 18%, var(--ui-line)) !important; background: var(--ui-green-soft) !important; color: var(--ui-green) !important; }
body .creator-card-metrics { border-color: var(--ui-line) !important; background: var(--ui-surface-2) !important; }
body .creator-card-metrics strong,
body .creator-card-rating strong { color: var(--ui-ink) !important; }
body .creator-card-metrics span,
body .creator-card-bio,
body .creator-card-rating { color: var(--ui-muted) !important; }
body .creator-card-rating .star { color: var(--ui-yellow) !important; }
body .creator-result-pill { border-color: var(--ui-line) !important; background: var(--ui-surface) !important; color: var(--ui-ink) !important; box-shadow: var(--ui-shadow-xs) !important; }
body .creator-art-note { border-color: rgba(255, 255, 255, .52) !important; background: var(--ui-surface-glass) !important; color: var(--ui-ink) !important; box-shadow: var(--ui-shadow) !important; }

/* Feedback pages */
body.v4-feedback-page { background: var(--ui-bg) !important; color: var(--ui-ink) !important; }
body .v4-feedback-glass-card,
body .v4-feedback-value,
body .feedback-toolbar,
body .feedback-card,
body .feedback-empty,
body .v4-feedback-guidance-grid {
  border-color: var(--ui-line) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-ink) !important;
  box-shadow: var(--ui-shadow-sm) !important;
}
body .feedback-card:hover { border-color: color-mix(in srgb, var(--ui-accent) 22%, var(--ui-line)) !important; box-shadow: var(--ui-shadow) !important; }
body .feedback-card p,
body .feedback-card small,
body .feedback-reviewer span,
body .v4-feedback-value span { color: var(--ui-muted) !important; }
body .feedback-stars { color: var(--ui-yellow) !important; }
body .feedback-tag { border-color: var(--ui-line) !important; background: var(--ui-surface-3) !important; color: var(--ui-muted) !important; }
body.v4-feedback-page .v4-feedback-directory,
body.v4-feedback-page .v4-feedback-guidance { background: transparent !important; }
body.v4-feedback-page .v4-feedback-values-grid,
body.v4-feedback-page .v4-feedback-directory .feedback-toolbar,
body.v4-feedback-page .v4-feedback-directory .feedback-card,
body.v4-feedback-page .v4-feedback-editorial,
body.v4-feedback-page .v4-feedback-directory .feedback-empty {
  border-color: var(--ui-line) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-ink) !important;
  box-shadow: var(--ui-shadow-sm) !important;
}
body.v4-feedback-page .v4-feedback-value,
body.v4-feedback-page .v4-feedback-directory :is(.feedback-input, .feedback-select, .feedback-rating-row, .feedback-quote),
body.v4-feedback-page .v4-feedback-point,
body.v4-feedback-page .v4-feedback-directory .feedback-real-shop-metrics span {
  border-color: var(--ui-line) !important;
  background: var(--ui-surface-2) !important;
  color: var(--ui-ink) !important;
}
body.v4-feedback-page .v4-feedback-trust span {
  border-color: var(--ui-line) !important;
  background: var(--ui-surface-glass) !important;
  color: var(--ui-muted) !important;
}
body.v4-feedback-page .v4-feedback-glass-card :is(small, span) { color: var(--ui-muted) !important; }
body.v4-feedback-page .v4-feedback-glass-card strong { color: var(--ui-ink) !important; }
body.v4-feedback-page .v4-feedback-value > span,
body.v4-feedback-page .v4-feedback-directory .feedback-result-count {
  background: var(--ui-accent-soft) !important;
  color: var(--ui-accent) !important;
}
body.v4-feedback-page .v4-feedback-directory :is(.feedback-input, .feedback-select):focus {
  border-color: var(--ui-accent) !important;
  background: var(--ui-surface) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-accent) 11%, transparent) !important;
}
body.v4-feedback-page .v4-feedback-directory :is(.feedback-quote-title, .feedback-list-head h2),
body.v4-feedback-page .v4-feedback-section-head h2,
body.v4-feedback-page .v4-feedback-editorial h2 { color: var(--ui-ink) !important; }
body.v4-feedback-page .v4-feedback-editorial.dark { background: linear-gradient(145deg, #171a38, #2b2d67) !important; color: #fff !important; }
body.v4-feedback-page .v4-feedback-editorial.dark h2 { color: #fff !important; }
body.v4-feedback-page .v4-feedback-editorial.dark p { color: rgba(255, 255, 255, .68) !important; }

/* Blogger and shop profiles */
body.creator-profile-page,
body.profile-dashboard-body,
body.reviewer-page-body { background: var(--ui-bg) !important; color: var(--ui-ink) !important; }
body.creator-profile-page .pd-card,
body.creator-profile-page .influencer-profile-panel,
body.creator-profile-page .analytics-chart-card,
body.creator-profile-page .performance-summary,
body.creator-profile-page .real-data-panel,
body.creator-profile-page .real-bio-panel,
body.creator-profile-page .profile-feedbacks-panel,
body.creator-profile-page .shop-profile-card {
  border-color: var(--ui-line) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-ink) !important;
  box-shadow: var(--ui-shadow-sm) !important;
}
body.creator-profile-page .performance-item,
body.creator-profile-page .real-data-grid > div,
body.creator-profile-page .profile-feedback-card,
body.creator-profile-page .profile-trust-note,
body.creator-profile-page .profile-audience-grid > div,
body .shop-metrics > div,
body .shop-chart-card,
body .shop-capacity span {
  border-color: var(--ui-line) !important;
  background: var(--ui-surface-2) !important;
  color: var(--ui-ink) !important;
}
body.creator-profile-page .profile-category,
body .shop-update-pill { border-color: color-mix(in srgb, var(--ui-accent) 18%, var(--ui-line)) !important; background: var(--ui-accent-soft) !important; color: var(--ui-accent) !important; }
body.creator-profile-page .profile-rating-stars,
body.creator-profile-page .profile-feedback-stars { color: var(--ui-yellow) !important; }
body.creator-profile-page .profile-menu,
body.creator-profile-page .range-picker,
body.creator-profile-page .profile-icon-button,
body.creator-profile-page .chart-menu-button,
body.creator-profile-page .feedback-scroll-button { border-color: var(--ui-line) !important; background: var(--ui-surface-2) !important; color: var(--ui-ink) !important; }
body.creator-profile-page .profile-premium-gate {
  border: 1px solid color-mix(in srgb, var(--ui-accent) 22%, var(--ui-line)) !important;
  background: color-mix(in srgb, var(--ui-surface-glass) 92%, transparent) !important;
  color: var(--ui-ink) !important;
  box-shadow: var(--ui-shadow) !important;
  backdrop-filter: blur(18px) saturate(135%);
}
body.creator-profile-page .profile-premium-icon { background: var(--ui-accent-soft) !important; color: var(--ui-accent) !important; }
body .shop-profile-hero { background: linear-gradient(135deg, #e6e1ff 0%, #f7d9e7 50%, #dfe9ff 100%) !important; color: #171a35 !important; }
html[data-theme="dark"] body .shop-profile-hero { background: linear-gradient(135deg, #211f43 0%, #38263d 50%, #1c2942 100%) !important; color: #f7f7ff !important; }
body .shop-chart-card { background: var(--ui-surface) !important; box-shadow: var(--ui-shadow-sm) !important; }
body .shop-chart-grid { stroke: var(--ui-line) !important; }

/* Authentication */
body.auth-page.auth-next { background: var(--ui-bg) !important; color: var(--ui-ink) !important; }
body.auth-page .authn-form-pane { background: radial-gradient(circle at 70% 10%, color-mix(in srgb, var(--ui-accent) 10%, transparent), transparent 26rem), linear-gradient(180deg, var(--ui-bg), var(--ui-bg-2)) !important; }
body.auth-page .authn-topbar,
body.auth-page .authn-form,
body.auth-page .auth-dialog-card {
  border-color: var(--ui-line) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-ink) !important;
  box-shadow: var(--ui-shadow) !important;
}
body.auth-page .authn-input { border-color: var(--ui-line-strong) !important; background: var(--ui-surface-2) !important; }
body.auth-page .authn-input input { background: transparent !important; color: var(--ui-ink) !important; }
body.auth-page .authn-google,
body.auth-page .authn-back,
body.auth-page .authn-theme,
body.auth-page .authn-role-card { border-color: var(--ui-line) !important; background: var(--ui-surface-2) !important; color: var(--ui-ink) !important; box-shadow: none !important; }
body.auth-page .authn-role-card:hover,
body.auth-page .authn-role-card.is-active { border-color: color-mix(in srgb, var(--ui-accent) 42%, var(--ui-line)) !important; background: var(--ui-accent-soft) !important; }
body.auth-page .authn-heading p,
body.auth-page .authn-switch,
body.auth-page .authn-security { color: var(--ui-muted) !important; }

/* Moderation and reviewer profile */
body .moderation-main,
body .reviewer-profile-main { color: var(--ui-ink) !important; }
body .moderation-toolbar,
body .moderation-batch-bar,
body .moderation-item,
body .reviewer-profile-layout > *,
body .reviewer-history-empty {
  border-color: var(--ui-line) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-ink) !important;
  box-shadow: var(--ui-shadow-sm) !important;
}
body .reviewer-history-rating { color: var(--ui-yellow) !important; }
body .reviewer-brandbar {
  border-color: var(--ui-line) !important;
  background: var(--ui-surface-glass) !important;
  box-shadow: var(--ui-shadow-sm) !important;
  backdrop-filter: blur(22px) saturate(140%);
}
body .reviewer-profile-meta > div,
body .reviewer-history-card {
  border-color: var(--ui-line) !important;
  background: var(--ui-surface-2) !important;
  color: var(--ui-ink) !important;
}
body .moderation-scrape-box,
body .moderation-fields,
body .moderation-tool-card {
  border-color: var(--ui-line) !important;
  background: var(--ui-surface-2) !important;
  color: var(--ui-ink) !important;
}

/* Modals, tables, alerts and toasts */
body .modal-panel,
body .service-modal-panel,
body .profile-dialog,
body .creator-legal-modal,
body [role="dialog"]:not(.modal-backdrop):not(.service-modal) {
  border-color: var(--ui-line) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-ink) !important;
  box-shadow: var(--ui-shadow-lg) !important;
}
body .modal-backdrop,
body .service-modal { background: rgba(4, 6, 18, .58) !important; backdrop-filter: blur(8px); }
body .service-toast,
body .auth-toast,
body .profile-toast {
  border-color: var(--ui-line) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-ink) !important;
  box-shadow: var(--ui-shadow) !important;
}
body table { border-color: var(--ui-line) !important; color: var(--ui-ink) !important; }
body th { border-color: var(--ui-line) !important; background: var(--ui-surface-3) !important; color: var(--ui-ink) !important; }
body td { border-color: var(--ui-line) !important; color: var(--ui-muted) !important; }
body .field-error,
body [aria-invalid="true"] + .field-error { color: var(--ui-danger) !important; }

/* Footer */
body .site-footer,
body .v4-footer,
body .mobile-unified-footer {
  border-color: var(--ui-line) !important;
  background: linear-gradient(180deg, var(--ui-bg-2), color-mix(in srgb, var(--ui-bg-2) 88%, #111630)) !important;
  color: var(--ui-muted) !important;
}
body .site-footer h3,
body .site-footer h4,
body .v4-footer h3,
body .mobile-unified-footer strong { color: var(--ui-ink) !important; }
body .site-footer a,
body .site-footer button,
body .v4-footer a { color: var(--ui-muted) !important; }
body .site-footer a:hover,
body .site-footer button:hover,
body .v4-footer a:hover { color: var(--ui-accent) !important; }
body .social-links a { border-color: var(--ui-line) !important; background: var(--ui-surface-2) !important; color: var(--ui-ink) !important; }
body .social-links a:hover { border-color: color-mix(in srgb, var(--ui-accent) 28%, var(--ui-line)) !important; background: var(--ui-accent-soft) !important; color: var(--ui-accent) !important; }
body .footer-bottom { border-color: var(--ui-line) !important; }

/* Theme-specific image and chart finishing */
html[data-theme="dark"] body img { filter: saturate(.94) brightness(.94); }
html[data-theme="dark"] body .site-logo-image,
html[data-theme="dark"] body .profile-avatar,
html[data-theme="dark"] body .creator-card-media img,
html[data-theme="dark"] body .shop-profile-media img,
html[data-theme="dark"] body .profile-reviewer-photo,
html[data-theme="dark"] body .v4-add-collage img { filter: none; }
html[data-theme="dark"] body .dashboard-chart text,
html[data-theme="dark"] body .shop-profile-chart-svg text { fill: var(--ui-muted) !important; }
html[data-theme="dark"] body .dashboard-chart .chart-grid,
html[data-theme="dark"] body .shop-chart-grid { stroke: var(--ui-line) !important; }

@media (max-width: 1100px) {
  body .desktop-nav .nav-link,
  body .nav-dropdown-trigger { padding-inline: 9px !important; font-size: .72rem !important; }
}

@media (max-width: 900px) {
  body:not(.auth-page) .site-header .header-inner { min-height: 58px; }
  body .v4-panel,
  body .submission-card,
  body .moderation-card { border-radius: 24px !important; }
  body .shop-profile-content-rich,
  body .shop-chart-grid,
  body .shop-insights-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 760px) {
  :root { --ui-radius-xl: 30px; --ui-radius-lg: 24px; --ui-radius: 20px; }
  body { background: var(--ui-bg) !important; }
  body:not(.auth-page) .site-header { top: 8px !important; width: calc(100% - 16px) !important; }
  body:not(.auth-page) .site-header .header-inner { min-height: 54px; padding: 5px 7px 5px 10px !important; }
  body .mobile-nav { width: min(86vw, 360px) !important; }
  body .v4-section { padding-block: 52px; }
  body .v4-inner-hero,
  body .creator-directory-hero,
  body .v4-feedback-hero { background: linear-gradient(180deg, var(--ui-surface-2), var(--ui-bg)) !important; }
  body .button,
  body .v4-btn { min-height: 42px; }
  body .modal-panel,
  body .service-modal-panel,
  body .profile-dialog { border-radius: 24px !important; }
  /* Existing pixel-perfect mobile geometry stays authoritative. */
  body.mobile-approved-page .mobile-approved-shell,
  body.profile-dashboard-body .profile-dashboard-main,
  body.home-page .mobile-pixel-home { color: inherit; }
}

@media (max-width: 520px) {
  body .container { width: min(calc(100% - 24px), var(--container-width)); }
  body .v4-panel,
  body .creator-card,
  body .feedback-card,
  body .shop-profile-card { border-radius: 20px !important; }
  body .v4-section-kicker,
  body .section-kicker { font-size: .67rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* --------------------------------------------------------------------------
   Theme coherence 2026.1
   Exact overrides for legacy high-specificity sections and both footer modes.
   -------------------------------------------------------------------------- */

/* Four-step workflow: one visual language in light and dark. */
html[data-theme] body.home-page.v4-page .v4-workflow {
  color: var(--ui-ink) !important;
  background:
    radial-gradient(circle at 12% 18%,color-mix(in srgb,var(--ui-accent) 10%,transparent),transparent 34%),
    radial-gradient(circle at 88% 82%,color-mix(in srgb,var(--ui-green) 7%,transparent),transparent 30%),
    linear-gradient(180deg,var(--ui-bg),var(--ui-bg-2)) !important;
}
html[data-theme] body.home-page.v4-page .v4-workflow-shell {
  color: var(--ui-ink) !important;
  background: linear-gradient(145deg,var(--ui-surface),var(--ui-surface-2)) !important;
  border: 1px solid var(--ui-line) !important;
  box-shadow: var(--ui-shadow) !important;
}
html[data-theme] body.home-page.v4-page .v4-workflow-copy .v4-section-kicker {
  color: var(--ui-accent) !important;
  background: var(--ui-accent-soft) !important;
  border-color: color-mix(in srgb,var(--ui-accent) 18%,var(--ui-line)) !important;
}
html[data-theme] body.home-page.v4-page .v4-workflow-copy h2,
html[data-theme] body.home-page.v4-page .v4-steps h3 { color: var(--ui-ink) !important; }
html[data-theme] body.home-page.v4-page .v4-workflow-copy>p,
html[data-theme] body.home-page.v4-page .v4-steps p { color: var(--ui-muted) !important; }
html[data-theme] body.home-page.v4-page .v4-workflow-copy>p {
  background: var(--ui-surface-3) !important;
  border-color: var(--ui-line) !important;
}
html[data-theme] body.home-page.v4-page .v4-steps article,
html[data-theme] body.home-page.v4-page .v4-steps article:hover {
  color: var(--ui-ink) !important;
  background: linear-gradient(145deg,var(--ui-surface),var(--ui-surface-2)) !important;
  border-color: var(--ui-line) !important;
  box-shadow: var(--ui-shadow-sm) !important;
}
html[data-theme] body.home-page.v4-page .v4-steps .v4-step-no { color: var(--ui-green) !important; }
html[data-theme] body.home-page.v4-page .v4-step-art,
html[data-theme] body.home-page.v4-page .v4-step-art svg { color: var(--ui-ink) !important; }
html[data-theme] body.home-page.v4-page .v4-step-art svg {
  stroke: var(--ui-ink) !important;
  filter: drop-shadow(0 2px 2px color-mix(in srgb,var(--ui-ink) 10%,transparent)) !important;
}
html[data-theme] body.home-page.v4-page .v4-step-art svg [fill="#9189d6"],
html[data-theme] body.home-page.v4-page .v4-step-art svg [fill="#a7a3dd"],
html[data-theme] body.home-page.v4-page .v4-step-art svg [fill="#948dd9"],
html[data-theme] body.home-page.v4-page .v4-step-art svg [fill="#9a91d8"],
html[data-theme] body.home-page.v4-page .v4-step-art svg [fill="#9c95dc"] { fill: var(--ui-accent-2) !important; }
html[data-theme] body.home-page.v4-page .v4-step-art svg [fill="#8fd7ca"],
html[data-theme] body.home-page.v4-page .v4-step-art svg [fill="#89d4ca"],
html[data-theme] body.home-page.v4-page .v4-step-art svg [fill="#8ed8ca"] { fill: var(--ui-green) !important; }
html[data-theme] body.home-page.v4-page .v4-step-art svg [fill="#111735"] { fill: var(--ui-bg) !important; }
html[data-theme] body.home-page.v4-page .v4-workflow-path path { stroke: color-mix(in srgb,var(--ui-accent) 65%,var(--ui-line)) !important; }
html[data-theme] body.home-page.v4-page .v4-workflow-path circle {
  fill: var(--ui-accent) !important;
  stroke: var(--ui-surface) !important;
}
html[data-theme] body.home-page.v4-page .v4-workflow-path circle:nth-of-type(1),
html[data-theme] body.home-page.v4-page .v4-workflow-path circle:nth-of-type(4) { fill: var(--ui-green) !important; }

/* Desktop footer uses a light surface in light mode and a navy surface in dark. */
html[data-theme="light"] body.v4-page .site-footer,
html[data-theme="light"] body .site-footer {
  color: var(--ui-ink) !important;
  background:
    radial-gradient(circle at 88% 0,color-mix(in srgb,var(--ui-accent) 9%,transparent),transparent 28rem),
    linear-gradient(180deg,var(--ui-surface),var(--ui-bg-2)) !important;
  border-top: 1px solid var(--ui-line) !important;
}
html[data-theme="dark"] body.v4-page .site-footer,
html[data-theme="dark"] body .site-footer {
  color: var(--ui-ink) !important;
  background:
    radial-gradient(circle at 88% 0,rgba(155,145,255,.14),transparent 30rem),
    linear-gradient(180deg,#0c1024,#080b1b) !important;
  border-top: 1px solid var(--ui-line) !important;
}
html[data-theme] body.v4-page .site-footer .footer-brand p,
html[data-theme] body.v4-page .site-footer .footer-column a,
html[data-theme] body.v4-page .site-footer .footer-newsletter p,
html[data-theme] body.v4-page .site-footer .footer-bottom,
html[data-theme] body .site-footer .footer-brand p,
html[data-theme] body .site-footer .footer-column a,
html[data-theme] body .site-footer .footer-newsletter p,
html[data-theme] body .site-footer .footer-bottom { color: var(--ui-muted) !important; }
html[data-theme] body.v4-page .site-footer h3,
html[data-theme] body .site-footer h3 { color: var(--ui-ink) !important; }
html[data-theme] body.v4-page .site-footer .footer-column a:hover,
html[data-theme] body .site-footer .footer-column a:hover { color: var(--ui-accent) !important; }
html[data-theme] body.v4-page .site-footer .footer-bottom,
html[data-theme] body .site-footer .footer-bottom { border-color: var(--ui-line) !important; }
html[data-theme="light"] body.v4-page .site-footer .footer-brand p,
html[data-theme="light"] body.v4-page .site-footer .footer-column a,
html[data-theme="light"] body.v4-page .site-footer .footer-newsletter p,
html[data-theme="light"] body.v4-page .site-footer .footer-bottom,
html[data-theme="light"] body .site-footer .footer-brand p,
html[data-theme="light"] body .site-footer .footer-column a,
html[data-theme="light"] body .site-footer .footer-newsletter p,
html[data-theme="light"] body .site-footer .footer-bottom { color:#626a84 !important; }
html[data-theme] body .site-footer .footer-link {
  color: var(--ui-muted) !important;
  background: transparent !important;
}
html[data-theme] body .site-footer .newsletter-input {
  background: var(--ui-surface-2) !important;
  border: 1px solid var(--ui-line) !important;
}
html[data-theme] body .site-footer .newsletter-input input {
  color: var(--ui-ink) !important;
  background: transparent !important;
}
html[data-theme] body .site-footer .newsletter-input input::placeholder { color: var(--ui-faint) !important; }
html[data-theme="light"] body .site-footer .footer-link,
html[data-theme="light"] body .site-footer .newsletter-input input::placeholder { color:#626a84 !important; }
html[data-theme="light"] body.v4-page .site-footer .logo-light,
html[data-theme="light"] body .site-footer .logo-light { display: block !important; filter: none !important; }
html[data-theme="light"] body.v4-page .site-footer .logo-dark,
html[data-theme="light"] body .site-footer .logo-dark { display: none !important; }
html[data-theme="dark"] body.v4-page .site-footer .logo-light,
html[data-theme="dark"] body .site-footer .logo-light { display: block !important; filter: brightness(0) invert(1) !important; }
html[data-theme="dark"] body.v4-page .site-footer .logo-dark,
html[data-theme="dark"] body .site-footer .logo-dark { display: none !important; }

/* The accepted phone layout keeps its geometry and now responds to the theme. */
@media (max-width:620px) {
  html[data-theme="dark"] { background:var(--ui-bg) !important; }
  html[data-theme] body.home-page.v4-page,
  html[data-theme] body.home-page.v4-page .mobile-pixel-home { color:var(--ui-ink) !important;background:var(--ui-bg) !important; }
  html[data-theme="light"] body.home-page.v4-page .mph-benefit-zone {
    background:linear-gradient(180deg,var(--ui-bg-2),var(--ui-accent-soft),var(--ui-bg)) !important;
  }
  html[data-theme="dark"] body.home-page.v4-page .mph-benefit-zone {
    background:linear-gradient(180deg,#0c1024,#161936 58%,#080b1b) !important;
  }
  html[data-theme] body.home-page.v4-page .mph-creators-zone,
  html[data-theme] body.home-page.v4-page .mph-workflow-zone,
  html[data-theme] body.home-page.v4-page .mph-faq { background:var(--ui-bg) !important; }
  html[data-theme] body.home-page.v4-page .mph-benefit {
    color:var(--ui-ink) !important;
    background:color-mix(in srgb,var(--ui-surface) 94%,transparent) !important;
    border:1px solid var(--ui-line) !important;
    box-shadow:var(--ui-shadow-sm) !important;
  }
  html[data-theme] body.home-page.v4-page .mph-benefit-copy h2,
  html[data-theme] body.home-page.v4-page .mph-name,
  html[data-theme] body.home-page.v4-page .mph-metric strong { color:var(--ui-ink) !important; }
  html[data-theme] body.home-page.v4-page .mph-benefit-copy p,
  html[data-theme] body.home-page.v4-page .mph-category,
  html[data-theme] body.home-page.v4-page .mph-metric span { color:var(--ui-muted) !important; }
  html[data-theme] body.home-page.v4-page .mph-creators-card,
  html[data-theme] body.home-page.v4-page .mph-profile,
  html[data-theme] body.home-page.v4-page .mph-tabs a.is-active,
  html[data-theme] body.home-page.v4-page .mph-heart {
    color:var(--ui-ink) !important;
    background:var(--ui-surface) !important;
    border-color:var(--ui-line) !important;
  }
  html[data-theme] body.home-page.v4-page .mph-creators-card,
  html[data-theme] body.home-page.v4-page .mph-profile { box-shadow:var(--ui-shadow-sm) !important; }
  html[data-theme] body.home-page.v4-page .mph-tabs { background:var(--ui-surface-3) !important; }
  html[data-theme] body.home-page.v4-page .mph-tabs a { color:var(--ui-muted) !important; }
  html[data-theme] body.home-page.v4-page .mph-tabs a.is-active { box-shadow:var(--ui-shadow-xs) !important; }
  html[data-theme] body.home-page.v4-page .mph-workflow {
    color:var(--ui-ink) !important;
    background:
      radial-gradient(circle at 90% 0,color-mix(in srgb,var(--ui-accent) 13%,transparent),transparent 42%),
      linear-gradient(145deg,var(--ui-surface),var(--ui-surface-2)) !important;
    border:1px solid var(--ui-line) !important;
    box-shadow:var(--ui-shadow-sm) !important;
  }
  html[data-theme] body.home-page.v4-page .mph-workflow h2,
  html[data-theme] body.home-page.v4-page .mph-step-copy strong { color:var(--ui-ink) !important; }
  html[data-theme] body.home-page.v4-page .mph-step {
    color:var(--ui-ink) !important;
    background:var(--ui-surface-3) !important;
    border-color:var(--ui-line) !important;
  }
  html[data-theme] body.home-page.v4-page .mph-step-icon {
    color:var(--ui-accent) !important;
    background:var(--ui-accent-soft) !important;
    border:1px solid color-mix(in srgb,var(--ui-accent) 16%,var(--ui-line)) !important;
  }
  html[data-theme] body.home-page.v4-page .mph-step-copy span { color:var(--ui-muted) !important; }
  html[data-theme] body.home-page.v4-page .mph-step-no { color:var(--ui-accent) !important; }
  html[data-theme] body.home-page.v4-page .mph-faq h2 { color:var(--ui-accent) !important; }
  html[data-theme] body.home-page.v4-page .mph-faq-list details {
    color:var(--ui-ink) !important;
    background:var(--ui-surface) !important;
    border:1px solid var(--ui-line) !important;
    box-shadow:var(--ui-shadow-xs) !important;
  }
  html[data-theme] body.home-page.v4-page .mph-faq-list summary { color:var(--ui-ink) !important; }

  /* Mobile version of the detailed workflow, when surfaced by layout changes. */
  html[data-theme] body.home-page.v4-page .v4-workflow { background:var(--ui-bg) !important; }
  html[data-theme] body.home-page.v4-page .v4-workflow-shell.container {
    color:var(--ui-ink) !important;
    background:
      radial-gradient(circle at 54% 14%,color-mix(in srgb,var(--ui-accent) 13%,transparent),transparent 24%),
      linear-gradient(180deg,var(--ui-surface-2),var(--ui-bg-2)) !important;
    border:1px solid var(--ui-line) !important;
    border-radius:26px !important;
    box-shadow:var(--ui-shadow-sm) !important;
  }
  html[data-theme] body.home-page.v4-page .v4-workflow-shell::before,
  html[data-theme] body.home-page.v4-page .v4-workflow-shell::after { opacity:.11 !important;filter:saturate(.6); }
}