:root,
html.dark {
  color-scheme: light !important;
  --warm-bg: #fffaf2;
  --warm-bg-soft: #fff4df;
  --warm-surface: rgba(255, 255, 255, 0.92);
  --warm-surface-strong: #ffffff;
  --warm-ink: #2b2118;
  --warm-muted: #7f6f60;
  --warm-line: rgba(236, 170, 76, 0.24);
  --warm-orange: #ff6b1a;
  --warm-orange-deep: #e95a00;
  --warm-yellow: #ffb517;
  --warm-shadow: 0 18px 50px rgba(177, 97, 16, 0.12);

  --el-color-primary: #ff6b1a !important;
  --el-color-primary-rgb: 255, 114, 18 !important;
  --el-color-primary-light-3: #ff9d5d !important;
  --el-color-primary-light-5: #ffba8c !important;
  --el-color-primary-light-7: #ffd8bd !important;
  --el-color-primary-light-8: #ffe6d5 !important;
  --el-color-primary-light-9: #fff2e9 !important;
  --el-color-primary-dark-2: #d94f00 !important;
  --el-bg-color: #ffffff !important;
  --el-bg-color-page: #fffaf2 !important;
  --el-bg-color-overlay: #ffffff !important;
  --el-text-color-primary: #2b2118 !important;
  --el-text-color-regular: #58493c !important;
  --el-text-color-secondary: #867464 !important;
  --el-text-color-placeholder: #b8a899 !important;
  --el-border-color: #ead9c5 !important;
  --el-border-color-light: #f0e2d2 !important;
  --el-border-color-lighter: #f6ebdf !important;
  --el-fill-color: #fff7ed !important;
  --el-fill-color-light: #fffaf4 !important;
  --el-fill-color-lighter: #fffcf8 !important;
  --el-fill-color-blank: #ffffff !important;
  --el-mask-color: rgba(65, 39, 16, 0.4) !important;
}

html,
body,
#app {
  min-height: 100%;
  background:
    radial-gradient(circle at 86% 4%, rgba(255, 181, 23, 0.16), transparent 31rem),
    radial-gradient(circle at 8% 30%, rgba(255, 114, 18, 0.08), transparent 28rem),
    linear-gradient(180deg, #fffdf9 0%, var(--warm-bg) 100%) !important;
  color: var(--warm-ink) !important;
}

body {
  margin: 0;
  accent-color: var(--warm-orange);
}

#app,
#app * {
  border-color: var(--warm-line);
  scrollbar-color: #ffc07a #fff6e9;
}

#app :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, label, small, strong),
#app :where([class*="title"], [class*="headline"], [class*="heading"], [class*="copy"], [class*="desc"], [class*="subtitle"], [class*="meta"], [class*="label"], [class*="text"]) {
  color: var(--warm-ink) !important;
  text-shadow: none !important;
}

#app :where([class*="subtitle"], [class*="desc"], [class*="meta"], [class*="hint"], [class*="kicker"], [class*="eyebrow"], [class*="lead"]) {
  color: var(--warm-muted) !important;
}

/* Page canvases */
#app :where(.public-site, .site-main, .home-page, .membership-page, .membership-main,
  .inspiration-mall, .app-shell, .app-main, .content-shell, .creator-page,
  [class$="-page"], [class$="-view"], [class$="-main"]) {
  background-color: transparent !important;
  color: var(--warm-ink) !important;
}

/* Header and navigation: milky glass, as in the reference */
#app :where(.site-header, .site-header__capsule, .membership-site-header, .membership-topbar,
  .app-header, [class*="topbar"], [class*="navbar"]) {
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(255, 161, 61, 0.2) !important;
  box-shadow: 0 10px 38px rgba(127, 70, 16, 0.08) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
}

#app :where(.site-nav__item, .nav-link-btn, .membership-topnav a, .header-nav-btn, .app-menu .el-menu-item) {
  color: #5d4b3b !important;
}

#app :where(.site-nav__item.active, .site-nav__item.router-link-active, .nav-link-btn.active,
  .membership-topnav .active, .header-nav-btn.is-active, .app-menu .is-active) {
  color: var(--warm-orange) !important;
}

/* Cards and content surfaces */
#app :where(.app-card, .rank-unit, .rank-feature, .membership-card, .home-local-card,
  .home-feature-item, .home-highlight-item, .home-pillar-item, .home-preview,
  .public-user-card, .user-menu-card, .console-nav-card, .app-panel, .side-overview,
  .mall-community, .zone-banner, .el-card, .el-dialog, .el-drawer, .el-popover,
  .el-dropdown-menu, .el-message-box, [class$="-card"], [class$="__card"],
  [class$="-panel"], [class$="__panel"]) {
  background: var(--warm-surface) !important;
  border-color: var(--warm-line) !important;
  box-shadow: var(--warm-shadow) !important;
  color: var(--warm-ink) !important;
}

#app :where(.membership-card.is-recommended, .tier-premium, .app-card:hover,
  .home-local-card:hover, .console-nav-card:hover) {
  border-color: rgba(255, 114, 18, 0.62) !important;
  box-shadow: 0 20px 55px rgba(255, 114, 18, 0.18) !important;
}

/* Forms */
#app :where(input, textarea, select, .el-input__wrapper, .el-textarea__inner,
  .el-select__wrapper, .search-box, .search-wrap, [class*="input-wrap"]) {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: #ead4bb !important;
  box-shadow: 0 0 0 1px rgba(234, 212, 187, 0.9) inset !important;
  color: var(--warm-ink) !important;
}

#app :where(input, textarea)::placeholder {
  color: #b5a18e !important;
}

#app :where(input, textarea, select, .el-input__wrapper, .el-textarea__inner, .el-select__wrapper):focus,
#app :where(.el-input__wrapper, .el-select__wrapper).is-focus {
  border-color: var(--warm-orange) !important;
  box-shadow: 0 0 0 3px rgba(255, 114, 18, 0.13) !important;
}

/* Primary actions and selected states */
#app :where(.el-button--primary, .home-btn--primary, .nav-cta-btn, .nav-store-btn,
  .membership-card__button, .membership-nav-store-btn, .publish-btn, .page-btn--primary,
  .login-submit, [class*="primary-btn"], [class*="submit-btn"], [class*="cta-btn"]) {
  background: linear-gradient(135deg, var(--warm-yellow), var(--warm-orange)) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

#app :where(.el-button--primary, .home-btn--primary, .nav-cta-btn, .nav-store-btn,
  .membership-card__button, .membership-nav-store-btn, .publish-btn, .page-btn--primary,
  .login-submit, [class*="primary-btn"], [class*="submit-btn"], [class*="cta-btn"]) * {
  color: #ffffff !important;
}

#app :where(.el-button--primary, .home-btn--primary, .nav-cta-btn, .nav-store-btn,
  .membership-card__button, .publish-btn, .login-submit):hover {
  background: linear-gradient(135deg, #ffc52a, #ff5f00) !important;
  transform: translateY(-1px);
  box-shadow: none !important;
}

#app :where(.home-accent, .is-accent, .active, .is-active, .material-symbols-outlined,
  .membership-card__price, .membership-card__tier-stars, .app-card__ai-badge) {
  color: var(--warm-orange) !important;
}

#app :where(.cat-pill.active, .sort-chip.active, .billing-switch__indicator,
  .el-tabs__active-bar, .el-radio-button__original-radio:checked + .el-radio-button__inner,
  .el-switch.is-checked .el-switch__core) {
  background: linear-gradient(135deg, var(--warm-yellow), var(--warm-orange)) !important;
  border-color: var(--warm-orange) !important;
  color: #fff !important;
}

#app a,
#app .el-link {
  color: var(--warm-orange-deep) !important;
}

/* Dark application shell becomes warm and airy */
#app :where(.app-aside, .el-aside, .app-menu, aside) {
  background: rgba(255, 250, 242, 0.95) !important;
  border-color: var(--warm-line) !important;
  box-shadow: 12px 0 36px rgba(147, 80, 15, 0.06) !important;
}

#app :where(.el-table, .el-table tr, .el-table th.el-table__cell, .el-table td.el-table__cell) {
  background: rgba(255, 255, 255, 0.78) !important;
  color: var(--warm-ink) !important;
}

#app :where(.el-table__row:hover > td.el-table__cell) {
  background: #fff5e7 !important;
}

/* Decorative glows move from sci-fi cyan to sunlight orange */
#app :where([class*="glow"], [class*="halo"], [class*="aura"]) {
  filter: hue-rotate(165deg) saturate(1.15) brightness(1.12);
  opacity: 0.7 !important;
}

#app :where(.home-plate__mesh, .home-hero__ripple-grid, .home-pillar-item__grid,
  .home-cta-pixel-grid) {
  opacity: 0.18 !important;
  filter: sepia(1) saturate(2.8) hue-rotate(344deg) brightness(1.2);
}

/* Keep media rich while removing cold chrome around it */
#app :where(img, video, canvas) {
  color: initial;
}

#app :where(.home-media-slot__frame, .app-card__preview, .rank-feature__preview) {
  background-color: #fff5e6 !important;
  border-color: rgba(255, 151, 45, 0.26) !important;
}

/* Footer */
#app :where(.site-footer, footer) {
  background: linear-gradient(180deg, rgba(255, 249, 239, 0.96), #fff0d9) !important;
  border-color: var(--warm-line) !important;
  color: #6b5846 !important;
}

/* Menus, overlays and notifications rendered outside #app */
body > :where(.el-popper, .el-overlay, .el-message, .el-notification) {
  --el-bg-color-overlay: #fff !important;
  --el-text-color-primary: #2b2118 !important;
  --el-text-color-regular: #58493c !important;
  --el-border-color-light: #f0e2d2 !important;
  color: var(--warm-ink) !important;
}

::selection {
  background: rgba(255, 181, 23, 0.35);
  color: #442300;
}

@media (max-width: 768px) {
  #app :where(.site-header__capsule, .site-header, .membership-site-header, .app-header) {
    background: rgba(255, 255, 255, 0.94) !important;
  }

  #app :where(.mobile-nav-drawer, .app-aside) {
    background: #fffaf2 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app *,
  #app *::before,
  #app *::after {
    transition-duration: 0.01ms !important;
  }
}

/* High-specificity production overrides.
   Route chunks are lazy-loaded after this file and carry scoped selectors. */
html body #app .app-route-stage,
html body #app .public-site,
html body #app .site-main,
html body #app .home-page,
html body #app .home-plate,
html body #app .membership-page,
html body #app .membership-main,
html body #app .inspiration-mall,
html body #app .app-shell,
html body #app .app-main,
html body #app .content-shell,
html body #app [class$="-page"],
html body #app [class$="-view"] {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--warm-ink) !important;
}

html body #app .home-plate--hero {
  background:
    radial-gradient(circle at 72% 18%, rgba(255, 181, 23, 0.18), transparent 30rem),
    radial-gradient(circle at 22% 75%, rgba(255, 114, 18, 0.1), transparent 28rem),
    linear-gradient(180deg, #fffdf9, #fff8ed) !important;
}

html body #app .home-plate:not(.home-plate--hero),
html body #app section {
  background-color: transparent !important;
}

html body #app .site-header__capsule,
html body #app .membership-site-header,
html body #app .membership-topbar,
html body #app .app-header {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(255, 142, 35, 0.2) !important;
  box-shadow: 0 12px 42px rgba(132, 69, 9, 0.1) !important;
  backdrop-filter: blur(20px) saturate(1.08) !important;
}

html body #app .brand-logo,
html body #app .footer-logo {
  filter: brightness(0.32) sepia(0.18) saturate(1.4) !important;
}

html body #app .site-nav__dock-btn,
html body #app .site-nav__item,
html body #app .site-nav__item-label,
html body #app .site-nav__icon-btn,
html body #app .site-nav__icon-btn .material-symbols-outlined,
html body #app .nav-link-btn,
html body #app .mobile-menu-toggle {
  color: #665443 !important;
}

html body #app .site-nav__dock-btn.active,
html body #app .site-nav__item.active,
html body #app .site-nav__item.active .site-nav__item-label {
  background: #fff1df !important;
  border-color: rgba(255, 114, 18, 0.18) !important;
  color: var(--warm-orange) !important;
}

html body #app .site-nav__icon-label {
  background: #fff !important;
  border-color: var(--warm-line) !important;
  color: var(--warm-ink) !important;
  box-shadow: 0 8px 24px rgba(137, 73, 12, 0.12) !important;
}

html body #app .nav-store-btn,
html body #app .nav-cta-btn,
html body #app .home-btn--primary,
html body #app .public-cta-btn--primary,
html body #app .home-work-card__download,
html body #app .membership-card__button,
html body #app .membership-nav-store-btn,
html body #app .publish-btn,
html body #app .login-submit,
html body #app .page-btn--primary {
  background: linear-gradient(135deg, var(--warm-yellow), var(--warm-orange)) !important;
  background-color: var(--warm-orange) !important;
  border-color: transparent !important;
  color: #fff !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

html body #app .nav-store-btn *,
html body #app .nav-cta-btn *,
html body #app .home-btn--primary *,
html body #app .public-cta-btn__label,
html body #app .home-work-card__download *,
html body #app .membership-card__button *,
html body #app .publish-btn *,
html body #app .login-submit * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
  filter: none !important;
}

html body #app .public-cta-btn__label {
  transform: none !important;
}

html body #app .public-cta-btn__icon {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 0.92 !important;
  filter: none !important;
}

html body #app .public-cta-btn--primary:hover,
html body #app .public-cta-btn--primary:focus-visible,
html body #app .public-cta-btn--primary.el-button:hover,
html body #app .public-cta-btn--primary.el-button:focus-visible {
  color: #fff !important;
  background: linear-gradient(135deg, #ff8a2a, #e95a00) !important;
  background-image: linear-gradient(135deg, #ff8a2a, #e95a00) !important;
}

html body #app .public-cta-btn--primary:hover .public-cta-btn__label,
html body #app .public-cta-btn--primary:focus-visible .public-cta-btn__label,
html body #app .public-cta-btn--primary.el-button:hover .public-cta-btn__label,
html body #app .public-cta-btn--primary.el-button:focus-visible .public-cta-btn__label {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
  filter: none !important;
}

html body #app .public-cta-btn--ghost {
  color: #3d4552 !important;
  -webkit-text-fill-color: #3d4552 !important;
  background: #fff !important;
  border-color: rgba(255, 142, 35, 0.28) !important;
}

html body #app .public-cta-btn--ghost:hover,
html body #app .public-cta-btn--ghost:focus-visible {
  color: #c2410c !important;
  -webkit-text-fill-color: #c2410c !important;
  background: #fff8f0 !important;
}

html body #app .home-work-showcase-cta__title,
html body #app .home-work-showcase-cta__title * {
  color: #2b2118 !important;
  -webkit-text-fill-color: #2b2118 !important;
  text-shadow: none !important;
}

html body #app .home-work-showcase-cta__title::after {
  color: #7f6f60 !important;
  -webkit-text-fill-color: #7f6f60 !important;
}

html body #app .home-entry-card,
html body #app .home-entry-card * {
  text-shadow: none !important;
}

html body #app .home-entry-card--create,
html body #app .home-entry-card--create * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body #app .home-entry-card--create {
  background: linear-gradient(135deg, #ffb517, #ff6b1a) !important;
  background-image: linear-gradient(135deg, #ffb517, #ff6b1a) !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body #app .home-entry-card--explore,
html body #app .home-entry-card--explore * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body #app .home-entry-card--explore {
  background: #24272d !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: 0 14px 36px rgba(36, 39, 45, 0.22) !important;
}

html body #app .home-entry-card__desc {
  color: rgba(255, 255, 255, 0.88) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.88) !important;
}

html body #app .home-entry-card:hover,
html body #app .home-entry-card:focus-visible {
  transform: translateY(-3px) !important;
}

html body #app .home-entry-card--create:hover,
html body #app .home-entry-card--create:focus-visible {
  background: linear-gradient(135deg, #ff8a2a, #e95a00) !important;
  background-image: linear-gradient(135deg, #ff8a2a, #e95a00) !important;
}

html body #app .home-entry-card--explore:hover,
html body #app .home-entry-card--explore:focus-visible {
  background: #2f333b !important;
}

html body #app .home-work-card__download:hover,
html body #app .home-work-card__download:focus-visible {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: linear-gradient(135deg, #ff8a2a, #d95000) !important;
}

html body #app .home-hero__badge {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(255, 114, 18, 0.28) !important;
  color: var(--warm-orange-deep) !important;
  box-shadow: 0 8px 26px rgba(140, 78, 17, 0.1) !important;
}

html body #app .home-hero__badge *,
html body #app .home-hero__headline,
html body #app .home-hero__headline *,
html body #app .home-hero__copy,
html body #app .home-copy-line,
html body #app .home-hero__copy .variable-proximity__letter,
html body #app .home-hero__copy .variable-proximity__space {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.46) !important;
}

html body #app .home-hero__badge .material-symbols-outlined {
  color: var(--warm-orange) !important;
  -webkit-text-fill-color: var(--warm-orange) !important;
}

html body #app .home-hero__subtitle,
html body #app .home-hero__subtitle * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.42) !important;
}

html body #app .home-block__lead,
html body #app .home-block__lead * {
  color: var(--warm-muted) !important;
  -webkit-text-fill-color: var(--warm-muted) !important;
}

html body #app [class$="-card"],
html body #app [class$="__card"],
html body #app .home-work-card,
html body #app .app-card,
html body #app .rank-unit,
html body #app .rank-feature,
html body #app .membership-card,
html body #app .home-preview,
html body #app .home-local-card,
html body #app .console-nav-card,
html body #app .app-panel,
html body #app .el-card,
html body #app .el-dialog,
html body #app .el-drawer,
html body #app .el-dropdown-menu {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: var(--warm-line) !important;
  color: var(--warm-ink) !important;
  box-shadow: var(--warm-shadow) !important;
}

html body #app .home-work-card__media-nav {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: rgba(255, 114, 18, 0.28) !important;
  color: var(--warm-orange) !important;
  opacity: 0.98 !important;
  pointer-events: auto !important;
  box-shadow: 0 10px 24px rgba(31, 35, 41, 0.12) !important;
}

html body #app .home-work-card__media-nav::before {
  background: var(--warm-orange) !important;
  filter: none !important;
}

html body #app .home-work-card__media-nav:hover,
html body #app .home-work-card__media-nav:focus-visible {
  background: #fff7ed !important;
  border-color: rgba(255, 107, 26, 0.48) !important;
  box-shadow: 0 12px 26px rgba(255, 107, 26, 0.18) !important;
}

html body #app .home-work-card__media-nav:hover::before,
html body #app .home-work-card__media-nav:focus-visible::before {
  background: var(--warm-orange-deep) !important;
}

html body #app .home-work-showcase__band + .home-work-showcase__band {
  padding-top: 0 !important;
  border-top-color: transparent !important;
}

html body #app .home-work-showcase {
  --home-work-title-gap: clamp(32px, 3.9vw, 52px) !important;
}

html body #app .home-work-card {
  background: #fff !important;
  border-color: rgba(150, 162, 178, 0.52) !important;
  box-shadow:
    0 14px 32px rgba(31, 35, 41, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.92) inset !important;
}

html body #app .home-work-card:hover {
  border-color: rgba(255, 107, 26, 0.32) !important;
  box-shadow:
    0 16px 36px rgba(31, 35, 41, 0.13),
    0 0 0 1px rgba(255, 107, 26, 0.1) inset !important;
}

html body #app .home-work-card__media {
  background: #f3f5f8 !important;
  border-color: rgba(170, 180, 194, 0.5) !important;
  box-shadow:
    0 10px 24px rgba(31, 35, 41, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.92) inset !important;
}

html body #app .home-work-showcase,
html body #app .home-work-showcase__intro,
html body #app .home-work-showcase__rows,
html body #app .home-work-showcase__band,
html body #app .home-work-showcase__band:nth-of-type(even),
html body #app .home-work-showcase__band:nth-of-type(odd),
html body #app .home-work-column__head {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body #app .home-work-showcase__rows {
  gap: var(--home-work-title-gap) !important;
}

html body #app .home-work-showcase__band {
  gap: clamp(16px, 1.8vw, 24px) !important;
  isolation: isolate !important;
}

html body #app .home-work-showcase__intro {
  margin-bottom: var(--home-work-title-gap) !important;
  padding: 0 !important;
}

html body #app .home-work-showcase__hero-image {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  object-fit: contain !important;
}

html body #app [class$="-toolbar"] {
  background: rgba(255, 255, 255, 0.76) !important;
  color: var(--warm-ink) !important;
}

/* 首页区块标题：纯文字，不要白底卡?*/
html body #app .home-block__head,
html body #app .home-showcase__head,
html body #app .home-work-column__head {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body #app .home-work-column__head span {
  color: #ff6b1a !important;
  -webkit-text-fill-color: #ff6b1a !important;
  font-size: clamp(17px, 1.18vw, 22px) !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.08em !important;
}

html body #app .home-work-column__head strong {
  color: #252a31 !important;
  -webkit-text-fill-color: #252a31 !important;
  font-size: clamp(34px, 2.8vw, 48px) !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
}

html body #app .home-block__eyebrow {
  color: #e95a00 !important;
  -webkit-text-fill-color: #e95a00 !important;
}

html body #app .home-block__title,
html body #app .home-block__title * {
  color: #2b2118 !important;
  -webkit-text-fill-color: #2b2118 !important;
  text-shadow: none !important;
}

html body #app .home-block__lead,
html body #app .home-block__lead * {
  color: #7f6f60 !important;
  -webkit-text-fill-color: #7f6f60 !important;
}

html body #app canvas {
  opacity: 0.16 !important;
  filter: sepia(1) saturate(2.2) hue-rotate(342deg) brightness(1.35) !important;
}

/* Public navigation is teleported beside #app in the production shell. */
html body .site-header__capsule,
html body .site-header.is-scrolled .site-header__capsule {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(255, 142, 35, 0.22) !important;
  box-shadow: 0 12px 42px rgba(132, 69, 9, 0.11) !important;
  backdrop-filter: blur(20px) saturate(1.08) !important;
}

html body .site-header .brand-logo {
  filter: brightness(0.3) sepia(0.18) saturate(1.5) !important;
}

html body .site-header .site-nav__dock-btn,
html body .site-header .site-nav__item,
html body .site-header .site-nav__item-label,
html body .site-header .site-nav__icon-btn,
html body .site-header .site-nav__icon-btn .material-symbols-outlined,
html body .site-header .nav-link-btn,
html body .site-header .mobile-menu-toggle {
  color: #665443 !important;
}

html body .site-header .site-nav__dock-btn.active,
html body .site-header .site-nav__item.active,
html body .site-header .site-nav__item.active .site-nav__item-label {
  background: #fff1df !important;
  border-color: rgba(255, 114, 18, 0.2) !important;
  color: var(--warm-orange) !important;
}

html body .site-header .nav-store-btn,
html body .site-header .nav-cta-btn {
  background: linear-gradient(135deg, var(--warm-yellow), var(--warm-orange)) !important;
  background-color: var(--warm-orange) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 9px 22px rgba(255, 114, 18, 0.24) !important;
}

html body .site-header .nav-store-btn *,
html body .site-header .nav-cta-btn * {
  color: #fff !important;
}

html body .site-header .site-nav__icon-label {
  background: #fff !important;
  border-color: var(--warm-line) !important;
  color: var(--warm-ink) !important;
  box-shadow: 0 8px 24px rgba(137, 73, 12, 0.12) !important;
}

html body .mobile-nav-drawer,
html body .public-user-dropdown,
html body .el-popper,
html body .el-dropdown-menu {
  background: #fff !important;
  background-image: none !important;
  border-color: var(--warm-line) !important;
  color: var(--warm-ink) !important;
}

html body .nexus-live-dot,
html body #app .nexus-live-dot,
html body #app [class*="live-dot"],
html body #app [class*="status-dot"] {
  background: var(--warm-yellow) !important;
  border-color: #fff3cf !important;
  box-shadow: 0 0 0 4px rgba(255, 181, 23, 0.14), 0 0 14px rgba(255, 114, 18, 0.35) !important;
}

/* Authentication and account surfaces are teleported outside the app root. */
html body .el-overlay,
html body .el-overlay-dialog {
  background: rgba(82, 49, 18, 0.28) !important;
  backdrop-filter: blur(4px) !important;
}

html body .el-dialog,
html body .el-message-box,
html body .login-dialog,
html body .auth-dialog,
html body [class*="login-modal"],
html body [class*="auth-modal"] {
  background: #fffdf9 !important;
  background-image: none !important;
  border: 1px solid rgba(255, 145, 38, 0.25) !important;
  border-radius: 20px !important;
  color: var(--warm-ink) !important;
  box-shadow: 0 28px 80px rgba(110, 62, 14, 0.2) !important;
}

html body .el-dialog *,
html body .el-message-box *,
html body .login-dialog *,
html body .auth-dialog * {
  text-shadow: none !important;
}

html body .el-dialog__title,
html body .el-message-box__title,
html body .login-head,
html body .login-head *,
html body [class*="auth-title"],
html body [class*="login-title"] {
  color: var(--warm-ink) !important;
  -webkit-text-fill-color: var(--warm-ink) !important;
}

html body .login-head__sub,
html body .login-hint,
html body .login-agree-text,
html body [class*="auth-sub"],
html body [class*="login-sub"] {
  color: var(--warm-muted) !important;
  -webkit-text-fill-color: var(--warm-muted) !important;
}

html body .el-dialog input,
html body .el-dialog textarea,
html body .el-dialog .el-input__wrapper,
html body .el-dialog .el-select__wrapper,
html body .login-dialog input,
html body .auth-dialog input,
html body [class*="login-page"] input,
html body [class*="auth-page"] input {
  background: #fff !important;
  border-color: #ead4bb !important;
  color: var(--warm-ink) !important;
  -webkit-text-fill-color: var(--warm-ink) !important;
  box-shadow: 0 0 0 1px #ead4bb inset !important;
}

html body .el-dialog input:focus,
html body .el-dialog .el-input__wrapper.is-focus,
html body .login-dialog input:focus,
html body .auth-dialog input:focus {
  border-color: var(--warm-orange) !important;
  box-shadow: 0 0 0 3px rgba(255, 114, 18, 0.14) !important;
}

html body .login-submit,
html body .auth-submit,
html body [class*="login-submit"],
html body [class*="auth-submit"],
html body .el-dialog .el-button--primary {
  background: linear-gradient(135deg, var(--warm-yellow), var(--warm-orange)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
}

html body .login-submit *,
html body .auth-submit *,
html body .el-dialog .el-button--primary * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html body .otp-row__send,
html body .login-switch,
html body .login-links a,
html body .login-agree-link,
html body .login-invite-toggle,
html body .el-dialog .el-link {
  color: var(--warm-orange-deep) !important;
}

html body .el-dialog__close,
html body .el-message-box__close {
  color: #7d6957 !important;
}

html body .el-checkbox__inner,
html body .el-radio__inner {
  background: #fff !important;
  border-color: #d9bea0 !important;
}

html body .el-checkbox__input.is-checked .el-checkbox__inner,
html body .el-radio__input.is-checked .el-radio__inner {
  background: var(--warm-orange) !important;
  border-color: var(--warm-orange) !important;
}

html body .public-user-dropdown,
html body .membership-user-dropdown,
html body .user-account-dropdown,
html body .public-user-card,
html body .membership-user-card,
html body .user-menu-card {
  background: #fff !important;
  background-image: none !important;
  border-color: var(--warm-line) !important;
  color: var(--warm-ink) !important;
  box-shadow: 0 18px 50px rgba(115, 66, 16, 0.16) !important;
}

html body .el-popper.public-user-dropdown,
html body .el-popper.membership-user-dropdown,
html body .el-popper.user-account-dropdown,
html body .el-popper.public-user-dropdown .el-popper__arrow::before,
html body .el-popper.membership-user-dropdown .el-popper__arrow::before,
html body .el-popper.user-account-dropdown .el-popper__arrow::before,
html body .public-user-dropdown .el-dropdown-menu,
html body .membership-user-dropdown .el-dropdown-menu,
html body .user-account-dropdown .el-dropdown-menu,
html body .public-user-dropdown .el-scrollbar,
html body .membership-user-dropdown .el-scrollbar,
html body .user-account-dropdown .el-scrollbar,
html body .public-user-dropdown .el-scrollbar__view,
html body .membership-user-dropdown .el-scrollbar__view,
html body .user-account-dropdown .el-scrollbar__view,
html body .public-user-dropdown .el-dropdown-menu__item,
html body .membership-user-dropdown .el-dropdown-menu__item,
html body .user-account-dropdown .el-dropdown-menu__item,
html body .public-user-dropdown .el-dropdown-menu__item.is-menu-group-start,
html body .membership-user-dropdown .el-dropdown-menu__item.is-menu-group-start,
html body .user-account-dropdown .el-dropdown-menu__item.is-menu-group-start,
html body .public-user-dropdown .el-dropdown-menu__item--divided {
  background: #fff !important;
  background-image: none !important;
}

html body .public-user-dropdown .public-user-card__copy strong,
html body .public-user-dropdown .public-user-menu-copy strong,
html body .public-user-dropdown .el-dropdown-menu__item {
  color: #2b2118 !important;
  -webkit-text-fill-color: #2b2118 !important;
}

html body .public-user-dropdown .public-user-card,
html body .membership-user-dropdown .membership-user-card,
html body .user-account-dropdown .user-menu-card {
  border: 0 !important;
  border-bottom: 1px solid #e5e7eb !important;
  border-radius: 0 !important;
}

html body .public-user-dropdown .el-dropdown-menu__item,
html body .membership-user-dropdown .el-dropdown-menu__item,
html body .user-account-dropdown .el-dropdown-menu__item {
  border-radius: 0 !important;
}

html body .public-user-dropdown .el-dropdown-menu__item--divided,
html body .membership-user-dropdown .el-dropdown-menu__item--divided,
html body .user-account-dropdown .el-dropdown-menu__item--divided,
html body .public-user-dropdown .el-dropdown-menu__item.is-menu-group-start,
html body .membership-user-dropdown .el-dropdown-menu__item.is-menu-group-start,
html body .user-account-dropdown .el-dropdown-menu__item.is-menu-group-start {
  margin-top: 0 !important;
  border-top: 1px solid #e5e7eb !important;
}

html body .public-user-dropdown .public-user-card__copy span,
html body .public-user-dropdown .public-user-menu-copy small {
  color: #7f6f60 !important;
  -webkit-text-fill-color: #7f6f60 !important;
}

html body .public-user-dropdown .public-user-menu-icon {
  color: #e95a00 !important;
  -webkit-text-fill-color: #e95a00 !important;
}

html body .public-user-dropdown .el-dropdown-menu__item:not(.is-disabled):hover,
html body .public-user-dropdown .el-dropdown-menu__item:not(.is-disabled):focus,
html body .membership-user-dropdown .el-dropdown-menu__item:not(.is-disabled):hover,
html body .membership-user-dropdown .el-dropdown-menu__item:not(.is-disabled):focus,
html body .user-account-dropdown .el-dropdown-menu__item:not(.is-disabled):hover,
html body .user-account-dropdown .el-dropdown-menu__item:not(.is-disabled):focus {
  color: #2b2118 !important;
  -webkit-text-fill-color: #2b2118 !important;
  background: #fff !important;
  background-image: none !important;
}

html body .public-user-dropdown .public-user-menu-logout .public-user-menu-icon,
html body .public-user-dropdown .public-user-menu-logout .public-user-menu-copy strong {
  color: #dc2626 !important;
  -webkit-text-fill-color: #dc2626 !important;
}

html body .public-user-dropdown .public-user-menu-logout:not(.is-disabled):hover,
html body .public-user-dropdown .public-user-menu-logout:not(.is-disabled):focus {
  background: #fff !important;
  background-image: none !important;
}

/* Standalone sign-in, password recovery and account pages. */
html body #app [class*="login-page"],
html body #app [class*="auth-page"],
html body #app [class*="forgot-page"],
html body #app [class*="password-page"],
html body #app [class*="account-page"] {
  background: linear-gradient(180deg, #fffdf9, #fff7e9) !important;
  background-image: none !important;
  color: var(--warm-ink) !important;
}

html body #app [class*="login-card"],
html body #app [class*="auth-card"],
html body #app [class*="forgot-card"],
html body #app [class*="password-card"],
html body #app [class*="account-card"] {
  background: #fff !important;
  background-image: none !important;
  border-color: var(--warm-line) !important;
  color: var(--warm-ink) !important;
  box-shadow: var(--warm-shadow) !important;
}

/* Remove the old sci-fi effects while preserving content imagery and charts. */
html body *,
html body *::before,
html body *::after {
  animation: none !important;
  transition: none !important;
}

html body .home-page canvas,
html body .public-site > canvas,
html body [class*="ripple"] canvas,
html body [class*="liquid"] canvas,
html body [class*="particle"] canvas,
html body [class*="meteor"] canvas,
html body [class*="ether"] canvas {
  display: none !important;
}

html body [class*="ripple-grid"],
html body [class*="pixel-grid"],
html body [class*="mesh"],
html body [class*="meteor"],
html body [class*="particle"],
html body [class*="scanline"],
html body [class*="scan-line"],
html body [class*="light-beam"],
html body [class*="edge-light"],
html body [class*="liquid-ether"],
html body [class*="liquid-canvas"],
html body [class*="pixel-noise"] {
  display: none !important;
}

html body [class*="glow"],
html body [class*="halo"],
html body [class*="aura"] {
  display: none !important;
  filter: none !important;
  box-shadow: none !important;
}

html body #app :where(.home-plate, .home-preview, .membership-card, .app-card),
html body :where(.site-header__capsule, .el-dialog, .el-message-box) {
  filter: none !important;
}

/* Screenshot-driven corrections: lazy route styles load after the base theme. */
html body .el-overlay .el-overlay-dialog .el-dialog .login-submit,
html body .el-overlay .el-dialog .login-submit,
html body .el-dialog .login-submit {
  width: 100% !important;
  background: linear-gradient(135deg, #ffb517, #ff6b1a) !important;
  background-color: #ffbd86 !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: none !important;
}

html body .el-dialog .login-submit,
html body .el-dialog .login-submit span,
html body .el-dialog .login-submit .material-symbols-outlined {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html body .el-overlay .el-dialog .login-head,
html body .el-overlay .el-dialog .login-head__sub,
html body .el-overlay .el-dialog .login-agree,
html body .el-overlay .el-dialog .login-agree-text,
html body .el-overlay .el-dialog label {
  color: #57483b !important;
  -webkit-text-fill-color: #57483b !important;
}

html body .el-overlay .el-dialog .el-input__wrapper,
html body .el-overlay .el-dialog input {
  background: #fff !important;
  border-color: #edc79f !important;
  color: #2b2118 !important;
  -webkit-text-fill-color: #2b2118 !important;
}

/* Homepage application-store callout */
html body #app .home-page .home-scenario-store-cta {
  background: linear-gradient(135deg, #fff9ef 0%, #fff1d7 100%) !important;
  border: 1px solid rgba(255, 128, 20, 0.28) !important;
  box-shadow: 0 18px 45px rgba(165, 88, 13, 0.12) !important;
}

html body #app .home-page .home-scenario-store-cta__kicker,
html body #app .home-page .home-scenario-store-cta__title,
html body #app .home-page .home-scenario-store-cta__desc {
  color: #2b2118 !important;
  -webkit-text-fill-color: #2b2118 !important;
  text-shadow: none !important;
}

html body #app .home-page .home-scenario-store-cta__kicker,
html body #app .home-page .home-scenario-store-cta__desc {
  color: #7f6f60 !important;
  -webkit-text-fill-color: #7f6f60 !important;
}

html body #app .home-page .home-scenario-store-cta__button,
html body #app .home-page .home-scenario-store-cta__icon {
  background: linear-gradient(135deg, #ffb517, #ff6b1a) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
}

html body #app .home-page .home-scenario-store-cta__button *,
html body #app .home-page .home-scenario-store-cta__icon * {
  color: #fff !important;
  stroke: #fff !important;
}

/* Remove the oversized black QING WU footer reveal entirely. */
html body .footer-unfold,
html body .footer-unfold__panel,
html body .footer-unfold__liquid,
html body .footer-unfold__liquid-canvas,
html body .footer-unfold__wordmark,
html body .footer-unfold__glow {
  display: none !important;
  min-height: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

html body .site-footer,
html body .site-footer::before,
html body .site-footer::after {
  background: #fff7e9 !important;
  background-image: none !important;
  border-color: rgba(255, 142, 35, 0.18) !important;
  box-shadow: none !important;
}

html body .site-footer .footer-col,
html body .site-footer .footer-col *,
html body .site-footer .footer-meta,
html body .site-footer .footer-meta *,
html body .site-footer button,
html body .site-footer a {
  color: #6b5846 !important;
  -webkit-text-fill-color: #6b5846 !important;
  text-shadow: none !important;
}

html body .site-footer .footer-col h4,
html body .site-footer .footer-contact-kicker {
  color: #2b2118 !important;
  -webkit-text-fill-color: #2b2118 !important;
}

html body .site-footer a:hover,
html body .site-footer button:hover,
html body .site-footer .footer-meta__icp {
  color: #e95a00 !important;
  -webkit-text-fill-color: #e95a00 !important;
}

/* Community block */
html body #app .mall-community,
html body #app .mall-community-wrap {
  background: linear-gradient(135deg, #fff8ec 0%, #fff 55%, #fff0d4 100%) !important;
  background-image: linear-gradient(135deg, #fff8ec 0%, #fff 55%, #fff0d4 100%) !important;
  border-color: rgba(255, 133, 25, 0.24) !important;
  box-shadow: 0 16px 40px rgba(153, 82, 13, 0.1) !important;
}

html body #app .mall-community__halo {
  display: none !important;
}

html body #app .mall-community__eyebrow,
html body #app .mall-community__meta,
html body #app .mall-community__content,
html body #app .mall-community__content * {
  color: #554536 !important;
  -webkit-text-fill-color: #554536 !important;
}

html body #app .mall-community__qr-card {
  background: #fff !important;
  border-color: #f0cfaa !important;
  box-shadow: 0 10px 28px rgba(133, 72, 15, 0.1) !important;
}

html body #app .mall-community__qr,
html body #app .mall-community__qr img {
  filter: sepia(1) saturate(4) hue-rotate(345deg) brightness(1.02) !important;
}

/* Application mall: remove remaining navy/cyan ranking chrome. */
html body #app .inspiration-mall .mall-community-entry {
  background: linear-gradient(135deg, #fff0d1, #fff9ed) !important;
  border: 1px solid rgba(255, 128, 20, 0.25) !important;
  color: #2b2118 !important;
  box-shadow: 0 12px 30px rgba(147, 77, 11, 0.11) !important;
}

html body #app .inspiration-mall .mall-community-entry *,
html body #app .inspiration-mall .mall-community-entry__body,
html body #app .inspiration-mall .mall-community-entry__action {
  color: #5e4a38 !important;
  -webkit-text-fill-color: #5e4a38 !important;
}

html body #app .inspiration-mall .mall-community-entry__icon {
  background: linear-gradient(135deg, #ffb517, #ff6b1a) !important;
  border-color: transparent !important;
  color: #fff !important;
}

html body #app .inspiration-mall .mall-community-entry__action,
html body #app .inspiration-mall .mall-community-entry__arrow {
  color: #e95a00 !important;
  -webkit-text-fill-color: #e95a00 !important;
}

html body #app .inspiration-mall .zone-banner,
html body #app .inspiration-mall .zone-banner--plaza,
html body #app .inspiration-mall .mall-zone--game .zone-banner,
html body #app .inspiration-mall .mall-zone--app .zone-banner {
  background: linear-gradient(135deg, #fff0d0, #fff9ed) !important;
  background-image: linear-gradient(135deg, #fff0d0, #fff9ed) !important;
  border-color: rgba(255, 128, 20, 0.2) !important;
  box-shadow: 0 10px 26px rgba(149, 78, 12, 0.08) !important;
}

html body #app .inspiration-mall .zone-banner__icon {
  background: linear-gradient(135deg, #ffb517, #ff6b1a) !important;
  color: #fff !important;
}

html body #app .inspiration-mall .zone-banner__title,
html body #app .inspiration-mall .zone-banner__subtitle,
html body #app .inspiration-mall .zone-banner__text {
  color: #4f3e30 !important;
  -webkit-text-fill-color: #4f3e30 !important;
}

html body #app .inspiration-mall .rank-unit,
html body #app .inspiration-mall .rank-unit__head,
html body #app .inspiration-mall .rank-unit__body,
html body #app .inspiration-mall .rank-list,
html body #app .inspiration-mall .rank-row {
  background: #fff !important;
  background-image: none !important;
  border-color: #f0dcc4 !important;
  color: #3e3025 !important;
  box-shadow: none !important;
}

html body #app .inspiration-mall .rank-row:hover,
html body #app .inspiration-mall .rank-row.active {
  background: #fff3df !important;
}

html body #app .inspiration-mall .rank-row *,
html body #app .inspiration-mall .rank-row__name,
html body #app .inspiration-mall .rank-row__fav,
html body #app .inspiration-mall .rank-unit__title {
  color: #4d3c2e !important;
  -webkit-text-fill-color: #4d3c2e !important;
}

html body #app .inspiration-mall .rank-row__no,
html body #app .inspiration-mall .rank-link,
html body #app .inspiration-mall .mall-count {
  color: #e95a00 !important;
  -webkit-text-fill-color: #e95a00 !important;
}

html body #app .inspiration-mall .app-card,
html body #app .inspiration-mall .rank-feature,
html body #app .inspiration-mall .rank-feature__body {
  background: #fff !important;
  background-image: none !important;
  border-color: #f0dcc4 !important;
  color: #3e3025 !important;
  box-shadow: 0 10px 26px rgba(121, 68, 18, 0.08) !important;
}

html body #app .inspiration-mall .app-card__preview,
html body #app .inspiration-mall .rank-feature__preview,
html body #app .inspiration-mall .rank-feature--empty {
  background-color: #fff3df !important;
  border-color: #f1dcc3 !important;
}

html body #app .inspiration-mall .rank-feature__name,
html body #app .inspiration-mall .rank-feature__desc,
html body #app .inspiration-mall .rank-feature__meta,
html body #app .inspiration-mall .app-card__title,
html body #app .inspiration-mall .app-card__desc,
html body #app .inspiration-mall .app-card__meta {
  color: #4d3c2e !important;
  -webkit-text-fill-color: #4d3c2e !important;
}

/* V7 ?light technology system: white 60%, graphite 30%, orange 10%. */
:root,
html.dark {
  --warm-bg: #f6f7f9;
  --warm-bg-soft: #f0f2f5;
  --warm-surface: rgba(255, 255, 255, 0.96);
  --warm-surface-strong: #ffffff;
  --warm-ink: #25282e;
  --warm-muted: #69707a;
  --warm-line: rgba(37, 40, 46, 0.12);
  --warm-orange: #ff6b1a;
  --warm-orange-deep: #e95308;
  --warm-yellow: #ff7a2c;
  --warm-shadow: 0 14px 36px rgba(28, 32, 38, 0.09);

  --el-color-primary: #ff6b1a !important;
  --el-color-primary-rgb: 255, 107, 26 !important;
  --el-color-primary-light-3: #ff985d !important;
  --el-color-primary-light-5: #ffb88f !important;
  --el-color-primary-light-7: #ffd8c2 !important;
  --el-color-primary-light-8: #ffe6d8 !important;
  --el-color-primary-light-9: #fff2ea !important;
  --el-color-primary-dark-2: #d94b00 !important;
  --el-bg-color: #ffffff !important;
  --el-bg-color-page: #f6f7f9 !important;
  --el-bg-color-overlay: #ffffff !important;
  --el-text-color-primary: #25282e !important;
  --el-text-color-regular: #4a5059 !important;
  --el-text-color-secondary: #707782 !important;
  --el-border-color: #dfe3e8 !important;
  --el-border-color-light: #e8ebef !important;
  --el-fill-color: #f1f3f6 !important;
  --el-fill-color-light: #f6f7f9 !important;
  --el-fill-color-lighter: #fafbfc !important;
}

html,
body,
#app {
  background: #f6f7f9 !important;
  background-image: none !important;
  color: #25282e !important;
}

html body #app .app-route-stage,
html body #app .public-site,
html body #app .site-main,
html body #app .home-page,
html body #app .membership-page,
html body #app .membership-main,
html body #app .inspiration-mall,
html body #app .app-shell,
html body #app .app-main,
html body #app .content-shell,
html body #app [class$="-page"],
html body #app [class$="-view"] {
  background: #f6f7f9 !important;
  background-image: none !important;
  color: #25282e !important;
}

html body #app .home-plate--hero {
  background:
    linear-gradient(90deg, rgba(255, 107, 26, 0.055) 1px, transparent 1px),
    linear-gradient(rgba(37, 40, 46, 0.035) 1px, transparent 1px),
    #ffffff !important;
  background-size: 44px 44px !important;
}

html body #app .home-plate:not(.home-plate--hero),
html body #app section {
  background: #f6f7f9 !important;
  background-image: none !important;
}

html body #app section:nth-of-type(even) {
  background: transparent !important;
  background-image: none !important;
}

html body #app .legal-page section,
html body #app .legal-page section:nth-of-type(even) {
  background: transparent !important;
  background-image: none !important;
}

html body .site-header__capsule,
html body .site-header.is-scrolled .site-header__capsule,
html body #app .app-header,
html body #app .membership-site-header {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(37, 40, 46, 0.1) !important;
  box-shadow: 0 10px 28px rgba(31, 35, 41, 0.09) !important;
  backdrop-filter: blur(16px) !important;
}

html body .site-header .brand-logo,
html body #app .brand-logo,
html body .footer-logo {
  filter: grayscale(1) brightness(0.36) contrast(1.15) !important;
}

html body .site-header .site-nav__dock-btn,
html body .site-header .site-nav__item,
html body .site-header .site-nav__item-label,
html body .site-header .site-nav__icon-btn,
html body .site-header .nav-link-btn,
html body .site-header .mobile-menu-toggle {
  color: #454a52 !important;
}

html body .site-header .site-nav__dock-btn.active,
html body .site-header .site-nav__item.active,
html body .site-header .site-nav__item.active .site-nav__item-label {
  background: #fff0e7 !important;
  border-color: rgba(255, 107, 26, 0.2) !important;
  color: #ff6b1a !important;
}

html body #app :where(.app-card, .rank-unit, .rank-feature, .membership-card,
  .home-local-card, .home-feature-item, .home-highlight-item, .home-pillar-item,
  .home-preview, .public-user-card, .user-menu-card, .console-nav-card,
  .app-panel, .side-overview, .el-card, [class$="-card"], [class$="__card"],
  [class$="-panel"], [class$="__panel"]) {
  background: #ffffff !important;
  background-image: none !important;
  border-color: #e2e5e9 !important;
  box-shadow: 0 12px 30px rgba(28, 32, 38, 0.08) !important;
  color: #25282e !important;
}

html body #app :where(h1, h2, h3, h4, h5, h6, strong,
  [class*="title"], [class*="headline"], [class*="heading"]) {
  color: #25282e !important;
  -webkit-text-fill-color: #25282e !important;
  text-shadow: none !important;
}

html body #app :where(p, small, label, [class*="subtitle"], [class*="desc"],
  [class*="meta"], [class*="hint"], [class*="lead"]) {
  color: #69707a !important;
  -webkit-text-fill-color: #69707a !important;
  text-shadow: none !important;
}

html body #app .coming-soon-page__feature:first-child h2,
html body #app .coming-soon-page__feature--primary h2 {
  color: #25282e !important;
  -webkit-text-fill-color: #25282e !important;
}

html body #app .coming-soon-page__feature:first-child p,
html body #app .coming-soon-page__feature--primary p,
html body #app .coming-soon-page__feature--primary [class*="desc"] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html body #app :where(input, textarea, select, .el-input__wrapper,
  .el-textarea__inner, .el-select__wrapper, .search-box, .search-wrap) {
  background: #ffffff !important;
  border-color: #d9dde3 !important;
  box-shadow: 0 0 0 1px #d9dde3 inset !important;
  color: #25282e !important;
}

html body #app :where(input, textarea, select, .el-input__wrapper,
  .el-textarea__inner, .el-select__wrapper):focus,
html body #app :where(.el-input__wrapper, .el-select__wrapper).is-focus {
  border-color: #ff6b1a !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 26, 0.13) !important;
}

html body :where(.nav-store-btn, .nav-cta-btn, .login-submit, .auth-submit),
html body #app :where(.el-button--primary, .home-btn--primary,
  .membership-card__button, .membership-nav-store-btn, .publish-btn,
  .page-btn--primary, [class*="primary-btn"], [class*="submit-btn"],
  [class*="cta-btn"]) {
  background: linear-gradient(135deg, #ff7a2c, #ff5d0a) !important;
  background-color: #ffbd86 !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 9px 22px rgba(255, 107, 26, 0.22) !important;
}

html body :where(.nav-store-btn, .nav-cta-btn, .login-submit, .auth-submit) *,
html body #app :where(.el-button--primary, .home-btn--primary,
  .membership-card__button, .publish-btn, [class*="primary-btn"],
  [class*="submit-btn"], [class*="cta-btn"]) * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body #app :where(.cat-pill.active, .sort-chip.active,
  .billing-switch__indicator, .el-tabs__active-bar,
  .el-switch.is-checked .el-switch__core) {
  background: #ffbd86 !important;
  border-color: #ff6b1a !important;
  color: #fff !important;
}

/* Login and overlays */
html body .el-overlay,
html body .el-overlay-dialog {
  background: rgba(37, 40, 46, 0.46) !important;
  backdrop-filter: blur(5px) !important;
}

html body .el-overlay .el-dialog,
html body .el-message-box,
html body .login-dialog,
html body .auth-dialog {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #e1e4e8 !important;
  color: #25282e !important;
  box-shadow: 0 24px 70px rgba(25, 29, 35, 0.22) !important;
}

html body .el-overlay .el-dialog .login-submit,
html body .el-dialog .login-submit {
  background: linear-gradient(135deg, #ff7a2c, #ff5d0a) !important;
  color: #fff !important;
}

/* Homepage store callout */
html body #app .home-page .home-scenario-store-cta {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #dfe3e8 !important;
  box-shadow: 0 14px 34px rgba(31, 35, 41, 0.09) !important;
}

html body #app .home-page .home-scenario-store-cta__button,
html body #app .home-page .home-scenario-store-cta__icon {
  background: #ffbd86 !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Mall: white content, graphite information bands, orange action. */
html body #app .inspiration-mall .mall-community-entry {
  background: #2b3037 !important;
  background-image: none !important;
  border-color: #2b3037 !important;
  box-shadow: 0 12px 28px rgba(25, 29, 35, 0.14) !important;
}

html body #app .inspiration-mall .mall-community-entry *,
html body #app .inspiration-mall .mall-community-entry__body {
  color: #f6f7f9 !important;
  -webkit-text-fill-color: #f6f7f9 !important;
}

html body #app .inspiration-mall .mall-community-entry__action,
html body #app .inspiration-mall .mall-community-entry__arrow {
  color: #ff7a2c !important;
  -webkit-text-fill-color: #ff7a2c !important;
}

html body #app .inspiration-mall .mall-community-entry__icon,
html body #app .inspiration-mall .zone-banner__icon {
  background: #ffbd86 !important;
  color: #fff !important;
}

html body #app .inspiration-mall .zone-banner,
html body #app .mall-community,
html body #app .mall-community-wrap {
  background: #f0f2f5 !important;
  background-image: none !important;
  border-color: #dfe3e8 !important;
  box-shadow: 0 10px 26px rgba(31, 35, 41, 0.07) !important;
}

html body #app .inspiration-mall :where(.rank-unit, .rank-unit__head,
  .rank-unit__body, .rank-list, .rank-row, .app-card, .rank-feature,
  .rank-feature__body) {
  background: #ffffff !important;
  background-image: none !important;
  border-color: #e1e4e8 !important;
  color: #30343a !important;
}

html body #app .inspiration-mall .rank-row:hover,
html body #app .inspiration-mall .rank-row.active {
  background: #fff0e7 !important;
}

html body #app .inspiration-mall :where(.rank-row__no, .rank-link,
  .mall-count, .rank-feature__no, .app-card__ai-badge) {
  color: #ff6b1a !important;
  -webkit-text-fill-color: #ff6b1a !important;
}

/* Footer carries the graphite share of the palette. */
html body .site-footer,
html body .site-footer::before,
html body .site-footer::after {
  background: #282d34 !important;
  background-image: none !important;
  border-color: #343a43 !important;
  box-shadow: none !important;
}

html body .site-footer .footer-logo {
  filter: brightness(0) invert(1) !important;
}

html body .site-footer .footer-col,
html body .site-footer .footer-col *,
html body .site-footer .footer-meta,
html body .site-footer .footer-meta *,
html body .site-footer button,
html body .site-footer a {
  color: #c9cdd3 !important;
  -webkit-text-fill-color: #c9cdd3 !important;
}

html body .site-footer .footer-col h4,
html body .site-footer .footer-contact-kicker {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body .site-footer a:hover,
html body .site-footer button:hover,
html body .site-footer .footer-meta__icp {
  color: #ff7a2c !important;
  -webkit-text-fill-color: #ff7a2c !important;
}

/* V8 ?header icon navigation states (产品介绍 / 使用教学). */
html body .site-header .site-nav__dock-btn.site-nav__icon-btn,
html body .site-header .site-nav__icon-btn {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid transparent !important;
  color: #4a5059 !important;
  box-shadow: none !important;
  filter: none !important;
}

html body .site-header .site-nav__icon-btn::before,
html body .site-header .site-nav__icon-btn::after {
  display: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .site-header .site-nav__icon-btn .material-symbols-outlined,
html body .site-header .site-nav__icon-btn svg,
html body .site-header .site-nav__icon-btn svg * {
  color: #4a5059 !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  filter: none !important;
  text-shadow: none !important;
}

html body .site-header .site-nav__icon-btn:hover,
html body .site-header .site-nav__icon-btn:focus-visible,
html body .site-header .site-nav__icon-btn.active,
html body .site-header .site-nav__icon-btn.is-active {
  background: #fff0e7 !important;
  background-image: none !important;
  border-color: rgba(255, 107, 26, 0.28) !important;
  color: #ff6b1a !important;
  box-shadow: none !important;
  outline: none !important;
}

html body .site-header .site-nav__icon-btn:hover .material-symbols-outlined,
html body .site-header .site-nav__icon-btn:focus-visible .material-symbols-outlined,
html body .site-header .site-nav__icon-btn.active .material-symbols-outlined,
html body .site-header .site-nav__icon-btn.is-active .material-symbols-outlined,
html body .site-header .site-nav__icon-btn:hover svg,
html body .site-header .site-nav__icon-btn.active svg,
html body .site-header .site-nav__icon-btn.is-active svg {
  color: #ff6b1a !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  filter: none !important;
}

html body .site-header .site-nav__icon-label {
  background: #2b3037 !important;
  background-image: none !important;
  border: 0 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(28, 32, 38, 0.16) !important;
  text-shadow: none !important;
}

html body .site-header .site-nav__icon-label::before,
html body .site-header .site-nav__icon-label::after {
  border-color: #2b3037 transparent transparent transparent !important;
  box-shadow: none !important;
}

/* V9 ?beat the production bundle's highly specific button rules. */
html body .el-overlay .el-dialog .el-button.el-button--primary.login-submit:not(.is-link):not(.is-text):not(.is-plain),
html body .el-dialog .el-button.el-button--primary.login-submit:not(.is-link):not(.is-text):not(.is-plain),
html body .el-button.el-button--primary.login-submit:not(.is-link):not(.is-text):not(.is-plain) {
  background: linear-gradient(135deg, #ff7a2c, #ff5d0a) !important;
  background-color: #ffbd86 !important;
  background-image: linear-gradient(135deg, #ff7a2c, #ff5d0a) !important;
  border: 1px solid #ff6b1a !important;
  color: #ffffff !important;
  box-shadow: 0 9px 22px rgba(255, 107, 26, 0.22) !important;
  filter: none !important;
}

html body .el-overlay .el-dialog .el-button.el-button--primary.login-submit:not(.is-link):not(.is-text):not(.is-plain):hover,
html body .el-overlay .el-dialog .el-button.el-button--primary.login-submit:not(.is-link):not(.is-text):not(.is-plain):focus,
html body .el-button.el-button--primary.login-submit:not(.is-link):not(.is-text):not(.is-plain):hover,
html body .el-button.el-button--primary.login-submit:not(.is-link):not(.is-text):not(.is-plain):focus {
  background: #e95308 !important;
  background-color: #e95308 !important;
  background-image: none !important;
  border-color: #e95308 !important;
  color: #ffffff !important;
  box-shadow: 0 11px 26px rgba(233, 83, 8, 0.25) !important;
  transform: translateY(-1px) !important;
}

html body .el-dialog .el-button.el-button--primary.login-submit *,
html body .el-button.el-button--primary.login-submit * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body .site-header .site-nav button.site-nav__item,
html body .site-header .site-nav button.site-nav__dock-btn.site-nav__item {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid transparent !important;
  color: #454a52 !important;
  box-shadow: none !important;
  filter: none !important;
}

html body .site-header .site-nav button.site-nav__item:hover,
html body .site-header .site-nav button.site-nav__item:focus-visible,
html body .site-header .site-nav button.site-nav__dock-btn.site-nav__item:hover,
html body .site-header .site-nav button.site-nav__dock-btn.site-nav__item:focus-visible {
  background: #fff0e7 !important;
  background-image: none !important;
  border-color: rgba(255, 107, 26, 0.22) !important;
  color: #ff6b1a !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
  transform: none !important;
}

html body .site-header .site-nav button.site-nav__item.active,
html body .site-header .site-nav button.site-nav__item.is-active,
html body .site-header .site-nav button.site-nav__dock-btn.site-nav__item.active,
html body .site-header .site-nav button.site-nav__dock-btn.site-nav__item.is-active {
  background: #fff0e7 !important;
  background-image: none !important;
  border-color: rgba(255, 107, 26, 0.24) !important;
  color: #ff6b1a !important;
  box-shadow: inset 0 -2px 0 #ff6b1a !important;
}

html body .site-header .site-nav button.site-nav__item:hover .site-nav__item-label,
html body .site-header .site-nav button.site-nav__item:focus-visible .site-nav__item-label,
html body .site-header .site-nav button.site-nav__item.active .site-nav__item-label,
html body .site-header .site-nav button.site-nav__item.is-active .site-nav__item-label {
  color: #ff6b1a !important;
  -webkit-text-fill-color: #ff6b1a !important;
  text-shadow: none !important;
}

/* V10 ?remove the homepage creative-work showcase as requested. */
/* V11 ?light homepage download CTA and compact light footer. */
html body #app .home-page .home-plate.home-plate--cta,
html body #app .home-page .home-plate--cta {
  background: #f5f6f8 !important;
  background-image: none !important;
  margin-top: 48px !important;
  padding: 10px !important;
}

html body #app .home-page .home-plate--cta .home-cta__panel {
  min-height: clamp(440px, 64vh, 620px) !important;
  background: linear-gradient(135deg, #ffffff 0%, #f7f8fa 58%, #fff4eb 100%) !important;
  border: 1px solid rgba(255, 107, 26, 0.24) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 64px rgba(37, 42, 49, 0.1) !important;
  transform: none !important;
}

html body #app .home-page .home-plate--cta .home-cta__panel::before,
html body #app .home-page .home-plate--cta .home-cta__panel::after,
html body #app .home-page .home-plate--cta .home-cta-pixel-grid,
html body #app .home-page .home-plate--cta canvas,
html body #app .home-page .home-plate--cta .home-cta-download__glow {
  display: none !important;
  content: none !important;
  animation: none !important;
}

html body #app .home-page .home-plate--cta .home-cta__content {
  gap: 26px !important;
  padding: clamp(52px, 7vh, 76px) 28px !important;
}

html body #app .home-page .home-plate--cta .home-cta__panel h2 {
  color: #252a31 !important;
  -webkit-text-fill-color: #252a31 !important;
  text-shadow: none !important;
}

html body #app .home-page .home-plate--cta .home-cta__panel p {
  color: #6c737d !important;
  -webkit-text-fill-color: #6c737d !important;
  text-shadow: none !important;
}

html body #app .home-page .home-plate--cta .home-cta-download__btn {
  color: #ff6b1a !important;
  width: min(100%, 360px) !important;
  min-height: 88px !important;
  border-radius: 14px !important;
  transform: none !important;
}

html body #app .home-page .home-plate--cta .home-cta-download__surface {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid rgba(255, 107, 26, 0.34) !important;
  box-shadow: 0 12px 30px rgba(37, 42, 49, 0.1) !important;
}

html body #app .home-page .home-plate--cta .home-cta-download__label-core,
html body #app .home-page .home-plate--cta .home-cta-download__icon {
  color: #ff6b1a !important;
  -webkit-text-fill-color: #ff6b1a !important;
  opacity: 1 !important;
  animation: none !important;
  text-shadow: none !important;
}

html body #app .home-page .home-plate--cta .home-cta-download__btn:hover .home-cta-download__surface,
html body #app .home-page .home-plate--cta .home-cta-download__btn:focus-visible .home-cta-download__surface {
  background: #ffbd86 !important;
  border-color: #ff6b1a !important;
  box-shadow: none !important;
}

html body #app .home-page .home-plate--cta .home-cta-download__btn:hover .home-cta-download__label-core,
html body #app .home-page .home-plate--cta .home-cta-download__btn:hover .home-cta-download__icon,
html body #app .home-page .home-plate--cta .home-cta-download__btn:focus-visible .home-cta-download__label-core,
html body #app .home-page .home-plate--cta .home-cta-download__btn:focus-visible .home-cta-download__icon {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  transform: none !important;
}

html body #app .site-footer,
html body #app footer.site-footer {
  min-height: 0 !important;
  margin-top: clamp(120px, 16vh, 180px) !important;
  padding: clamp(64px, 8vh, 96px) 0 clamp(160px, 18vh, 220px) !important;
  background: #24272d !important;
  background-color: #24272d !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

html body #app .site-footer::before,
html body #app .site-footer::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  background-image: none !important;
}

html body #app .site-footer .footer-divider,
html body #app .site-footer .footer-divider::after {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  animation: none !important;
  content: none !important;
}

html body #app .site-footer .footer-logo {
  filter: grayscale(1) brightness(0.38) contrast(1.08) !important;
}

html body #app .site-footer .footer-col,
html body #app .site-footer .footer-col *,
html body #app .site-footer .footer-meta,
html body #app .site-footer .footer-meta *,
html body #app .site-footer button,
html body #app .site-footer a {
  color: #686f78 !important;
  -webkit-text-fill-color: #686f78 !important;
  text-shadow: none !important;
}

html body #app .site-footer .footer-col h4,
html body #app .site-footer .footer-contact-kicker {
  color: #252a31 !important;
  -webkit-text-fill-color: #252a31 !important;
}

html body #app .site-footer a:hover,
html body #app .site-footer button:hover,
html body #app .site-footer .footer-meta__icp {
  color: #ff6b1a !important;
  -webkit-text-fill-color: #ff6b1a !important;
}

/* V12 ?unify the remaining homepage cyan details with the orange theme. */
html body #app .home-page {
  --home-cyan: #ff6b1a !important;
  --home-ice: #ff8a45 !important;
  --home-blue: #f59e0b !important;
  --home-copy-muted: #6c737d !important;
}

html body #app .home-page .home-store__btn {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #ffbd86 !important;
  background-image: none !important;
  border-color: #ff6b1a !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  transform: none !important;
}

html body #app .home-page .home-store__btn:hover,
html body #app .home-page .home-store__btn:focus-visible {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #e85d10 !important;
  border-color: #e85d10 !important;
  box-shadow: none !important;
  transform: translateY(-2px) !important;
}

html body #app .home-page .home-steps__row::before {
  opacity: 1 !important;
  background: linear-gradient(90deg, transparent, rgba(255, 107, 26, 0.32), transparent) !important;
  box-shadow: none !important;
  animation: none !important;
}

html body #app .home-page .home-step {
  border-top-color: #dfe3e8 !important;
  filter: none !important;
}

html body #app .home-page .home-step::before {
  background: #ffbd86 !important;
  box-shadow: 0 0 0 5px rgba(255, 107, 26, 0.1) !important;
  transform: scale(0.84) !important;
}

html body #app .home-page .home-step:hover {
  border-top-color: rgba(255, 107, 26, 0.55) !important;
  filter: none !important;
  transform: translateY(-2px) !important;
}

html body #app .home-page .home-step:hover::before {
  background: #ffbd86 !important;
  box-shadow: 0 0 0 7px rgba(255, 107, 26, 0.12) !important;
  transform: scale(1) !important;
}

html body #app .home-page .home-step__num,
html body #app .home-page .home-step:hover .home-step__num {
  color: #ff6b1a !important;
  -webkit-text-fill-color: #ff6b1a !important;
  text-shadow: none !important;
}

html body #app .home-page .home-step h3 {
  color: #252a31 !important;
  -webkit-text-fill-color: #252a31 !important;
  text-shadow: none !important;
}

html body #app .home-page .home-step p {
  color: #6c737d !important;
  -webkit-text-fill-color: #6c737d !important;
}

html body #app .home-page .home-highlights__grid {
  background: linear-gradient(135deg, #ffffff 0%, #f7f8fa 58%, #fff4eb 100%) !important;
  border: 1px solid rgba(255, 107, 26, 0.2) !important;
  border-radius: 16px !important;
  gap: clamp(16px, 2.2vw, 24px) !important;
  padding: clamp(24px, 3vw, 34px) !important;
  box-shadow: 0 18px 46px rgba(37, 42, 49, 0.07) !important;
}

html body #app .home-page .home-showcase__highlights .home-highlights__grid {
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body #app .home-page .home-highlights__grid::before {
  display: none !important;
  content: none !important;
  background: transparent !important;
  animation: none !important;
}

html body #app .home-page .home-highlight-item {
  gap: 9px !important;
  padding: clamp(22px, 2.4vw, 30px) clamp(14px, 1.8vw, 22px) !important;
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #e3e6ea !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 28px rgba(37, 42, 49, 0.07) !important;
  overflow: hidden !important;
}

html body #app .home-page .home-highlight-item::before,
html body #app .home-page .home-highlight-item::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  animation: none !important;
}

html body #app .home-page .home-highlight-item:hover {
  border-color: rgba(255, 107, 26, 0.46) !important;
  box-shadow: 0 14px 34px rgba(255, 107, 26, 0.12) !important;
  transform: translateY(-3px) !important;
}

html body #app .home-page .home-highlight-item__tag {
  color: #ff6b1a !important;
  -webkit-text-fill-color: #ff6b1a !important;
  text-shadow: none !important;
}

html body #app .home-page .home-highlight-item__headline,
html body #app .home-page .home-highlight-item:hover .home-highlight-item__headline {
  color: #252a31 !important;
  -webkit-text-fill-color: #252a31 !important;
  text-shadow: none !important;
}

html body #app .home-page .home-highlight-item__desc {
  color: #6c737d !important;
  -webkit-text-fill-color: #6c737d !important;
  text-shadow: none !important;
}

/* V13 ?restore store media and remove cyan/blue console remnants. */
html body #app .inspiration-mall .app-card__preview[style*="url("],
html body #app .inspiration-mall .rank-feature__preview-layer[style*="url("] {
  background-color: #f1f3f6 !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

html body #app .app-home .back-link,
html body #app .app-home .hero-action--primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #ffbd86 !important;
  background-image: none !important;
  border-color: #ff6b1a !important;
  box-shadow: 0 10px 24px rgba(255, 107, 26, 0.2) !important;
  text-shadow: none !important;
}

html body #app .app-home .back-link:hover,
html body #app .app-home .back-link:focus-visible,
html body #app .app-home .hero-action--primary:hover,
html body #app .app-home .hero-action--primary:focus-visible {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #e85d10 !important;
  border-color: #e85d10 !important;
  box-shadow: 0 12px 28px rgba(255, 107, 26, 0.26) !important;
}

html body #app .app-home .score-num,
html body #app .app-home .badge-author {
  color: #ff6b1a !important;
  -webkit-text-fill-color: #ff6b1a !important;
}

html body #app .app-home .review-overview {
  background: #fff5ee !important;
  background-image: none !important;
}

html body #app .app-home .bar-fill {
  background: #ffbd86 !important;
  background-image: none !important;
}

html body #app .app-home .review-avatar,
html body #app .app-home .reply-avatar,
html body #app .app-home .badge-author {
  background: #fff1e8 !important;
  background-image: none !important;
  border-color: rgba(255, 107, 26, 0.34) !important;
}

html body #app .app-shell::before {
  display: none !important;
  content: none !important;
  background: transparent !important;
  background-image: none !important;
}

html body #app .app-shell .app-aside {
  background: linear-gradient(180deg, #ffffff 0%, #fff8f1 100%) !important;
  background-image: linear-gradient(180deg, #ffffff 0%, #fff8f1 100%) !important;
  border-right: 1px solid #dde1e6 !important;
  box-shadow: 12px 0 34px rgba(31, 35, 41, 0.06) !important;
}

html body #app .app-shell .app-aside::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
}

html body #app .app-shell .brand-sub {
  color: #6c737d !important;
  -webkit-text-fill-color: #6c737d !important;
  background: #ffffff !important;
  background-image: none !important;
  border-color: #e1e4e8 !important;
}

html body #app .app-shell .brand-sub--large span:not(.nexus-live-dot),
html body #app .app-shell .title-kicker {
  color: #ff6b1a !important;
  -webkit-text-fill-color: #ff6b1a !important;
}

html body #app .app-shell .console-nav-card {
  color: #30343a !important;
  -webkit-text-fill-color: #30343a !important;
  background: #ffffff !important;
  background-image: none !important;
  border-color: #e1e4e8 !important;
  box-shadow: 0 8px 22px rgba(31, 35, 41, 0.05) !important;
  animation: none !important;
}

html body #app .app-shell .console-nav-card::after {
  display: none !important;
  content: none !important;
  animation: none !important;
}

html body #app .app-shell .console-nav-card::before {
  background: #ffbd86 !important;
  box-shadow: none !important;
}

html body #app .app-shell .console-nav-card:hover,
html body #app .app-shell .console-nav-card.is-primary-entry:hover,
html body #app .app-shell .console-nav-card.is-active,
html body #app .app-shell .console-nav-card.is-primary-entry,
html body #app .app-shell .console-nav-card.is-primary-entry.is-active {
  color: #252a31 !important;
  -webkit-text-fill-color: #252a31 !important;
  background: #fff3eb !important;
  background-image: none !important;
  border-color: rgba(255, 107, 26, 0.42) !important;
  box-shadow: 0 10px 24px rgba(255, 107, 26, 0.1) !important;
  animation: none !important;
}

html body #app .app-shell .console-nav-card__icon,
html body #app .app-shell .console-nav-card.is-primary-entry .console-nav-card__icon,
html body #app .app-shell .console-nav-card.is-primary-entry.is-active .console-nav-card__icon {
  color: #ff6b1a !important;
  -webkit-text-fill-color: #ff6b1a !important;
  background: #fff0e6 !important;
  background-image: none !important;
  border-color: rgba(255, 107, 26, 0.3) !important;
  box-shadow: none !important;
}

html body #app .app-shell .console-nav-card__arrow,
html body #app .app-shell .console-nav-card.is-primary-entry .console-nav-card__arrow,
html body #app .app-shell .operator-row__chevron {
  color: #ff6b1a !important;
  -webkit-text-fill-color: #ff6b1a !important;
}

html body #app .app-shell .operator-row--button,
html body #app .app-shell .operator-row--button:hover,
html body #app .app-shell .operator-row--button:focus-visible {
  background: #ffffff !important;
  background-image: none !important;
  border-color: #e1e4e8 !important;
  box-shadow: 0 8px 20px rgba(31, 35, 41, 0.06) !important;
  transform: none !important;
}

html body #app .app-shell .avatar,
html body .user-menu-card__avatar {
  background: #fff0e6 !important;
  background-image: none !important;
  border-color: rgba(255, 107, 26, 0.3) !important;
}

html body #app .app-shell .page-hero,
html body #app .app-shell .account-hero.page-hero,
html body #app .app-shell .console-context-panel,
html body #app .app-shell .console-workbench-head {
  background: #ffffff !important;
  background-image: none !important;
  border-color: #dfe3e8 !important;
  box-shadow: 0 12px 32px rgba(31, 35, 41, 0.07) !important;
}

html body #app .app-shell .page-hero::before,
html body #app .app-shell .page-hero::after,
html body #app .app-shell .account-hero.page-hero::before,
html body #app .app-shell .account-hero.page-hero::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  background-image: none !important;
  animation: none !important;
}

html body #app .app-shell .account-hero__icon,
html body #app .app-shell .console-context-nav__item .material-symbols-outlined {
  color: #ff6b1a !important;
  -webkit-text-fill-color: #ff6b1a !important;
  background: #fff0e6 !important;
  background-image: none !important;
  border-color: rgba(255, 107, 26, 0.28) !important;
  box-shadow: none !important;
}

html body #app .app-shell .account-hero__eyebrow,
html body #app .app-shell .console-context-panel__eyebrow,
html body #app .app-shell .history-collapse-title .material-symbols-outlined {
  color: #ff6b1a !important;
  -webkit-text-fill-color: #ff6b1a !important;
}

html body #app .app-shell .console-context-nav__item {
  color: #4f5660 !important;
  -webkit-text-fill-color: #4f5660 !important;
  background: #f7f8fa !important;
  background-image: none !important;
  border-color: #e1e4e8 !important;
}

html body #app .app-shell .console-context-nav__item:hover,
html body #app .app-shell .console-context-nav__item.is-active {
  color: #252a31 !important;
  -webkit-text-fill-color: #252a31 !important;
  background: #fff3eb !important;
  background-image: none !important;
  border-color: rgba(255, 107, 26, 0.4) !important;
}

html body #app .app-shell .empty-block {
  color: #6c737d !important;
  -webkit-text-fill-color: #6c737d !important;
  background: #f7f8fa !important;
  background-image: none !important;
  border-color: #dfe3e8 !important;
}

html body #app .app-shell .empty-block .material-symbols-outlined {
  color: #ff6b1a !important;
  -webkit-text-fill-color: #ff6b1a !important;
  opacity: 0.62 !important;
}

html body .user-account-dropdown {
  background: #ffffff !important;
  background-image: none !important;
  border-color: #dfe3e8 !important;
  box-shadow: 0 18px 46px rgba(31, 35, 41, 0.14) !important;
}

html body .user-account-dropdown .el-dropdown-menu__item:not(.is-disabled):hover,
html body .user-account-dropdown .el-dropdown-menu__item:not(.is-disabled):focus {
  color: #252a31 !important;
  -webkit-text-fill-color: #252a31 !important;
  background: #fff3eb !important;
}

/* V14 ?console readability and remaining light-theme contrast fixes. */
html body #app .app-shell {
  --nexus-canvas: #f6f7f9 !important;
  --nexus-surface: #ffffff !important;
  --nexus-card: #ffffff !important;
  --nexus-card-glass: rgba(255, 255, 255, 0.96) !important;
  --nexus-border: #dfe3e8 !important;
  --nexus-border-soft: #e6e9ed !important;
  --nexus-border-hover: rgba(255, 107, 26, 0.48) !important;
  --nexus-text: #252a31 !important;
  --nexus-soft: #4f5660 !important;
  --nexus-muted: #6c737d !important;
  --nexus-faint: #8b929c !important;
  --nexus-copy-muted: #6c737d !important;
  --nexus-primary: #ff6b1a !important;
  --nexus-blue: #ff6b1a !important;
  --nexus-cyan: #ff6b1a !important;
  --nexus-ice: #252a31 !important;
  --nexus-grad-text: #252a31 !important;
  --nexus-input-bg: #ffffff !important;
  --nexus-input-bg-hover: #ffffff !important;
  --nexus-card-border: #dfe3e8 !important;
  --nexus-card-border-hover: rgba(255, 107, 26, 0.48) !important;
  --nexus-shadow-sm: 0 8px 24px rgba(31, 35, 41, 0.06) !important;
  --nexus-shadow: 0 18px 48px rgba(31, 35, 41, 0.12) !important;
  --nexus-shadow-glow: 0 12px 28px rgba(255, 107, 26, 0.12) !important;
  --console-surface: #ffffff !important;
  --console-surface-strong: #f7f8fa !important;
  --console-surface-muted: #f3f4f6 !important;
  --console-border: #dfe3e8 !important;
  --console-border-strong: rgba(255, 107, 26, 0.5) !important;
  --console-border-muted: #e8eaed !important;
  --console-accent-soft: #fff0e7 !important;
  --console-accent-line: rgba(255, 107, 26, 0.48) !important;
  --console-shadow-panel: 0 12px 32px rgba(31, 35, 41, 0.07) !important;
  --el-color-primary: #ff6b1a !important;
  --el-color-primary-light-3: #ff9257 !important;
  --el-color-primary-light-5: #ffb184 !important;
  --el-color-primary-light-7: #ffd2b8 !important;
  --el-color-primary-light-8: #ffe2d1 !important;
  --el-color-primary-light-9: #fff1e8 !important;
  --el-color-primary-dark-2: #d95000 !important;
  --el-text-color-primary: #252a31 !important;
  --el-text-color-regular: #4f5660 !important;
  --el-text-color-secondary: #6c737d !important;
  --el-text-color-placeholder: #8b929c !important;
  --el-text-color-disabled: #949ba5 !important;
  --el-disabled-text-color: #949ba5 !important;
  --el-disabled-bg-color: #f1f3f5 !important;
  --el-disabled-border-color: #dfe3e8 !important;
  --el-fill-color-blank: #ffffff !important;
}

html body #app .app-shell :where(.module-card.el-card, .console-card.el-card,
  .console-panel, .panel-block, .table-scroll, .pricing-card, .usage-item,
  .balance-tx-toolbar, .page-toolbar, .usage-toolbar, .filter-row) {
  color: #252a31 !important;
  -webkit-text-fill-color: #252a31 !important;
  background: #ffffff !important;
  background-image: none !important;
  border-color: #dfe3e8 !important;
  box-shadow: 0 10px 28px rgba(31, 35, 41, 0.06) !important;
}

html body #app .app-shell .console-metric-card,
html body #app .app-shell .balance-metric,
html body #app .app-shell .metric-card,
html body #app .app-shell .stat-card {
  color: #252a31 !important;
  -webkit-text-fill-color: #252a31 !important;
  background: #ffffff !important;
  background-image: none !important;
  border-color: #dfe3e8 !important;
  box-shadow: 0 10px 28px rgba(31, 35, 41, 0.06) !important;
}

html body #app .app-shell .console-metric-card--primary,
html body #app .app-shell .balance-metric--primary {
  background: linear-gradient(135deg, #fff3eb 0%, #ffffff 72%) !important;
  border-color: rgba(255, 107, 26, 0.34) !important;
}

html body #app .app-shell .console-metric-card::after,
html body #app .app-shell .balance-metric::after,
html body #app .app-shell .metric-card::after,
html body #app .app-shell .stat-card::after {
  opacity: 0.5 !important;
  background: radial-gradient(circle, rgba(255, 107, 26, 0.14), transparent 68%) !important;
  animation: none !important;
}

html body #app .app-shell :where(.console-metric-card__top, .console-metric-card p,
  .balance-metric__label, .metric-card span, .usage-item span, .usage-item small,
  .pricing-card__lbl, .pricing-foot, .pricing-subtitle, .text-aux,
  .balance-tx-toolbar__limit span) {
  color: #66707b !important;
  -webkit-text-fill-color: #66707b !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html body #app .app-shell :where(.console-metric-card strong,
  .balance-metric__value, .metric-card strong, .usage-item strong,
  .pricing-card__name, .pricing-card__num) {
  color: #252a31 !important;
  -webkit-text-fill-color: #252a31 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

html body #app .app-shell .pill-tabs,
html body #app .app-shell .account-subnav.pill-tabs {
  background: #f1f3f5 !important;
  background-image: none !important;
  border-color: #d7dce2 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

html body #app .app-shell .pill-tabs__item,
html body #app .app-shell .account-subnav .pill-tabs__item {
  color: #59616b !important;
  -webkit-text-fill-color: #59616b !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html body #app .app-shell .pill-tabs__item:hover,
html body #app .app-shell .account-subnav .pill-tabs__item:hover {
  color: #d95000 !important;
  -webkit-text-fill-color: #d95000 !important;
  background: #fff3eb !important;
  border-color: rgba(255, 107, 26, 0.26) !important;
}

html body #app .app-shell .pill-tabs__item.is-active,
html body #app .app-shell .account-subnav .pill-tabs__item.is-active {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #ffbd86 !important;
  border-color: #ff6b1a !important;
  box-shadow: 0 6px 18px rgba(255, 107, 26, 0.2) !important;
}

html body #app .app-shell :where(.el-input__wrapper, .el-select__wrapper,
  .el-textarea__inner, .el-date-editor, .el-input-number) {
  color: #252a31 !important;
  -webkit-text-fill-color: #252a31 !important;
  background: #ffffff !important;
  background-image: none !important;
  border-color: #cfd5dc !important;
  box-shadow: 0 0 0 1px #cfd5dc inset !important;
}

html body #app .app-shell :where(.el-input__inner, .el-textarea__inner,
  .el-range-input, .el-select__selected-item) {
  color: #252a31 !important;
  -webkit-text-fill-color: #252a31 !important;
  opacity: 1 !important;
}

html body #app .app-shell :where(.el-input__inner, .el-textarea__inner,
  .el-range-input)::placeholder {
  color: #8b929c !important;
  -webkit-text-fill-color: #8b929c !important;
  opacity: 1 !important;
}

html body #app .app-shell .el-button.is-disabled,
html body #app .app-shell .el-button.is-disabled:hover,
html body #app .app-shell .el-button.is-disabled:focus {
  color: #8a929c !important;
  -webkit-text-fill-color: #8a929c !important;
  background: #f1f3f5 !important;
  border-color: #d9dde3 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

html body #app .app-shell .el-button.is-link:not(.is-disabled) {
  color: #d95000 !important;
  -webkit-text-fill-color: #d95000 !important;
}

html body #app .app-shell .el-button--danger.is-link:not(.is-disabled) {
  color: #c9362b !important;
  -webkit-text-fill-color: #c9362b !important;
}

html body #app .app-shell .el-tag {
  color: #d95000 !important;
  -webkit-text-fill-color: #d95000 !important;
  background: #fff1e8 !important;
  background-image: none !important;
  border-color: #ffc19d !important;
  opacity: 1 !important;
}

html body #app .app-shell .el-alert--info,
html body #app .app-shell .account-inline-alert {
  color: #4f5660 !important;
  -webkit-text-fill-color: #4f5660 !important;
  background: #fff6f0 !important;
  background-image: none !important;
  border: 1px solid #ffd0b5 !important;
}

html body #app .app-shell .el-alert--info :where(.el-alert__title, .el-alert__description, .el-alert__icon) {
  color: #4f5660 !important;
  -webkit-text-fill-color: #4f5660 !important;
  opacity: 1 !important;
}

html body #app .app-shell .el-alert--info .el-alert__icon {
  color: #ff6b1a !important;
  -webkit-text-fill-color: #ff6b1a !important;
}

html body #app .app-shell .el-table,
html body #app .app-shell .el-table tr,
html body #app .app-shell .el-table td.el-table__cell {
  color: #30343a !important;
  -webkit-text-fill-color: #30343a !important;
  background: #ffffff !important;
}

html body #app .app-shell .el-table th.el-table__cell {
  color: #30343a !important;
  -webkit-text-fill-color: #30343a !important;
  background: #f3f4f6 !important;
}

html body #app .app-shell .el-table__row:hover > td.el-table__cell {
  background: #fff6f0 !important;
}

html body #app .app-shell :where(.el-table__empty-text, .empty-block, .empty-block p) {
  color: #66707b !important;
  -webkit-text-fill-color: #66707b !important;
  opacity: 1 !important;
}

html body #app .app-shell :where(.module-head h3, .module-head,
  .console-workbench-head h2, .console-context-panel h2, label) {
  color: #252a31 !important;
  -webkit-text-fill-color: #252a31 !important;
  opacity: 1 !important;
}

html body #app .app-shell .module-head__badge {
  color: #d95000 !important;
  -webkit-text-fill-color: #d95000 !important;
  background: #fff1e8 !important;
  border-color: #ffc19d !important;
}

html body #app .inspiration-mall .mall-community {
  color: #252a31 !important;
  -webkit-text-fill-color: #252a31 !important;
  background: linear-gradient(135deg, #ffffff 0%, #f6f7f9 58%, #fff3eb 100%) !important;
  border-color: rgba(255, 107, 26, 0.28) !important;
  box-shadow: 0 16px 42px rgba(31, 35, 41, 0.08) !important;
}

html body #app .inspiration-mall .mall-community::before,
html body #app .inspiration-mall .mall-community__halo {
  display: none !important;
  content: none !important;
  background: transparent !important;
  animation: none !important;
}

html body #app .inspiration-mall .mall-community h2 {
  color: #252a31 !important;
  -webkit-text-fill-color: #252a31 !important;
  text-shadow: none !important;
}

html body #app .inspiration-mall .mall-community p,
html body #app .inspiration-mall .mall-community__qr-card span {
  color: #66707b !important;
  -webkit-text-fill-color: #66707b !important;
}

html body #app .inspiration-mall .mall-community__eyebrow,
html body #app .inspiration-mall .mall-community__meta strong {
  color: #d95000 !important;
  -webkit-text-fill-color: #d95000 !important;
  background: #fff1e8 !important;
  background-image: none !important;
  border-color: #ffc19d !important;
  box-shadow: none !important;
}

html body #app .inspiration-mall .mall-community__meta span,
html body #app .inspiration-mall .mall-community__meta em {
  color: #4f5660 !important;
  -webkit-text-fill-color: #4f5660 !important;
  background: #ffffff !important;
  border-color: #dfe3e8 !important;
}

html body #app .inspiration-mall .mall-community__qr-card {
  background: #ffffff !important;
  background-image: none !important;
  border-color: rgba(255, 107, 26, 0.3) !important;
  box-shadow: 0 12px 30px rgba(31, 35, 41, 0.08) !important;
}

/* V15 ?membership plans: remove the remaining cyan/dull-gray palette. */
html body #app .membership-page {
  --nexus-primary: #ff6b1a !important;
  --nexus-blue: #ff6b1a !important;
  --nexus-cyan: #ff6b1a !important;
  --nexus-ice: #252a31 !important;
  --nexus-text: #252a31 !important;
  --nexus-soft: #4f5660 !important;
  --nexus-muted: #737b86 !important;
  --nexus-border-soft: #dfe3e8 !important;
  background: #f6f7f9 !important;
  background-image: none !important;
}

html body #app .membership-page::before,
html body #app .membership-hero__glow {
  display: none !important;
  background: none !important;
}

html body #app .membership-hero {
  color: #252a31 !important;
  background: #ffffff !important;
  background-image: none !important;
  border-color: #dfe3e8 !important;
  box-shadow: 0 16px 42px rgba(31, 35, 41, 0.09) !important;
}

html body #app .membership-hero__eyebrow,
html body #app .membership-hero__eyebrow .material-symbols-outlined {
  color: #d95000 !important;
  -webkit-text-fill-color: #d95000 !important;
}

html body #app .billing-switch {
  background: #f4f5f7 !important;
  background-image: none !important;
  border-color: #d9dde3 !important;
  box-shadow: inset 0 1px 2px rgba(31, 35, 41, 0.04) !important;
}

html body #app .billing-switch__indicator {
  background: #ffbd86 !important;
  background-image: none !important;
  border-color: #ff6b1a !important;
  box-shadow: 0 5px 14px rgba(255, 107, 26, 0.24) !important;
}

html body #app .billing-switch button {
  color: #343940 !important;
  -webkit-text-fill-color: #343940 !important;
}

html body #app .billing-switch button span {
  color: #7b838e !important;
  -webkit-text-fill-color: #7b838e !important;
}

html body #app .billing-switch button.is-active,
html body #app .billing-switch button.is-active strong,
html body #app .billing-switch button.is-active span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body #app .membership-stats__item {
  color: #252a31 !important;
  background: #ffffff !important;
  background-image: none !important;
  border-color: #dfe3e8 !important;
  box-shadow: 0 5px 16px rgba(31, 35, 41, 0.05) !important;
}

html body #app .membership-stats__item:hover {
  background: #fff5ee !important;
  border-color: #ffb184 !important;
}

html body #app .membership-stats__item span {
  color: #737b86 !important;
  -webkit-text-fill-color: #737b86 !important;
}

html body #app .membership-stats__item strong {
  color: #252a31 !important;
  -webkit-text-fill-color: #252a31 !important;
}

html body #app .membership-card {
  --card-accent: transparent !important;
  --card-border: #dfe3e8 !important;
  --card-title: #252a31 !important;
  --card-price-color: #252a31 !important;
  --card-price-shadow: transparent !important;
  --card-symbol: #ff6b1a !important;
  --card-glow: rgba(255, 107, 26, 0.13) !important;
  --card-hover-glow: rgba(255, 107, 26, 0.16) !important;
  --card-tier-mark: #ff6b1a !important;
  --card-tier-mark-shadow: 0 0 12px rgba(255, 107, 26, 0.22) !important;
  --card-tier-lv-bg: #ff6b1a !important;
  --card-tier-lv-fg: #ffffff !important;
  --card-tier-lv-border: #ff6b1a !important;
  --card-badge-bg: #fff1e8 !important;
  --card-badge-fg: #d95000 !important;
  --card-badge-border: #ffc19d !important;
  --card-bonus-bg: #fff7f2 !important;
  --card-bonus-border: #ffd2b8 !important;
  --card-button-bg: #ff6b1a !important;
  --card-button-bg-hover: #e95b0b !important;
  --card-button-bg-active: #d95000 !important;
  --card-button-fg: #ffffff !important;
  --card-button-border: #ff6b1a !important;
  --card-button-shadow: 0 9px 22px rgba(255, 107, 26, 0.22) !important;
  --card-button-shadow-hover: 0 11px 26px rgba(255, 107, 26, 0.28) !important;
  color: #252a31 !important;
  background: #ffffff !important;
  background-image: none !important;
  border-color: #dfe3e8 !important;
  box-shadow: 0 14px 34px rgba(31, 35, 41, 0.08) !important;
}

html body #app .membership-card::before {
  display: none !important;
  background: none !important;
}

html body #app .membership-card.is-recommended {
  border-color: #ff9a61 !important;
  box-shadow: 0 0 0 1px rgba(255, 107, 26, 0.14),
    0 16px 38px rgba(31, 35, 41, 0.1) !important;
}

html body #app .membership-card.is-recommended:hover,
html body #app .membership-card:hover {
  border-color: #ff8b4a !important;
  box-shadow: 0 18px 42px rgba(31, 35, 41, 0.12) !important;
}

html body #app .membership-card__ribbon {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #ffbd86 !important;
  background-image: none !important;
  box-shadow: 0 7px 18px rgba(255, 107, 26, 0.22) !important;
}

html body #app .membership-card__tier-mark {
  background: #ffbd86 !important;
  box-shadow: 0 0 12px rgba(255, 107, 26, 0.2) !important;
}

html body #app .membership-card__tier-lv {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #ffbd86 !important;
  border-color: #ff6b1a !important;
}

html body #app .membership-card__tier-label,
html body #app .membership-card__price strong,
html body #app .membership-card__includes,
html body #app .membership-card__features {
  color: #343940 !important;
  -webkit-text-fill-color: #343940 !important;
  text-shadow: none !important;
}

html body #app .membership-card__tier-stars .material-symbols-outlined {
  color: #d7dce2 !important;
  text-shadow: none !important;
}

html body #app .membership-card__tier-stars .material-symbols-outlined.is-on,
html body #app .membership-card__features .material-symbols-outlined,
html body #app .membership-card__bonus .material-symbols-outlined {
  color: #ff6b1a !important;
  -webkit-text-fill-color: #ff6b1a !important;
  text-shadow: none !important;
}

html body #app .membership-card__badge {
  color: #d95000 !important;
  -webkit-text-fill-color: #d95000 !important;
  background: #fff1e8 !important;
  border-color: #ffc19d !important;
}

html body #app .membership-card__bonus {
  color: #343940 !important;
  background: #fff7f2 !important;
  background-image: none !important;
  border-color: #ffd2b8 !important;
}

html body #app .membership-card__button,
html body #app .membership-card.tier-basic .membership-card__button:not(:disabled),
html body #app .membership-card.tier-standard .membership-card__button:not(:disabled),
html body #app .membership-card.tier-premium .membership-card__button:not(:disabled) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: linear-gradient(135deg, #ff7a2c, #ff5d0a) !important;
  border-color: #ff6b1a !important;
  box-shadow: 0 9px 22px rgba(255, 107, 26, 0.22) !important;
  text-shadow: none !important;
}

html body #app .membership-card__button:not(:disabled):hover,
html body #app .membership-card__button:not(:disabled):focus-visible {
  background: linear-gradient(135deg, #ff6b1a, #e95000) !important;
  box-shadow: 0 11px 26px rgba(255, 107, 26, 0.28) !important;
}

/* V16 ?download and roadmap pages: complete the orange/white/graphite palette. */
html body #app .public-site .public-section-eyebrow,
html body #app .public-site .public-accent-text {
  color: var(--warm-orange, #ff6b1a) !important;
  -webkit-text-fill-color: var(--warm-orange, #ff6b1a) !important;
  text-shadow: none !important;
}

html body #app .public-site .download-page .public-page-hero {
  margin-top: clamp(126px, 15vh, 158px) !important;
  margin-bottom: clamp(58px, 7vw, 82px) !important;
}

html body #app .public-site .download-page .public-page-hero h1,
html body #app .public-site .download-page .public-page-hero h1 * {
  color: #20242b !important;
  -webkit-text-fill-color: #20242b !important;
  text-shadow: none !important;
}

html body #app .public-site .download-page .public-accent-text,
html body #app .public-site .download-page .public-section-eyebrow,
html body #app .public-site .download-page .install-section strong {
  color: var(--warm-orange, #ff6b1a) !important;
  -webkit-text-fill-color: var(--warm-orange, #ff6b1a) !important;
}

html body #app .public-site .download-page .public-page-hero h1 .public-accent-text {
  color: var(--warm-orange, #ff6b1a) !important;
  -webkit-text-fill-color: var(--warm-orange, #ff6b1a) !important;
}

html body #app .public-site .download-page .public-page-hero p,
html body #app .public-site .download-page .download-card__lead,
html body #app .public-site .download-page .panel-head__desc,
html body #app .public-site .download-page .download-card dd,
html body #app .public-site .download-page .public-benefit-card p,
html body #app .public-site .download-page .install-section p {
  color: #5f6875 !important;
  -webkit-text-fill-color: #5f6875 !important;
  opacity: 1 !important;
}

html body #app .public-site .download-card,
html body #app .public-site .download-panel,
html body #app .public-site .public-benefit-card,
html body #app .public-site .install-section article {
  color: #252a31 !important;
  background: #ffffff !important;
  background-image: none !important;
  border-color: #dfe3e8 !important;
  box-shadow: 0 12px 30px rgba(31, 35, 41, 0.07) !important;
}

html body #app .public-site .download-card {
  background: linear-gradient(135deg, #fff7f2 0%, #ffffff 72%) !important;
  border-color: rgba(255, 107, 26, 0.32) !important;
}

html body #app .public-site .download-card::before,
html body #app .public-site .download-panel::before,
html body #app .public-site .public-benefit-card::before,
html body #app .public-site .install-section article::before,
html body #app .download-card__constellation,
html body #app .download-card .random-constellation {
  display: none !important;
  content: none !important;
  background: none !important;
  animation: none !important;
}

html body #app .public-site .download-card:hover,
html body #app .public-site .download-panel:hover,
html body #app .public-site .public-benefit-card:hover,
html body #app .public-site .install-section article:hover {
  background: #fff8f3 !important;
  border-color: rgba(255, 107, 26, 0.42) !important;
  box-shadow: 0 15px 34px rgba(31, 35, 41, 0.09) !important;
  transform: none !important;
}

html body #app .public-site .panel-head > .material-symbols-outlined,
html body #app .public-site .public-benefit-card .material-symbols-outlined {
  color: var(--warm-orange, #ff6b1a) !important;
  -webkit-text-fill-color: var(--warm-orange, #ff6b1a) !important;
  background: #fff1e8 !important;
  background-image: none !important;
  border-color: rgba(255, 107, 26, 0.34) !important;
  box-shadow: none !important;
}

html body #app .public-site .download-panel .el-segmented {
  --el-segmented-color: #59616b !important;
  --el-segmented-bg-color: #f1f3f5 !important;
  --el-segmented-item-selected-color: #ffffff !important;
  --el-segmented-item-selected-bg-color: var(--warm-orange, #ff6b1a) !important;
  --el-segmented-item-hover-color: var(--warm-orange, #ff6b1a) !important;
  --el-segmented-item-hover-bg-color: #fff1e8 !important;
  background: #f1f3f5 !important;
  border: 1px solid #dfe3e8 !important;
  box-shadow: none !important;
}

html body #app .public-site .download-panel .el-segmented__item-selected {
  background: var(--warm-orange, #ff6b1a) !important;
  box-shadow: 0 5px 14px rgba(255, 107, 26, 0.24) !important;
}

html body #app .public-site .download-panel .el-segmented__item.is-selected,
html body #app .public-site .download-panel .el-segmented__item.is-selected .el-segmented__item-label {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body #app .public-site .install-section strong {
  color: var(--warm-orange, #ff6b1a) !important;
  -webkit-text-fill-color: var(--warm-orange, #ff6b1a) !important;
}

html body #app .public-site .download-page .public-reveal,
html body #app .public-site .download-page .public-reveal.is-visible {
  opacity: 1 !important;
  transform: none !important;
  transition-delay: 0ms !important;
  will-change: auto !important;
}

html body #app .public-site .download-page .el-button:hover,
html body #app .public-site .download-page .el-button:focus-visible {
  transform: none !important;
}

html body #app .public-site .download-page .download-submit-btn.el-button--primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: var(--warm-orange, #ff6b1a) !important;
  background-image: none !important;
  border-color: var(--warm-orange, #ff6b1a) !important;
  box-shadow: 0 12px 28px rgba(255, 107, 26, 0.24) !important;
}

html body #app .roadmap-overview__track-glow {
  background: linear-gradient(90deg,
    rgba(255, 107, 26, 0.2) 0%,
    rgba(255, 107, 26, 0.12) 58%,
    transparent 82%) !important;
  filter: blur(3px) !important;
}

html body #app .roadmap-overview__track {
  background: linear-gradient(90deg,
    #ff6b1a 0%,
    #ff8b4a 36%,
    #ffb184 58%,
    #dfe3e8 76%,
    #eceff2 100%) !important;
}

html body #app .roadmap-overview__branch-line.is-live,
html body #app .roadmap-overview__branch-line.is-progress {
  stroke: #ff6b1a !important;
}

html body #app .roadmap-overview__branch-line.is-planned {
  stroke: #cfd5dc !important;
}

html body #app .roadmap-overview__dot {
  background: #ffffff !important;
  border-color: #cfd5dc !important;
  box-shadow: none !important;
}

html body #app .roadmap-overview__dot.is-live,
html body #app .roadmap-overview__dot.is-progress {
  border-color: #ff6b1a !important;
  box-shadow: 0 0 0 4px rgba(255, 107, 26, 0.12) !important;
}

html body #app .roadmap-overview__dot.is-live .roadmap-overview__core,
html body #app .roadmap-overview__dot.is-progress .roadmap-overview__core {
  background: #ffbd86 !important;
  box-shadow: none !important;
}

html body #app .roadmap-overview__dot.is-planned .roadmap-overview__core {
  background: #9aa2ad !important;
}

html body #app .roadmap-overview__ring,
html body #app .roadmap-details__ring {
  border-color: rgba(255, 107, 26, 0.46) !important;
  animation: none !important;
}

html body #app .roadmap-overview__title {
  color: #343940 !important;
  -webkit-text-fill-color: #343940 !important;
  background: #ffffff !important;
  background-image: none !important;
  border-color: #dfe3e8 !important;
  box-shadow: 0 6px 18px rgba(31, 35, 41, 0.08) !important;
}

html body #app .roadmap-overview__title-icon {
  color: #59616b !important;
  -webkit-text-fill-color: #59616b !important;
}

html body #app .roadmap-overview__col.is-live .roadmap-overview__title {
  color: #d95000 !important;
  -webkit-text-fill-color: #d95000 !important;
  background: #fff1e8 !important;
  border-color: #ffc19d !important;
}

html body #app .roadmap-overview__col.is-live .roadmap-overview__title-icon {
  color: #ff6b1a !important;
  -webkit-text-fill-color: #ff6b1a !important;
}

html body #app .roadmap-overview__col.is-progress .roadmap-overview__title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #ffbd86 !important;
  border-color: #ff6b1a !important;
  box-shadow: 0 7px 18px rgba(255, 107, 26, 0.2) !important;
}

html body #app .roadmap-overview__col.is-progress .roadmap-overview__title-icon {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body #app .roadmap-overview__col.is-planned .roadmap-overview__title {
  color: #59616b !important;
  -webkit-text-fill-color: #59616b !important;
  background: #ffffff !important;
  border-color: #dfe3e8 !important;
  opacity: 1 !important;
}

html body #app .roadmap-overview__col.is-planned .roadmap-overview__title-icon {
  color: #8a929c !important;
  -webkit-text-fill-color: #8a929c !important;
}

html body #app .roadmap-overview__col:hover .roadmap-overview__title,
html body #app .roadmap-overview__col.is-live:hover .roadmap-overview__title,
html body #app .roadmap-overview__col.is-progress:hover .roadmap-overview__title,
html body #app .roadmap-overview__col.is-planned:hover .roadmap-overview__title {
  border-color: #ff8b4a !important;
  box-shadow: 0 9px 22px rgba(31, 35, 41, 0.1) !important;
}

html body #app .roadmap-details__track {
  background: linear-gradient(180deg,
    #ff6b1a 0%,
    #ff9a61 48%,
    #dfe3e8 78%,
    #eceff2 100%) !important;
}

html body #app .roadmap-details__dot,
html body #app .roadmap-details__item.is-planned .roadmap-details__dot {
  background: #a8b0ba !important;
  box-shadow: 0 0 0 4px #eef0f3 !important;
}

html body #app .roadmap-details__item.is-live .roadmap-details__dot,
html body #app .roadmap-details__item.is-progress .roadmap-details__dot {
  background: #ffbd86 !important;
  box-shadow: 0 0 0 4px #fff1e8 !important;
}

html body #app .roadmap-details__card {
  color: #252a31 !important;
  background: #ffffff !important;
  background-image: none !important;
  border-color: #dfe3e8 !important;
  box-shadow: none !important;
}

html body #app .roadmap-details__item.is-highlight .roadmap-details__card,
html body #app .roadmap-details__card.is-expanded,
html body #app .roadmap-details__card:hover {
  border-color: #ffb184 !important;
  box-shadow: 0 12px 28px rgba(31, 35, 41, 0.08) !important;
}

html body #app .roadmap-details__status {
  color: #59616b !important;
  -webkit-text-fill-color: #59616b !important;
  background: #f1f3f5 !important;
  border-color: #d9dde3 !important;
  opacity: 1 !important;
}

html body #app .roadmap-details__item.is-live .roadmap-details__status {
  color: #d95000 !important;
  -webkit-text-fill-color: #d95000 !important;
  background: #fff1e8 !important;
  border-color: #ffc19d !important;
}

html body #app .roadmap-details__item.is-progress .roadmap-details__status {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #ffbd86 !important;
  border-color: #ff6b1a !important;
}

html body #app .roadmap-card__summary h3,
html body #app .roadmap-card__summary p,
html body #app .roadmap-card__detail-lead,
html body #app .roadmap-card__detail-note {
  color: #343940 !important;
  -webkit-text-fill-color: #343940 !important;
}

html body #app .roadmap-card__summary p,
html body #app .roadmap-card__detail-note {
  color: #66707b !important;
  -webkit-text-fill-color: #66707b !important;
}

html body #app .roadmap-card__toggle {
  color: #d95000 !important;
  -webkit-text-fill-color: #d95000 !important;
}

html body #app .roadmap-card__toggle:hover {
  color: #ff6b1a !important;
  -webkit-text-fill-color: #ff6b1a !important;
}

html body #app .roadmap-card__detail-body {
  color: #343940 !important;
  background: #fff7f2 !important;
  background-image: none !important;
  border-color: #ffd2b8 !important;
}

html body #app .roadmap-footer {
  color: #252a31 !important;
  background: #ffffff !important;
  background-image: none !important;
  border-color: #ffd2b8 !important;
  box-shadow: 0 16px 38px rgba(31, 35, 41, 0.08) !important;
}

html body #app .roadmap-footer__glow {
  display: none !important;
  background: none !important;
}

html body #app .roadmap-footer__title {
  color: #252a31 !important;
  -webkit-text-fill-color: #252a31 !important;
}

html body #app .roadmap-footer__text {
  color: #66707b !important;
  -webkit-text-fill-color: #66707b !important;
}

html body #app .public-site .roadmap-page .public-page-hero {
  margin-top: clamp(126px, 15vh, 158px) !important;
  margin-bottom: clamp(58px, 7vw, 82px) !important;
}

html body #app .public-site .roadmap-page .public-page-hero h1,
html body #app .public-site .roadmap-page .public-page-hero h1 * {
  color: #20242b !important;
  -webkit-text-fill-color: #20242b !important;
  text-shadow: none !important;
}

html body #app .public-site .roadmap-page .public-page-hero h1 .public-accent-text,
html body #app .public-site .roadmap-page .public-section-eyebrow,
html body #app .public-site .roadmap-page .public-accent-text {
  color: var(--warm-orange, #ff6b1a) !important;
  -webkit-text-fill-color: var(--warm-orange, #ff6b1a) !important;
}

html body #app .public-site .roadmap-page .public-page-hero p,
html body #app .public-site .roadmap-page .roadmap-card__summary p,
html body #app .public-site .roadmap-page .roadmap-card__detail-note,
html body #app .public-site .roadmap-page .roadmap-footer__text {
  color: #5f6875 !important;
  -webkit-text-fill-color: #5f6875 !important;
  opacity: 1 !important;
}

html body #app .public-site .roadmap-page .roadmap-overview__track-glow {
  background: linear-gradient(90deg,
    rgba(255, 107, 26, 0.2) 0%,
    rgba(255, 107, 26, 0.12) 58%,
    transparent 82%) !important;
}

html body #app .public-site .roadmap-page .roadmap-overview__track {
  background: linear-gradient(90deg,
    var(--warm-orange, #ff6b1a) 0%,
    #ff7a2c 36%,
    #ffb184 58%,
    #dfe3e8 76%,
    #eceff2 100%) !important;
}

html body #app .public-site .roadmap-page .roadmap-overview__branch-line.is-live,
html body #app .public-site .roadmap-page .roadmap-overview__branch-line.is-progress {
  stroke: var(--warm-orange, #ff6b1a) !important;
}

html body #app .public-site .roadmap-page .roadmap-overview__dot.is-live,
html body #app .public-site .roadmap-page .roadmap-overview__dot.is-progress {
  border-color: var(--warm-orange, #ff6b1a) !important;
  box-shadow: 0 0 0 4px rgba(255, 107, 26, 0.12) !important;
}

html body #app .public-site .roadmap-page .roadmap-overview__dot.is-live .roadmap-overview__core,
html body #app .public-site .roadmap-page .roadmap-overview__dot.is-progress .roadmap-overview__core {
  background: var(--warm-orange, #ff6b1a) !important;
}

html body #app .public-site .roadmap-page .roadmap-overview__ring,
html body #app .public-site .roadmap-page .roadmap-details__ring {
  animation: none !important;
  border-color: rgba(255, 107, 26, 0.42) !important;
}

html body #app .public-site .roadmap-page .roadmap-overview__col:hover .roadmap-overview__dot,
html body #app .public-site .roadmap-page .roadmap-details__item:hover .roadmap-details__dot,
html body #app .public-site .roadmap-page .roadmap-card__toggle:hover,
html body #app .public-site .roadmap-page .el-button:hover,
html body #app .public-site .roadmap-page .el-button:focus-visible {
  transform: none !important;
}

html body #app .public-site .roadmap-page .roadmap-overview__col.is-live .roadmap-overview__title {
  color: var(--warm-orange, #ff6b1a) !important;
  -webkit-text-fill-color: var(--warm-orange, #ff6b1a) !important;
  background: #fff1e8 !important;
  border-color: rgba(255, 107, 26, 0.34) !important;
}

html body #app .public-site .roadmap-page .roadmap-overview__col.is-live .roadmap-overview__title-icon {
  color: var(--warm-orange, #ff6b1a) !important;
  -webkit-text-fill-color: var(--warm-orange, #ff6b1a) !important;
}

html body #app .public-site .roadmap-page .roadmap-overview__col.is-progress .roadmap-overview__title,
html body #app .public-site .roadmap-page .roadmap-details__item.is-progress .roadmap-details__status {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: var(--warm-orange, #ff6b1a) !important;
  border-color: var(--warm-orange, #ff6b1a) !important;
}

html body #app .public-site .roadmap-page .roadmap-overview__col.is-progress .roadmap-overview__title-icon {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body #app .public-site .roadmap-page .roadmap-details__track {
  background: linear-gradient(180deg,
    var(--warm-orange, #ff6b1a) 0%,
    #ff8b4a 48%,
    #dfe3e8 78%,
    #eceff2 100%) !important;
}

html body #app .public-site .roadmap-page .roadmap-details__item.is-live .roadmap-details__dot,
html body #app .public-site .roadmap-page .roadmap-details__item.is-progress .roadmap-details__dot {
  background: var(--warm-orange, #ff6b1a) !important;
  box-shadow: 0 0 0 4px #fff1e8 !important;
}

html body #app .public-site .roadmap-page .roadmap-details__item.is-live .roadmap-details__status {
  color: var(--warm-orange, #ff6b1a) !important;
  -webkit-text-fill-color: var(--warm-orange, #ff6b1a) !important;
  background: #fff1e8 !important;
  border-color: rgba(255, 107, 26, 0.34) !important;
}

html body #app .public-site .roadmap-page .roadmap-card__toggle {
  color: var(--warm-orange, #ff6b1a) !important;
  -webkit-text-fill-color: var(--warm-orange, #ff6b1a) !important;
}

html body #app .public-site .roadmap-page .roadmap-card__detail-body {
  background: #fff7f2 !important;
  border-color: rgba(255, 107, 26, 0.24) !important;
}

html body #app .public-site .roadmap-page .public-reveal,
html body #app .public-site .roadmap-page .public-reveal.is-visible {
  opacity: 1 !important;
  transform: none !important;
  transition-delay: 0ms !important;
  will-change: auto !important;
}

/* Homepage footer: dark panel with white copy. */
html body #app .site-footer,
html body #app footer.site-footer {
  color: #f7ead9 !important;
  margin-top: clamp(120px, 16vh, 180px) !important;
  padding: clamp(72px, 8vh, 96px) 0 clamp(92px, 10vh, 128px) !important;
  background: #252623 !important;
  background-color: #252623 !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body #app .site-footer::before,
html body #app .site-footer::after {
  display: none !important;
  content: none !important;
  background: none !important;
  background-image: none !important;
}

html body #app .site-footer .footer-divider,
html body #app .site-footer .footer-divider::after {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  animation: none !important;
  content: none !important;
}

html body #app .site-footer .footer-logo {
  filter: brightness(0) invert(1) opacity(0.92) !important;
}

html body #app .site-footer .footer-col,
html body #app .site-footer .footer-col *,
html body #app .site-footer .footer-meta,
html body #app .site-footer .footer-meta *,
html body #app .site-footer .footer-contact-item,
html body #app .site-footer .footer-contact-item *,
html body #app .site-footer button,
html body #app .site-footer a {
  color: rgba(247, 234, 217, 0.72) !important;
  -webkit-text-fill-color: rgba(247, 234, 217, 0.72) !important;
  text-shadow: none !important;
}

html body #app .site-footer .footer-col h4,
html body #app .site-footer .footer-contact-kicker,
html body #app .site-footer .footer-hero h2 {
  color: #f7ead9 !important;
  -webkit-text-fill-color: #f7ead9 !important;
}

html body #app .site-footer .footer-hero h2 span {
  color: #ff6b1a !important;
  -webkit-text-fill-color: #ff6b1a !important;
}

html body #app .site-footer a:hover,
html body #app .site-footer button:hover,
html body #app .site-footer .footer-meta__icp:hover {
  color: #ff7a25 !important;
  -webkit-text-fill-color: #ff7a25 !important;
}

html body #app .site-footer .footer-hero__cta,
html body #app .site-footer .footer-hero__cta:hover,
html body #app .site-footer .footer-hero__cta:focus-visible {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #ff6414 !important;
  box-shadow: none !important;
}

html body #app .site-footer.is-home,
html body #app footer.site-footer.is-home {
  margin-top: clamp(36px, 5vh, 56px) !important;
}

/* Homepage creator ecosystem: keep the reference-style warm dark stage. */
html body #app section.home-creator-ecosystem,
html body #app .home-creator-ecosystem {
  color: #f7ead9 !important;
  background: #252623 !important;
  background-color: #252623 !important;
  background-image: none !important;
}

html body #app .home-creator-ecosystem__eyebrow,
html body #app .home-creator-ecosystem__intro p {
  color: rgba(247, 234, 217, 0.68) !important;
  -webkit-text-fill-color: rgba(247, 234, 217, 0.68) !important;
}

html body #app .home-creator-ecosystem__intro h2,
html body #app .home-creator-ecosystem__panel-title {
  color: #f7ead9 !important;
  -webkit-text-fill-color: #f7ead9 !important;
}

html body #app .home-creator-ecosystem .home-creator-ecosystem__panel {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body #app .home-creator-ecosystem__metrics span {
  color: rgba(247, 234, 217, 0.72) !important;
  -webkit-text-fill-color: rgba(247, 234, 217, 0.72) !important;
}

html body #app .home-creator-ecosystem__metrics strong {
  color: #ff6414 !important;
  -webkit-text-fill-color: #ff6414 !important;
}

html body #app .home-creator-ecosystem__panel-head strong {
  color: #252623 !important;
  -webkit-text-fill-color: #252623 !important;
}

html body #app .home-creator-ecosystem__icon {
  color: #ff6414 !important;
  -webkit-text-fill-color: #ff6414 !important;
}

html body #app .home-creator-ecosystem__pillar--earn,
html body #app .home-creator-ecosystem__pillar--earn strong,
html body #app .home-creator-ecosystem__pillar--earn p,
html body #app .home-creator-ecosystem__pillar--earn .home-creator-ecosystem__step {
  color: #f7ead9 !important;
  -webkit-text-fill-color: #f7ead9 !important;
}

html body #app .home-creator-ecosystem__pillar--create {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body #app .home-creator-ecosystem__pillar--create strong,
html body #app .home-creator-ecosystem__pillar--create .home-creator-ecosystem__step {
  color: #252623 !important;
  -webkit-text-fill-color: #252623 !important;
  opacity: 1 !important;
}

html body #app .home-creator-ecosystem__pillar--create p {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

html body #app .home-creator-ecosystem__pillar--publish,
html body #app .home-creator-ecosystem__pillar--publish strong,
html body #app .home-creator-ecosystem__pillar--publish p,
html body #app .home-creator-ecosystem__pillar--publish .home-creator-ecosystem__step,
html body #app .home-creator-ecosystem__pillar--grow,
html body #app .home-creator-ecosystem__pillar--grow strong,
html body #app .home-creator-ecosystem__pillar--grow p,
html body #app .home-creator-ecosystem__pillar--grow .home-creator-ecosystem__step {
  color: #252623 !important;
  -webkit-text-fill-color: #252623 !important;
}

html body #app .home-creator-ecosystem__pillar p {
  opacity: 0.72 !important;
}

html body #app .home-creator-ecosystem__pillar--create p {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

html body #app .home-terminal-ecosystem__node--mobile {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body #app .home-terminal-ecosystem__node--mobile .home-terminal-ecosystem__node-eyebrow,
html body #app .home-terminal-ecosystem__node--mobile strong {
  color: #20242b !important;
  -webkit-text-fill-color: #20242b !important;
  opacity: 1 !important;
}

html body #app .home-terminal-ecosystem__node--mobile p {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

html body #app .home-terminal-ecosystem__node--web,
html body #app .home-terminal-ecosystem__node--web .home-terminal-ecosystem__node-eyebrow,
html body #app .home-terminal-ecosystem__node--web strong,
html body #app .home-terminal-ecosystem__node--web p {
  color: #22251f !important;
  -webkit-text-fill-color: #22251f !important;
}

html body #app .home-terminal-ecosystem__node--client {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body #app .home-terminal-ecosystem__node--client .home-terminal-ecosystem__node-eyebrow,
html body #app .home-terminal-ecosystem__node--client strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

html body #app .home-terminal-ecosystem__node--client p {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

html body #app .home-terminal-ecosystem__node p {
  opacity: 0.9 !important;
}

html body #app .home-terminal-ecosystem__node--mobile p {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

html body #app .home-terminal-ecosystem__node--client p {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

html body #app .public-site .legal-page .legal-card header,
html body #app .public-site .legal-page .legal-section,
html body #app .public-site .legal-page .legal-section:nth-of-type(even) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body #app .legal-page .legal-card header,
html body #app .legal-page .legal-section,
html body #app .legal-page .legal-section:nth-of-type(even),
html body #app .legal-page .legal-section::before,
html body #app .legal-page .legal-section::after {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* V18 - Account center: align the console with the public warm visual system. */
html body #app .app-shell .account-center {
  grid-template-columns: minmax(240px, 282px) minmax(0, 1fr) !important;
  column-gap: 24px !important;
}

html body #app .app-shell .account-center .console-context-panel,
html body #app .app-shell .account-center .console-workbench-head,
html body #app .app-shell .account-center .module-card.el-card {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #dfe3e8 !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 28px rgba(31, 35, 41, 0.07) !important;
}

html body #app .app-shell .account-center .console-context-panel {
  gap: 12px !important;
  padding: 22px !important;
}

html body #app .app-shell .account-center .console-context-panel h2 {
  color: #252a31 !important;
  -webkit-text-fill-color: #252a31 !important;
  font-size: 26px !important;
  letter-spacing: 0 !important;
}

html body #app .app-shell .account-center .console-context-panel p:not(.console-context-panel__eyebrow) {
  color: #626b76 !important;
  -webkit-text-fill-color: #626b76 !important;
  font-size: 15px !important;
  line-height: 1.72 !important;
}

html body #app .app-shell .account-center .console-context-nav__item {
  min-height: 64px !important;
  padding: 10px 12px !important;
  color: #303741 !important;
  -webkit-text-fill-color: #303741 !important;
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #e1e4e8 !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 18px rgba(31, 35, 41, 0.05) !important;
}

html body #app .app-shell .account-center .console-context-nav__item:hover,
html body #app .app-shell .account-center .console-context-nav__item.is-active {
  background: #fff3eb !important;
  border-color: rgba(255, 107, 26, 0.46) !important;
  box-shadow:
    inset 4px 0 0 #ff6b1a,
    0 10px 22px rgba(255, 107, 26, 0.10) !important;
}

html body #app .app-shell .account-center .console-context-nav__item .material-symbols-outlined,
html body #app .app-shell .account-center .account-hero__icon,
html body #app .app-shell .account-center .module-head h3 .material-symbols-outlined,
html body #app .app-shell .account-center .input-prefix-icon {
  color: #ff6b1a !important;
  -webkit-text-fill-color: #ff6b1a !important;
}

html body #app .app-shell .account-center .console-context-nav__item strong {
  color: #252a31 !important;
  -webkit-text-fill-color: #252a31 !important;
  font-size: 16px !important;
  font-weight: 820 !important;
}

html body #app .app-shell .account-center .console-context-nav__item small {
  color: #68717d !important;
  -webkit-text-fill-color: #68717d !important;
  overflow: hidden !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body #app .app-shell .account-center .console-workbench-head {
  min-height: 126px !important;
  padding: 26px 30px !important;
}

html body #app .app-shell .account-center .account-hero__icon {
  width: 64px !important;
  height: 64px !important;
  background: #fff0e6 !important;
  border-color: rgba(255, 107, 26, 0.32) !important;
  border-radius: 12px !important;
  font-size: 30px !important;
}

html body #app .app-shell .account-center .account-hero__eyebrow,
html body #app .app-shell .account-center .console-context-panel__eyebrow {
  color: var(--warm-orange, #ff6b1a) !important;
  -webkit-text-fill-color: var(--warm-orange, #ff6b1a) !important;
  font-size: 13px !important;
  font-weight: 860 !important;
  letter-spacing: 0.08em !important;
}

html body #app .app-shell .account-center .console-workbench-head h2 {
  color: #252a31 !important;
  -webkit-text-fill-color: #252a31 !important;
  font-size: 34px !important;
  letter-spacing: 0 !important;
}

html body #app .app-shell .account-center .console-workbench-head p,
html body #app .app-shell .account-center .text-aux,
html body #app .app-shell .account-center .module-desc,
html body #app .app-shell .account-center .form-tip {
  color: #626b76 !important;
  -webkit-text-fill-color: #626b76 !important;
  opacity: 1 !important;
}

html body #app .app-shell .account-center .module-card.el-card .el-card__body {
  padding: 26px 30px !important;
}

html body #app .app-shell .account-center .module-head {
  margin-bottom: 20px !important;
}

html body #app .app-shell .account-center .module-head h3 {
  color: #252a31 !important;
  -webkit-text-fill-color: #252a31 !important;
  font-size: 22px !important;
  letter-spacing: 0 !important;
}

html body #app .app-shell .account-center .form-panel {
  width: min(100%, 640px) !important;
}

html body #app .app-shell .account-center .form-panel--profile > .el-form-item:first-child {
  max-width: 560px !important;
}

html body #app .app-shell .account-center .el-form-item__label {
  color: #303741 !important;
  -webkit-text-fill-color: #303741 !important;
  font-weight: 720 !important;
}

html body #app .app-shell .account-center .el-input__wrapper,
html body #app .app-shell .account-center .el-select__wrapper,
html body #app .app-shell .account-center .el-textarea__inner {
  min-height: 48px !important;
  background: #ffffff !important;
  border-color: #d8dde4 !important;
  box-shadow: 0 0 0 1px #d8dde4 inset !important;
}

html body #app .app-shell .account-center .account-avatar-block {
  padding: 22px !important;
  background: #fff8f2 !important;
  background-image: none !important;
  border: 1px solid rgba(255, 107, 26, 0.28) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

html body #app .app-shell .account-center .account-avatar-main,
html body #app .app-shell .account-center .account-avatar-summary {
  align-items: center !important;
}

html body #app .app-shell .account-center .account-avatar-ring {
  padding: 4px !important;
  background: #fff !important;
  border: 1px solid rgba(255, 107, 26, 0.30) !important;
  border-radius: 999px !important;
}

html body #app .app-shell .account-center .account-avatar-preview {
  width: 82px !important;
  height: 82px !important;
  color: #252a31 !important;
  background: #fff0e6 !important;
  border: 0 !important;
}

html body #app .app-shell .account-center .account-avatar-summary strong {
  color: #252a31 !important;
  -webkit-text-fill-color: #252a31 !important;
  font-size: 17px !important;
  font-weight: 820 !important;
}

html body #app .app-shell .account-center .account-avatar-summary .el-button {
  min-width: 118px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #ffbd86 !important;
  border-color: #ff6b1a !important;
  box-shadow: 0 9px 20px rgba(255, 107, 26, 0.20) !important;
}

html body #app .app-shell .account-center .official-avatar-option {
  background: #ffffff !important;
  background-image: none !important;
  border-color: #e1e4e8 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

html body #app .app-shell .account-center .official-avatar-option:hover,
html body #app .app-shell .account-center .official-avatar-option.is-active {
  border-color: rgba(255, 107, 26, 0.62) !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 26, 0.10) !important;
}

html body #app .app-shell .account-center .form-actions {
  border-top-color: #e6e9ed !important;
}

html body #app .app-shell .account-center .el-button--primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: linear-gradient(135deg, #ff7a2c, #ff5d0a) !important;
  border-color: transparent !important;
}

html body #app .app-shell .account-center .account-cta-card,
html body #app .app-shell .account-center .identity-status-card {
  background: #fff8f2 !important;
  background-image: none !important;
  border-color: rgba(255, 107, 26, 0.24) !important;
  border-radius: 12px !important;
}

html body #app .app-shell .account-center .table-scroll,
html body #app .app-shell .account-center .console-table.el-table {
  background: #ffffff !important;
  background-image: none !important;
  border-color: #e1e4e8 !important;
  box-shadow: none !important;
}

html body #app .app-shell .account-center .empty-block {
  background: #f7f8fa !important;
  border-color: #dfe3e8 !important;
}

html body .user-account-dropdown,
html body .el-popper.user-account-dropdown,
html body .el-popper.is-light.user-account-dropdown {
  width: 320px !important;
  max-width: calc(100vw - 28px) !important;
  padding: 10px !important;
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #dfe3e8 !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 46px rgba(31, 35, 41, 0.14) !important;
  color: #252a31 !important;
  -webkit-text-fill-color: #252a31 !important;
}

html body .el-popper.user-account-dropdown .el-popper__arrow::before,
html body .el-popper.is-light.user-account-dropdown .el-popper__arrow::before {
  background: #ffffff !important;
  border-color: #dfe3e8 !important;
}

html body .user-account-dropdown .el-dropdown-menu {
  display: grid !important;
  gap: 4px !important;
}

html body .user-account-dropdown .user-menu-card {
  padding: 12px !important;
  margin-bottom: 4px !important;
  background: #fff7f0 !important;
  border: 1px solid rgba(255, 107, 26, 0.18) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

html body .user-account-dropdown .user-menu-card strong,
html body .user-account-dropdown .user-menu-copy strong {
  color: #252a31 !important;
  -webkit-text-fill-color: #252a31 !important;
}

html body .user-account-dropdown .user-menu-card > div span,
html body .user-account-dropdown .user-menu-copy small {
  color: #66707d !important;
  -webkit-text-fill-color: #66707d !important;
}

html body .user-account-dropdown .el-dropdown-menu__item {
  min-height: 52px !important;
  padding: 8px 10px !important;
  color: #252a31 !important;
  background: #ffffff !important;
  border-radius: 10px !important;
}

html body .user-account-dropdown .el-dropdown-menu__item:not(.is-disabled):hover,
html body .user-account-dropdown .el-dropdown-menu__item:not(.is-disabled):focus {
  background: #fff3eb !important;
}

html body .user-account-dropdown .user-menu-main {
  position: static !important;
  left: auto !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: none !important;
  transform: none !important;
}

html body .user-account-dropdown .user-menu-icon {
  display: grid !important;
  width: 34px !important;
  height: 34px !important;
  place-items: center !important;
  color: #ff6b1a !important;
  -webkit-text-fill-color: #ff6b1a !important;
  background: #fff0e6 !important;
  border: 1px solid rgba(255, 107, 26, 0.22) !important;
  border-radius: 9px !important;
}

html body .user-account-dropdown .user-menu-copy {
  display: grid !important;
  gap: 3px !important;
}

html body .user-account-dropdown .user-menu-copy strong {
  font-size: 15px !important;
  font-weight: 780 !important;
  letter-spacing: 0 !important;
}

html body .user-account-dropdown .user-menu-copy small {
  display: block !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  opacity: 1 !important;
  transform: none !important;
}

html body .user-account-dropdown .user-menu-logout .user-menu-icon,
html body .user-account-dropdown .user-menu-logout .user-menu-copy strong {
  color: #e64646 !important;
  -webkit-text-fill-color: #e64646 !important;
}

@media (max-width: 980px) {
  html body #app .app-shell .account-center {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
  }

  html body #app .app-shell .account-center .console-workbench-head,
  html body #app .app-shell .account-center .module-card.el-card .el-card__body {
    padding: 20px !important;
  }
}

/* V19 - Orange card contrast rule: title black, body copy white. */
html body #app .coming-soon-page__feature--primary h2,
html body #app .coming-soon-page__feature:first-child h2,
html body #app .home-creator-ecosystem__pillar--create strong,
html body #app .home-terminal-ecosystem__node--mobile strong {
  color: #20242b !important;
  -webkit-text-fill-color: #20242b !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html body #app .coming-soon-page__feature--primary p,
html body #app .coming-soon-page__feature:first-child p,
html body #app .home-creator-ecosystem__pillar--create p,
html body #app .home-terminal-ecosystem__node--mobile p {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html body #app .home-terminal-ecosystem__node--mobile .home-terminal-ecosystem__node-eyebrow {
  color: #20242b !important;
  -webkit-text-fill-color: #20242b !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html body #app .home-creator-ecosystem__pillar--create .home-creator-ecosystem__step {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

/* V20 - Public CTA secondary buttons must stay readable on light panels. */
html body #app .public-site .public-cta-panel__actions .el-button:not(.el-button--primary),
html body #app .public-site .roadmap-footer__actions .el-button:not(.el-button--primary) {
  color: var(--warm-orange, #ff6b1a) !important;
  -webkit-text-fill-color: var(--warm-orange, #ff6b1a) !important;
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid rgba(255, 107, 26, 0.42) !important;
  box-shadow: 0 10px 24px rgba(31, 35, 41, 0.08) !important;
  opacity: 1 !important;
}

html body #app .public-site .public-cta-panel__actions .el-button:not(.el-button--primary) *,
html body #app .public-site .roadmap-footer__actions .el-button:not(.el-button--primary) * {
  color: var(--warm-orange, #ff6b1a) !important;
  -webkit-text-fill-color: var(--warm-orange, #ff6b1a) !important;
  opacity: 1 !important;
}

html body #app .public-site .public-cta-panel__actions .el-button:not(.el-button--primary):hover,
html body #app .public-site .public-cta-panel__actions .el-button:not(.el-button--primary):focus-visible,
html body #app .public-site .roadmap-footer__actions .el-button:not(.el-button--primary):hover,
html body #app .public-site .roadmap-footer__actions .el-button:not(.el-button--primary):focus-visible {
  color: #e94d00 !important;
  -webkit-text-fill-color: #e94d00 !important;
  background: #fff4ec !important;
  border-color: rgba(255, 107, 26, 0.62) !important;
}

/* V21 - Roadmap orange aligns with the homepage primary orange. */
html body #app .public-site .roadmap-page {
  --roadmap-orange: var(--warm-orange, #ff6b1a) !important;
}

html body #app .public-site .roadmap-page .public-page-hero h1 .public-accent-text,
html body #app .public-site .roadmap-page .public-section-eyebrow,
html body #app .public-site .roadmap-page .public-accent-text,
html body #app .public-site .roadmap-page .roadmap-overview__col.is-live .roadmap-overview__title,
html body #app .public-site .roadmap-page .roadmap-overview__col.is-live .roadmap-overview__title-icon,
html body #app .public-site .roadmap-page .roadmap-details__item.is-live .roadmap-details__status,
html body #app .public-site .roadmap-page .roadmap-card__toggle,
html body #app .public-site .roadmap-footer__actions .el-button:not(.el-button--primary),
html body #app .public-site .roadmap-footer__actions .el-button:not(.el-button--primary) * {
  color: var(--warm-orange, #ff6b1a) !important;
  -webkit-text-fill-color: var(--warm-orange, #ff6b1a) !important;
  opacity: 1 !important;
}

html body #app .public-site .roadmap-page .roadmap-overview__track {
  background:
    linear-gradient(
      90deg,
      var(--warm-orange, #ff6b1a) 0%,
      var(--warm-orange, #ff6b1a) 42%,
      #dfe3e8 42%,
      #dfe3e8 100%
    ) !important;
}

html body #app .public-site .roadmap-page .roadmap-details__track {
  background:
    linear-gradient(
      90deg,
      var(--warm-orange, #ff6b1a) 0%,
      var(--warm-orange, #ff6b1a) 42%,
      #dfe3e8 42%,
      #dfe3e8 100%
    ) !important;
}

html body #app .public-site .roadmap-page .roadmap-overview__branch-line.is-live,
html body #app .public-site .roadmap-page .roadmap-overview__branch-line.is-progress {
  stroke: var(--warm-orange, #ff6b1a) !important;
}

html body #app .public-site .roadmap-page .roadmap-overview__dot.is-live,
html body #app .public-site .roadmap-page .roadmap-overview__dot.is-progress,
html body #app .public-site .roadmap-page .roadmap-footer__actions .el-button:not(.el-button--primary) {
  border-color: rgba(255, 114, 18, 0.46) !important;
}

html body #app .public-site .roadmap-page .roadmap-overview__dot.is-live .roadmap-overview__core,
html body #app .public-site .roadmap-page .roadmap-overview__dot.is-progress .roadmap-overview__core,
html body #app .public-site .roadmap-page .roadmap-details__item.is-live .roadmap-details__dot,
html body #app .public-site .roadmap-page .roadmap-details__item.is-progress .roadmap-details__dot,
html body #app .public-site .roadmap-page .roadmap-overview__col.is-progress .roadmap-overview__title,
html body #app .public-site .roadmap-page .roadmap-details__item.is-progress .roadmap-details__status {
  background: var(--warm-orange, #ff6b1a) !important;
  border-color: var(--warm-orange, #ff6b1a) !important;
}

/* V22 - Public page rhythm and orange palette cleanup. */
html body #app .public-site .download-page {
  --download-orange: var(--warm-orange, #ff6b1a) !important;
  --download-orange-deep: var(--warm-orange-deep, #e95308) !important;
}

html body #app .public-site .download-page .public-page-hero,
html body #app .public-site .roadmap-page .public-page-hero {
  margin-top: clamp(96px, 11vh, 122px) !important;
  margin-bottom: clamp(46px, 5.6vw, 66px) !important;
}

html body #app .public-site .download-page .public-accent-text,
html body #app .public-site .download-page .public-page-hero h1 .public-accent-text,
html body #app .public-site .download-page .public-section-eyebrow,
html body #app .public-site .download-page .install-section strong,
html body #app .public-site .download-page .panel-head > .material-symbols-outlined,
html body #app .public-site .download-page .public-benefit-card .material-symbols-outlined,
html body #app .public-site .download-page .public-cta-panel__actions .el-button:not(.el-button--primary),
html body #app .public-site .download-page .public-cta-panel__actions .el-button:not(.el-button--primary) *,
html body #app .public-site .inspiration-mall .mall-count,
html body #app .public-site .inspiration-mall .mall-community-entry__action,
html body #app .public-site .inspiration-mall .mall-community__eyebrow,
html body #app .public-site .inspiration-mall .mall-community strong {
  color: var(--warm-orange, #ff6b1a) !important;
  -webkit-text-fill-color: var(--warm-orange, #ff6b1a) !important;
}

html body #app .public-site .download-page .public-cta-panel__actions .el-button:not(.el-button--primary) {
  border-color: rgba(255, 107, 26, 0.42) !important;
}

html body #app .public-site .download-page .download-submit-btn.el-button--primary,
html body #app .public-site .download-page .download-panel .el-segmented__item-selected {
  background: var(--warm-orange, #ff6b1a) !important;
  border-color: var(--warm-orange, #ff6b1a) !important;
}

html body #app .public-site .download-page .download-card {
  border-color: rgba(255, 107, 26, 0.30) !important;
}

html body #app .public-site .download-page .download-panel:hover,
html body #app .public-site .download-page .download-card:hover,
html body #app .public-site .download-page .public-benefit-card:hover,
html body #app .public-site .download-page .install-section article:hover {
  border-color: rgba(255, 107, 26, 0.42) !important;
}

html body #app .public-site .download-page .panel-head > .material-symbols-outlined {
  border-color: rgba(255, 107, 26, 0.34) !important;
}

html body #app .auth-card .auth-card__head,
html body #app .auth-card .auth-card__logo,
html body #app .auth-card .auth-card__subtitle,
html body #app .auth-card .auth-card__title {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 640px) {
  html body #app .public-site .download-page .public-page-hero,
  html body #app .public-site .roadmap-page .public-page-hero {
    margin-top: 86px !important;
    margin-bottom: 44px !important;
  }

  html body #app .home-page .home-mountain-motion__wash {
    background:
      linear-gradient(180deg, rgba(246, 247, 249, 0.86) 0%, rgba(246, 247, 249, 0.44) 42%, rgba(246, 247, 249, 0.84) 100%),
      linear-gradient(90deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.22)) !important;
  }

  html body #app .home-page .home-terminal-ecosystem__loop {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  html body #app .home-page .home-terminal-ecosystem__node {
    position: relative !important;
    inset: auto !important;
    width: min(76vw, 230px) !important;
    height: min(76vw, 230px) !important;
    min-width: min(76vw, 230px) !important;
    min-height: min(76vw, 230px) !important;
    max-width: min(76vw, 230px) !important;
    max-height: min(76vw, 230px) !important;
    grid-column: auto !important;
    grid-row: auto !important;
    transform: none !important;
  }

  html body #app .home-page .home-terminal-ecosystem__node--mobile {
    order: 1 !important;
  }

  html body #app .home-page .home-terminal-ecosystem__node--web {
    order: 2 !important;
  }

  html body #app .home-page .home-terminal-ecosystem__node--client {
    order: 3 !important;
  }

  html body #app .home-page .home-terminal-ecosystem__arrow {
    display: none !important;
  }
}

/* V23 - Account center sidebar: neutral surfaces, no pale orange fills. */
html body #app .app-shell .app-aside {
  background: #ffffff !important;
  background-image: none !important;
  border-right: 1px solid #dfe3e8 !important;
  box-shadow: 12px 0 34px rgba(31, 35, 41, 0.06) !important;
}

html body #app .app-shell .console-nav-card,
html body #app .app-shell .console-nav-card.is-primary-entry {
  color: #30343a !important;
  -webkit-text-fill-color: #30343a !important;
  background: #ffffff !important;
  background-image: none !important;
  border-color: #e1e4e8 !important;
  box-shadow: 0 8px 22px rgba(31, 35, 41, 0.05) !important;
}

html body #app .app-shell .console-nav-card:hover,
html body #app .app-shell .console-nav-card.is-primary-entry:hover {
  background: #f8f9fb !important;
  background-image: none !important;
  border-color: #d8dde4 !important;
  box-shadow: 0 10px 24px rgba(31, 35, 41, 0.08) !important;
}

html body #app .app-shell .console-nav-card.is-active,
html body #app .app-shell .console-nav-card.is-primary-entry.is-active {
  color: #252a31 !important;
  -webkit-text-fill-color: #252a31 !important;
  background: #ffffff !important;
  background-image: none !important;
  border-color: rgba(255, 107, 26, 0.42) !important;
  box-shadow: 0 10px 24px rgba(31, 35, 41, 0.08) !important;
}

html body #app .app-shell .console-nav-card__icon,
html body #app .app-shell .console-nav-card.is-primary-entry .console-nav-card__icon,
html body #app .app-shell .console-nav-card.is-primary-entry.is-active .console-nav-card__icon,
html body #app .app-shell .avatar,
html body .user-menu-card__avatar {
  color: #ff6b1a !important;
  -webkit-text-fill-color: #ff6b1a !important;
  background: #ffffff !important;
  background-image: none !important;
  border-color: rgba(255, 107, 26, 0.28) !important;
  box-shadow: none !important;
}

html body #app .app-shell .operator-row--button,
html body #app .app-shell .operator-row--button:hover,
html body #app .app-shell .operator-row--button:focus-visible {
  background: #ffffff !important;
  background-image: none !important;
  border-color: #e1e4e8 !important;
  box-shadow: 0 8px 20px rgba(31, 35, 41, 0.06) !important;
  transform: none !important;
}

/* Match user center dropdown to the public-site avatar dropdown. */
html body .user-account-dropdown,
html body .el-popper.user-account-dropdown,
html body .el-popper.is-light.user-account-dropdown {
  width: 244px !important;
  min-width: 244px !important;
  max-width: calc(100vw - 28px) !important;
  padding: 8px !important;
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid rgba(255, 142, 35, 0.18) !important;
  border-radius: 10px !important;
  box-shadow: 0 18px 50px rgba(115, 66, 16, 0.16) !important;
  color: #3d4552 !important;
  -webkit-text-fill-color: #3d4552 !important;
}

html body .el-popper.user-account-dropdown .el-popper__arrow::before,
html body .el-popper.is-light.user-account-dropdown .el-popper__arrow::before {
  background: #ffffff !important;
  border-color: rgba(255, 142, 35, 0.18) !important;
}

html body .user-account-dropdown .el-dropdown-menu {
  display: block !important;
  gap: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  background-image: none !important;
}

html body .user-account-dropdown .user-menu-card {
  min-height: 52px !important;
  padding: 10px 12px !important;
  margin-bottom: 0 !important;
  background: #ffffff !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid #e5e7eb !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body .user-account-dropdown .user-menu-card__avatar {
  width: 36px !important;
  height: 36px !important;
  background: linear-gradient(135deg, #ffb517, #ff7212) !important;
  border: 0 !important;
  border-radius: 50% !important;
}

html body .user-account-dropdown .el-dropdown-menu__item {
  min-height: 40px !important;
  gap: 10px !important;
  padding: 7px 10px !important;
  color: #3d4552 !important;
  -webkit-text-fill-color: #3d4552 !important;
  background: #ffffff !important;
  background-image: none !important;
  border-radius: 0 !important;
}

html body .user-account-dropdown .el-dropdown-menu__item:not(.is-disabled):hover,
html body .user-account-dropdown .el-dropdown-menu__item:not(.is-disabled):focus {
  color: #2b2118 !important;
  -webkit-text-fill-color: #2b2118 !important;
  background: #ffffff !important;
}

html body .user-account-dropdown .el-dropdown-menu__item--divided,
html body .user-account-dropdown .el-dropdown-menu__item.is-menu-group-start {
  margin-top: 0 !important;
  border-top: 1px solid #e5e7eb !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

html body .user-account-dropdown .user-menu-main {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  display: flex !important;
  grid-template-columns: none !important;
  width: auto !important;
  max-width: calc(100% - 20px) !important;
  align-items: center !important;
  gap: 10px !important;
  transform: translate(-50%, -50%) !important;
}

html body .user-account-dropdown .user-menu-icon {
  display: inline !important;
  width: auto !important;
  height: auto !important;
  color: #e95a00 !important;
  -webkit-text-fill-color: #e95a00 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 19px !important;
}

html body .user-account-dropdown .user-menu-copy {
  display: flex !important;
  min-width: 0 !important;
  align-items: baseline !important;
  gap: 0 !important;
  line-height: 1.2 !important;
}

html body .user-account-dropdown .user-menu-copy strong {
  flex-shrink: 0 !important;
  color: #2b2118 !important;
  -webkit-text-fill-color: #2b2118 !important;
  font-size: 17px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

html body .user-account-dropdown .user-menu-copy small {
  display: block !important;
  max-width: 0 !important;
  margin-left: 0 !important;
  color: #7f6f60 !important;
  -webkit-text-fill-color: #7f6f60 !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  transform: translateX(-4px) !important;
}

html body .user-account-dropdown .el-dropdown-menu__item:not(.is-disabled):hover .user-menu-main,
html body .user-account-dropdown .el-dropdown-menu__item:not(.is-disabled):focus .user-menu-main {
  left: 10px !important;
  transform: translate(0, -50%) !important;
}

html body .user-account-dropdown .el-dropdown-menu__item:not(.is-disabled):hover .user-menu-copy strong,
html body .user-account-dropdown .el-dropdown-menu__item:not(.is-disabled):focus .user-menu-copy strong {
  font-size: 11px !important;
  letter-spacing: -0.01em !important;
}

html body .user-account-dropdown .el-dropdown-menu__item:not(.is-disabled):hover .user-menu-copy small,
html body .user-account-dropdown .el-dropdown-menu__item:not(.is-disabled):focus .user-menu-copy small {
  max-width: 148px !important;
  margin-left: 8px !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
}

html body .user-account-dropdown .user-menu-logout .user-menu-icon,
html body .user-account-dropdown .user-menu-logout .user-menu-copy strong {
  color: #dc2626 !important;
  -webkit-text-fill-color: #dc2626 !important;
}
/* V24 - Account-center internal left rail: keep active states white. */
html body #app .app-shell .account-center .console-context-nav__item,
html body #app .app-shell .account-center .console-context-nav__item:hover,
html body #app .app-shell .account-center .console-context-nav__item.is-active {
  color: #303741 !important;
  -webkit-text-fill-color: #303741 !important;
  background: #ffffff !important;
  background-image: none !important;
  border-color: #e1e4e8 !important;
  box-shadow: 0 10px 24px rgba(31, 35, 41, 0.07) !important;
}

html body #app .app-shell .account-center .console-context-nav__item.is-active {
  border-color: rgba(255, 107, 26, 0.42) !important;
  box-shadow: inset 4px 0 0 #ff6b1a, 0 10px 24px rgba(31, 35, 41, 0.07) !important;
}

html body #app .app-shell .account-center .console-context-nav__item .material-symbols-outlined {
  color: #ff6b1a !important;
  -webkit-text-fill-color: #ff6b1a !important;
  background: #ffffff !important;
  background-image: none !important;
  border-color: rgba(255, 107, 26, 0.28) !important;
}
/* V25 - Account header actions: stable neutral pills. */
html body #app .app-shell .header-actions {
  gap: 10px !important;
}

html body #app .app-shell .header-nav-btn,
html body #app .app-shell .header-membership-btn.header-nav-btn,
html body #app .app-shell .status-chip {
  color: #252a31 !important;
  background: #fff !important;
  border: 1px solid #dfe3e8 !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 20px rgba(31, 35, 41, 0.06) !important;
  transform: none;
}

html body #app .app-shell .header-nav-btn::before,
html body #app .app-shell .header-membership-btn.header-nav-btn::before {
  display: none !important;
  content: none !important;
}

html body #app .app-shell .header-nav-btn:hover,
html body #app .app-shell .header-nav-btn:focus,
html body #app .app-shell .header-membership-btn.header-nav-btn:hover,
html body #app .app-shell .header-membership-btn.header-nav-btn:focus {
  color: #252a31 !important;
  background: #f8f9fb !important;
  border-color: #cfd5dd !important;
  box-shadow: 0 10px 22px rgba(31, 35, 41, 0.08) !important;
  transform: translateY(-1px) !important;
}

html body #app .app-shell .header-membership-btn.header-nav-btn:hover,
html body #app .app-shell .header-membership-btn.header-nav-btn:focus {
  background: #fff7f2 !important;
  border-color: rgba(255, 107, 26, 0.34) !important;
  box-shadow: 0 10px 22px rgba(255, 107, 26, 0.10) !important;
}

html body #app .app-shell .header-membership-btn.header-nav-btn .header-nav-btn__icon {
  color: #ff6b1a !important;
  transform: none !important;
}

html body #app .app-shell .header-membership-btn.header-nav-btn:hover .header-nav-btn__icon,
html body #app .app-shell .header-membership-btn.header-nav-btn:focus .header-nav-btn__icon {
  color: #ff6b1a !important;
  transform: none !important;
}

html body #app .app-shell .header-home-btn.el-button,
html body #app .app-shell .header-home-btn.el-button.el-button--primary {
  color: #fff !important;
  min-height: 38px !important;
  padding: 0 18px !important;
  font-weight: 760 !important;
  background: #ffbd86 !important;
  border-color: #ff6b1a !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 20px rgba(255, 107, 26, 0.18) !important;
  transform: none;
}

html body #app .app-shell .header-home-btn.el-button:hover,
html body #app .app-shell .header-home-btn.el-button:focus,
html body #app .app-shell .header-home-btn.el-button.el-button--primary:hover,
html body #app .app-shell .header-home-btn.el-button.el-button--primary:focus {
  color: #fff !important;
  background: #ee5f10 !important;
  border-color: #ee5f10 !important;
  box-shadow: 0 10px 22px rgba(255, 107, 26, 0.22) !important;
  transform: translateY(-1px) !important;
}

html body #app .app-shell .header-nav-btn:active,
html body #app .app-shell .header-membership-btn.header-nav-btn:active,
html body #app .app-shell .header-home-btn.el-button:active {
  transform: translateY(0) !important;
}
/* V26 - Terminal ecosystem active mobile icon: no white badge on orange card. */
html body #app .home-terminal-ecosystem__node--mobile .home-terminal-ecosystem__icon {
  width: auto !important;
  height: auto !important;
  color: #20242b !important;
  -webkit-text-fill-color: #20242b !important;
  font-size: clamp(34px, 2.45vw, 42px) !important;
  line-height: 1 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* V27 - Account center final correction: no pale-orange sidebar, compact footer user card, public avatar dropdown parity. */
html body #app .app-shell .app-aside,
html body #app .app-shell .app-aside[style] {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-right: 1px solid #dfe3e8 !important;
  box-shadow: 12px 0 34px rgba(31, 35, 41, 0.06) !important;
}

html body #app .app-shell .app-aside::before,
html body #app .app-shell .app-aside::after,
html body #app .app-shell .console-nav-card::after,
html body #app .app-shell .console-nav-card.is-primary-entry:not(.is-active)::after,
html body #app .app-shell .console-nav-card.is-primary-entry:not(.is-active) .console-nav-card__body::before,
html body #app .app-shell .console-nav-card.is-primary-entry:not(.is-active) .console-nav-card__body::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  background-image: none !important;
  animation: none !important;
}

html body #app .app-shell .app-menu,
html body #app .app-shell .aside-footer,
html body #app .app-shell .nav-group {
  background: transparent !important;
  background-image: none !important;
}

html body #app .app-shell .console-nav-card,
html body #app .app-shell .console-nav-card:hover,
html body #app .app-shell .console-nav-card.is-primary-entry,
html body #app .app-shell .console-nav-card.is-primary-entry:hover,
html body #app .app-shell .console-nav-card.is-active,
html body #app .app-shell .console-nav-card.is-primary-entry.is-active {
  color: #252a31 !important;
  -webkit-text-fill-color: #252a31 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: #e1e4e8 !important;
  box-shadow: 0 8px 20px rgba(31, 35, 41, 0.06) !important;
  animation: none !important;
}

html body #app .app-shell .console-nav-card.is-active,
html body #app .app-shell .console-nav-card.is-primary-entry.is-active {
  border-color: rgba(255, 107, 26, 0.46) !important;
  box-shadow: inset 4px 0 0 #ff6b1a, 0 8px 20px rgba(31, 35, 41, 0.06) !important;
}

html body #app .app-shell .console-nav-card__icon,
html body #app .app-shell .console-nav-card.is-primary-entry .console-nav-card__icon,
html body #app .app-shell .console-nav-card.is-primary-entry.is-active .console-nav-card__icon,
html body #app .app-shell .avatar {
  color: #ff6b1a !important;
  -webkit-text-fill-color: #ff6b1a !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: rgba(255, 107, 26, 0.28) !important;
  box-shadow: none !important;
}

html body #app .app-shell .aside-footer-actions {
  gap: 6px !important;
  align-items: center !important;
}

html body #app .app-shell .operator-row--button,
html body #app .app-shell .operator-row--button:hover,
html body #app .app-shell .operator-row--button:focus-visible {
  min-height: 56px !important;
  padding: 7px 10px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: #e1e4e8 !important;
  box-shadow: 0 8px 20px rgba(31, 35, 41, 0.06) !important;
  transform: none !important;
}

html body #app .app-shell .operator-row--button .avatar {
  width: 34px !important;
  height: 34px !important;
}

html body #app .app-shell .operator-row__text strong {
  font-size: 13px !important;
  line-height: 1.25 !important;
}

html body #app .app-shell .operator-row__text span {
  margin-top: 1px !important;
  font-size: 11px !important;
}

html body #app .app-shell .help-inline-btn,
html body #app .app-shell .help-inline-btn:hover,
html body #app .app-shell .help-inline-btn:focus-visible {
  height: 56px !important;
  min-height: 56px !important;
  background: #ffffff !important;
  background-image: none !important;
  border-color: #e1e4e8 !important;
  box-shadow: 0 8px 20px rgba(31, 35, 41, 0.06) !important;
  transform: none !important;
}

html body .user-account-dropdown.public-user-dropdown,
html body .el-popper.user-account-dropdown.public-user-dropdown,
html body .el-popper.is-light.user-account-dropdown.public-user-dropdown {
  width: 244px !important;
  min-width: 244px !important;
  max-width: calc(100vw - 28px) !important;
  padding: 8px !important;
  color: #3d4552 !important;
  -webkit-text-fill-color: #3d4552 !important;
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid rgba(255, 142, 35, 0.18) !important;
  border-radius: 10px !important;
  box-shadow: 0 18px 50px rgba(115, 66, 16, 0.16) !important;
  backdrop-filter: none !important;
}

html body .user-account-dropdown.public-user-dropdown .el-dropdown-menu,
html body .user-account-dropdown.public-user-dropdown .el-scrollbar,
html body .user-account-dropdown.public-user-dropdown .el-scrollbar__view {
  display: block !important;
  padding: 0 !important;
  background: #ffffff !important;
  background-image: none !important;
}

html body .user-account-dropdown.public-user-dropdown .user-menu-card,
html body .user-account-dropdown.public-user-dropdown .public-user-card {
  min-height: 52px !important;
  padding: 10px 12px !important;
  margin-bottom: 0 !important;
  background: #ffffff !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid #e5e7eb !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body .user-account-dropdown.public-user-dropdown .user-menu-card__avatar,
html body .user-account-dropdown.public-user-dropdown .public-user-card__avatar {
  width: 36px !important;
  height: 36px !important;
  background: linear-gradient(135deg, #ffb517, #ff7212) !important;
  border: 0 !important;
  border-radius: 50% !important;
}

html body .user-account-dropdown.public-user-dropdown .el-dropdown-menu__item {
  position: relative !important;
  min-height: 40px !important;
  gap: 10px !important;
  padding: 7px 10px !important;
  color: #3d4552 !important;
  -webkit-text-fill-color: #3d4552 !important;
  background: #ffffff !important;
  background-image: none !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

html body .user-account-dropdown.public-user-dropdown .el-dropdown-menu__item:not(.is-disabled):hover,
html body .user-account-dropdown.public-user-dropdown .el-dropdown-menu__item:not(.is-disabled):focus {
  color: #2b2118 !important;
  -webkit-text-fill-color: #2b2118 !important;
  background: #ffffff !important;
}

html body .user-account-dropdown.public-user-dropdown .el-dropdown-menu__item--divided,
html body .user-account-dropdown.public-user-dropdown .el-dropdown-menu__item.is-menu-group-start {
  margin-top: 0 !important;
  border-top: 1px solid #e5e7eb !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

html body .user-account-dropdown.public-user-dropdown .user-menu-main,
html body .user-account-dropdown.public-user-dropdown .public-user-menu-main {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  display: flex !important;
  width: auto !important;
  max-width: calc(100% - 20px) !important;
  align-items: center !important;
  gap: 10px !important;
  transform: translate(-50%, -50%) !important;
}

html body .user-account-dropdown.public-user-dropdown .user-menu-icon,
html body .user-account-dropdown.public-user-dropdown .public-user-menu-icon {
  display: inline !important;
  width: auto !important;
  height: auto !important;
  flex-shrink: 0 !important;
  color: #e95a00 !important;
  -webkit-text-fill-color: #e95a00 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 19px !important;
  line-height: 1 !important;
}

html body .user-account-dropdown.public-user-dropdown .user-menu-copy,
html body .user-account-dropdown.public-user-dropdown .public-user-menu-copy {
  display: flex !important;
  min-width: 0 !important;
  align-items: baseline !important;
  gap: 0 !important;
  line-height: 1.2 !important;
}

html body .user-account-dropdown.public-user-dropdown .user-menu-copy strong,
html body .user-account-dropdown.public-user-dropdown .public-user-menu-copy strong {
  flex-shrink: 0 !important;
  color: #2b2118 !important;
  -webkit-text-fill-color: #2b2118 !important;
  font-size: 17px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

html body .user-account-dropdown.public-user-dropdown .user-menu-copy small,
html body .user-account-dropdown.public-user-dropdown .public-user-menu-copy small {
  display: block !important;
  max-width: 0 !important;
  margin-left: 0 !important;
  color: #7f6f60 !important;
  -webkit-text-fill-color: #7f6f60 !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  transform: translateX(-4px) !important;
}

html body .user-account-dropdown.public-user-dropdown .el-dropdown-menu__item:not(.is-disabled):hover .user-menu-main,
html body .user-account-dropdown.public-user-dropdown .el-dropdown-menu__item:not(.is-disabled):focus .user-menu-main,
html body .user-account-dropdown.public-user-dropdown .el-dropdown-menu__item:not(.is-disabled):hover .public-user-menu-main,
html body .user-account-dropdown.public-user-dropdown .el-dropdown-menu__item:not(.is-disabled):focus .public-user-menu-main {
  left: 10px !important;
  transform: translate(0, -50%) !important;
}

html body .user-account-dropdown.public-user-dropdown .el-dropdown-menu__item:not(.is-disabled):hover .user-menu-copy strong,
html body .user-account-dropdown.public-user-dropdown .el-dropdown-menu__item:not(.is-disabled):focus .user-menu-copy strong,
html body .user-account-dropdown.public-user-dropdown .el-dropdown-menu__item:not(.is-disabled):hover .public-user-menu-copy strong,
html body .user-account-dropdown.public-user-dropdown .el-dropdown-menu__item:not(.is-disabled):focus .public-user-menu-copy strong {
  font-size: 11px !important;
  letter-spacing: -0.01em !important;
}

html body .user-account-dropdown.public-user-dropdown .el-dropdown-menu__item:not(.is-disabled):hover .user-menu-copy small,
html body .user-account-dropdown.public-user-dropdown .el-dropdown-menu__item:not(.is-disabled):focus .user-menu-copy small,
html body .user-account-dropdown.public-user-dropdown .el-dropdown-menu__item:not(.is-disabled):hover .public-user-menu-copy small,
html body .user-account-dropdown.public-user-dropdown .el-dropdown-menu__item:not(.is-disabled):focus .public-user-menu-copy small {
  max-width: 148px !important;
  margin-left: 8px !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
}

html body .user-account-dropdown.public-user-dropdown .user-menu-logout .user-menu-icon,
html body .user-account-dropdown.public-user-dropdown .user-menu-logout .user-menu-copy strong,
html body .user-account-dropdown.public-user-dropdown .user-menu-logout .public-user-menu-icon,
html body .user-account-dropdown.public-user-dropdown .user-menu-logout .public-user-menu-copy strong {
  color: #dc2626 !important;
  -webkit-text-fill-color: #dc2626 !important;
}
/* V28 - Membership page header must match the public homepage top navigation. */
html body #app .membership-page .membership-site-header,
html body #app .membership-page .membership-site-header.site-header {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  z-index: 1000 !important;
  display: flex !important;
  justify-content: center !important;
  padding: max(clamp(14px, 2.2vh, 22px), env(safe-area-inset-top, 0px)) max(clamp(16px, 3vw, 28px), env(safe-area-inset-right, 0px)) 0 max(clamp(16px, 3vw, 28px), env(safe-area-inset-left, 0px)) !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body #app .membership-page .membership-topbar,
html body #app .membership-page .membership-topbar.site-header__capsule,
html body #app .membership-page .membership-topbar.is-scrolled {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 0 !important;
  width: min(1280px, calc(100% - 32px)) !important;
  height: 56px !important;
  padding: 0 clamp(16px, 2.2vw, 24px) !important;
  overflow: visible !important;
  background: rgba(255, 255, 255, 0.94) !important;
  background-image: none !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
}

html body #app .membership-page .membership-topbar.is-scrolled {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
  transform: translateY(-1px) !important;
}

html body #app .membership-page .membership-brand-zone,
html body #app .membership-page .site-header__brand-zone {
  display: inline-flex !important;
  flex-shrink: 0 !important;
  align-items: center !important;
  min-width: 0 !important;
}

html body #app .membership-page .membership-brand .brand-logo,
html body #app .membership-page .site-header .brand-logo {
  height: 26px !important;
  max-width: 128px !important;
  margin-top: 2px !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: grayscale(1) brightness(0.36) contrast(1.15) !important;
}

html body #app .membership-page .membership-site-nav,
html body #app .membership-page .membership-site-nav.site-nav {
  position: relative !important;
  z-index: 3 !important;
  display: flex !important;
  flex-shrink: 1 !important;
  gap: 0 !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  padding: 0 clamp(20px, 3.5vw, 56px) !important;
  overflow: visible !important;
  scrollbar-width: none !important;
}

html body #app .membership-page .membership-site-nav .site-nav__cluster {
  display: inline-flex !important;
  flex-shrink: 0 !important;
  gap: clamp(16px, 2.2vw, 28px) !important;
  align-items: center !important;
}

html body #app .membership-page .membership-site-nav__divider,
html body #app .membership-page .site-nav__divider,
html body #app .membership-page .membership-site-nav__brand-divider,
html body #app .membership-page .site-header__zone-divider {
  width: 1px !important;
  height: 20px !important;
  background: rgba(0, 0, 0, 0.1) !important;
}

html body #app .membership-page .membership-site-nav__brand-divider,
html body #app .membership-page .site-header__zone-divider {
  margin: 0 clamp(14px, 1.8vw, 22px) 0 clamp(8px, 1vw, 12px) !important;
}

html body #app .membership-page .membership-site-nav__slash,
html body #app .membership-page .site-nav__slash {
  color: rgba(0, 0, 0, 0.18) !important;
}

html body #app .membership-page .membership-site-nav button,
html body #app .membership-page .membership-site-nav .site-nav__item,
html body #app .membership-page .membership-site-nav .site-nav__item-label {
  height: 34px !important;
  min-height: 0 !important;
  padding: 0 12px !important;
  color: rgba(48, 55, 66, 0.9) !important;
  -webkit-text-fill-color: rgba(48, 55, 66, 0.9) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

html body #app .membership-page .membership-site-nav button:hover,
html body #app .membership-page .membership-site-nav button:focus-visible {
  color: rgba(48, 55, 66, 0.95) !important;
  -webkit-text-fill-color: rgba(48, 55, 66, 0.95) !important;
  background: rgba(0, 0, 0, 0.04) !important;
  transform: translateY(-1px) !important;
}

html body #app .membership-page .membership-user-btn,
html body #app .membership-page .membership-user-btn.nav-user-btn {
  max-width: 210px !important;
  min-height: 40px !important;
  padding: 5px 9px 5px 6px !important;
  color: rgba(80, 88, 102, 0.88) !important;
  -webkit-text-fill-color: rgba(80, 88, 102, 0.88) !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

html body #app .membership-page .membership-user-btn:hover,
html body #app .membership-page .membership-user-btn:focus-visible {
  background: rgba(0, 0, 0, 0.04) !important;
  transform: translateY(-1px) !important;
}

html body #app .membership-page .membership-user-copy strong,
html body #app .membership-page .nav-user-copy strong {
  color: rgba(80, 88, 102, 0.9) !important;
  -webkit-text-fill-color: rgba(80, 88, 102, 0.9) !important;
}

html body #app .membership-page .membership-user-copy small,
html body #app .membership-page .nav-user-copy small,
html body #app .membership-page .membership-user-chevron,
html body #app .membership-page .nav-user-chevron {
  color: rgba(120, 128, 142, 0.72) !important;
  -webkit-text-fill-color: rgba(120, 128, 142, 0.72) !important;
}

html body #app .membership-page .membership-main {
  padding-top: clamp(118px, 12vh, 142px) !important;
}
/* V29 - unify public dark cards with the warm footer graphite. */
:root {
  --warm-footer-dark: #252623;
  --warm-footer-dark-hover: #2f302b;
}

html body #app .home-page .home-plate--showcase,
html body #app .home-page .home-plate--steps,
html body #app .coming-soon-page .coming-soon-page__showcase,
html body #app .inspiration-mall .mall-community-entry,
html body #app .inspiration-app .intro-video,
html body #app .site-footer,
html body #app footer.site-footer,
html body .site-footer,
html body .site-footer::before,
html body .site-footer::after {
  background: var(--warm-footer-dark) !important;
  background-color: var(--warm-footer-dark) !important;
  background-image: none !important;
}

html body #app .inspiration-mall .mall-community-entry {
  border-color: var(--warm-footer-dark) !important;
  box-shadow: 0 14px 32px rgba(37, 38, 35, 0.16) !important;
}

html body #app .home-page .home-mobile-preview__hardware {
  background: linear-gradient(145deg, #343029, var(--warm-footer-dark) 42%, #3a352d) !important;
}

html body #app .home-page .home-mobile-preview__hardware::before {
  background: #1f201d !important;
}

html body #app .home-page .home-work-card__demo-video {
  background: var(--warm-footer-dark) !important;
}

/* Keep the Explore App entry as its own special dark card. */
html body #app .home-entry-card--explore {
  background: #24272d !important;
  background-color: #24272d !important;
  background-image: none !important;
}

html body #app .home-entry-card--explore:hover,
html body #app .home-entry-card--explore:focus-visible {
  background: #2f333b !important;
  background-color: #2f333b !important;
  background-image: none !important;
}
/* V30 - calm dual-device preview and keep mobile as a simple placeholder. */
html body #app .home-page .home-showcase__device--client {
  transform: rotateX(1.4deg) rotateY(-2.8deg) rotateZ(-0.45deg) !important;
}

html body #app .home-page .home-showcase__device--mobile {
  transform: rotateX(1.4deg) rotateY(3.4deg) rotateZ(0.8deg) !important;
}


html body #app .home-page .home-mobile-placeholder {
  width: min(224px, 100%) !important;
  filter: drop-shadow(0 20px 34px rgba(31, 35, 41, 0.18)) !important;
}

html body #app .home-page .home-mobile-placeholder__hardware {
  background: linear-gradient(145deg, #343029, var(--warm-footer-dark) 42%, #3a352d) !important;
  border-radius: 32px !important;
}

html body #app .home-page .home-mobile-placeholder__screen {
  min-height: 430px !important;
  background: linear-gradient(135deg, rgba(255, 107, 26, 0.08), transparent 36%), linear-gradient(180deg, #fffaf5 0%, #f5f6f8 100%) !important;
}
/* V31 - slightly narrow homepage work cards. */
html body #app .home-page .home-work-showcase {
  --home-work-cards-max: 1160px !important;
}

html body #app .home-page .home-work-showcase__band {
  width: min(var(--home-work-cards-max), 100%) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

html body #app .home-page .home-work-showcase__cards {
  gap: clamp(12px, 1vw, 16px) !important;
}
/* V32 - make homepage work-card button hover brighter, not darker. */
html body #app .home-work-card__download,
html body #app .home-work-card--plays .home-work-card__download {
  background: linear-gradient(135deg, #ff9a24, #ff6414) !important;
  background-color: #ff6414 !important;
  box-shadow: none !important;
}

html body #app .home-work-card__download:hover,
html body #app .home-work-card__download:focus-visible {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: linear-gradient(135deg, #ffb33d, #ff7a22) !important;
  background-color: #ff7a22 !important;
  box-shadow: none !important;
  transform: translateY(-1px) !important;
}

html body #app .home-work-card__download:active {
  background: linear-gradient(135deg, #ff8a1f, #e95a00) !important;
  background-color: #e95a00 !important;
  transform: translateY(0) !important;
}
/* V33 - make work-card media the primary content area. */
html body #app .home-page .home-work-card {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: clamp(5px, 0.62vw, 8px) !important;
  padding: clamp(9px, 0.82vw, 12px) !important;
}

html body #app .home-page .home-work-card__identity {
  gap: 7px !important;
  min-height: 24px !important;
}

html body #app .home-page .home-work-card__icon {
  width: 24px !important;
  height: 24px !important;
  font-size: 15px !important;
  border-radius: 6px !important;
}

html body #app .home-page .home-work-card h3 {
  font-size: 13px !important;
  line-height: 1.12 !important;
}

html body #app .home-page .home-work-card small {
  margin-top: 1px !important;
  font-size: 9px !important;
}

html body #app .home-page .home-work-card__preview {
  gap: 0 !important;
}

html body #app .home-page .home-work-card__media {
  aspect-ratio: 16 / 9.25 !important;
}

html body #app .home-page .home-work-card__switcher {
  position: absolute !important;
  bottom: 8px !important;
  left: 50% !important;
  z-index: 4 !important;
  gap: 6px !important;
  min-height: 18px !important;
  padding: 3px 8px !important;
  margin-top: 0 !important;
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(209, 216, 226, 0.68) !important;
  border-radius: 999px !important;
  transform: translateX(-50%) !important;
  backdrop-filter: blur(10px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.08) !important;
}

html body #app .home-page .home-work-card__switch-dot {
  width: 13px !important;
  height: 13px !important;
}

html body #app .home-page .home-work-card__switch-dot-core {
  width: 6px !important;
  height: 6px !important;
}

html body #app .home-page .home-work-card__switch-dot.is-active .home-work-card__switch-dot-core,
html body #app .home-page .home-work-card__switch-dot:hover .home-work-card__switch-dot-core {
  width: 18px !important;
}

html body #app .home-page .home-work-card__copy {
  gap: 3px !important;
}

html body #app .home-page .home-work-card__summary,
html body #app .home-page .home-work-card__detail {
  font-size: 11px !important;
  line-height: 1.35 !important;
}

html body #app .home-page .home-work-card__detail-row {
  gap: 6px !important;
  align-items: center !important;
}

html body #app .home-page .home-work-card__download {
  min-width: 78px !important;
  min-height: 32px !important;
  padding: 0 13px !important;
  font-size: 12px !important;
}

html body #app .home-page .home-work-card__frame-label {
  top: 8px !important;
  left: 8px !important;
  min-height: 22px !important;
  padding: 0 9px !important;
  font-size: 10px !important;
}
/* V34 - restore readable text on warm dark homepage sections. */
html body #app .home-page .home-plate--showcase,
html body #app .home-page .home-plate--steps {
  color: #f7ead9 !important;
}

html body #app .home-page .home-plate--showcase .home-block__title,
html body #app .home-page .home-plate--showcase .home-block__title *,
html body #app .home-page .home-plate--steps .home-block__title,
html body #app .home-page .home-plate--steps .home-block__title * {
  color: #f7ead9 !important;
  -webkit-text-fill-color: #f7ead9 !important;
  text-shadow: none !important;
}

html body #app .home-page .home-plate--showcase .home-block__lead,
html body #app .home-page .home-plate--showcase .home-block__lead *,
html body #app .home-page .home-plate--steps .home-block__lead,
html body #app .home-page .home-plate--steps .home-block__lead * {
  color: rgba(247, 234, 217, 0.68) !important;
  -webkit-text-fill-color: rgba(247, 234, 217, 0.68) !important;
}

html body #app .home-page .home-plate--showcase .home-block__eyebrow,
html body #app .home-page .home-plate--steps .home-block__eyebrow,
html body #app .home-page .home-plate--showcase .home-accent,
html body #app .home-page .home-plate--steps .home-accent {
  color: #ff6b1a !important;
  -webkit-text-fill-color: #ff6b1a !important;
}

html body #app .home-page .home-plate--steps .home-steps__row::before {
  opacity: 0.72 !important;
  background: linear-gradient(90deg, transparent, rgba(247, 234, 217, 0.34), transparent) !important;
}

html body #app .home-page .home-plate--steps .home-step {
  border-top-color: rgba(247, 234, 217, 0.18) !important;
}

html body #app .home-page .home-plate--steps .home-step h3 {
  color: #f7ead9 !important;
  -webkit-text-fill-color: #f7ead9 !important;
}

html body #app .home-page .home-plate--steps .home-step p {
  color: rgba(247, 234, 217, 0.6) !important;
  -webkit-text-fill-color: rgba(247, 234, 217, 0.6) !important;
}

html body #app .home-page .home-plate--steps .home-step__num,
html body #app .home-page .home-plate--steps .home-step:hover .home-step__num {
  color: #ff6b1a !important;
  -webkit-text-fill-color: #ff6b1a !important;
}
/* V35 - align work-card summary with CTA and keep switch dots below media. */
html body #app .home-page .home-work-card__preview {
  gap: 5px !important;
}

html body #app .home-page .home-work-card__media {
  aspect-ratio: 16 / 8.85 !important;
}

html body #app .home-page .home-work-card__switcher {
  position: static !important;
  z-index: 1 !important;
  gap: 6px !important;
  min-height: 14px !important;
  padding: 0 !important;
  margin-top: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body #app .home-page .home-work-card__switch-dot {
  width: 14px !important;
  height: 12px !important;
}

html body #app .home-page .home-work-card__switch-dot-core {
  width: 7px !important;
  height: 7px !important;
}

html body #app .home-page .home-work-card__switch-dot.is-active .home-work-card__switch-dot-core,
html body #app .home-page .home-work-card__switch-dot:hover .home-work-card__switch-dot-core {
  width: 22px !important;
}

html body #app .home-page .home-work-card__copy {
  display: block !important;
}

html body #app .home-page .home-work-card__detail-row {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: space-between !important;
}

html body #app .home-page .home-work-card__summary {
  flex: 1 !important;
  min-width: 0 !important;
}
/* V36 - remove abnormal full-width dark backgrounds from homepage flow/showcase sections. */
html body #app .home-page .home-plate--showcase,
html body #app .home-page .home-plate--steps {
  color: #2b2118 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

html body #app .home-page .home-plate--showcase .home-block__title,
html body #app .home-page .home-plate--showcase .home-block__title *,
html body #app .home-page .home-plate--steps .home-block__title,
html body #app .home-page .home-plate--steps .home-block__title * {
  color: #2b2118 !important;
  -webkit-text-fill-color: #2b2118 !important;
  text-shadow: none !important;
}

html body #app .home-page .home-plate--showcase .home-block__lead,
html body #app .home-page .home-plate--showcase .home-block__lead *,
html body #app .home-page .home-plate--steps .home-block__lead,
html body #app .home-page .home-plate--steps .home-block__lead * {
  color: #7f6f60 !important;
  -webkit-text-fill-color: #7f6f60 !important;
}

html body #app .home-page .home-plate--showcase .home-block__eyebrow,
html body #app .home-page .home-plate--steps .home-block__eyebrow,
html body #app .home-page .home-plate--showcase .home-accent,
html body #app .home-page .home-plate--steps .home-accent {
  color: #ff6b1a !important;
  -webkit-text-fill-color: #ff6b1a !important;
}

html body #app .home-page .home-plate--steps .home-steps__row::before {
  opacity: 0.78 !important;
  background: linear-gradient(90deg, transparent, rgba(255, 107, 26, 0.24), transparent) !important;
}

html body #app .home-page .home-plate--steps .home-step {
  border-top-color: rgba(255, 107, 26, 0.16) !important;
}

html body #app .home-page .home-plate--steps .home-step h3 {
  color: #252a31 !important;
  -webkit-text-fill-color: #252a31 !important;
}

html body #app .home-page .home-plate--steps .home-step p {
  color: #6c737d !important;
  -webkit-text-fill-color: #6c737d !important;
}
/* V37 - showcase devices sit flat by default; pointer hover supplies the only tilt. */
html body #app .home-page .home-showcase__device {
  transform: rotateX(var(--showcase-tilt-x, 0deg)) rotateY(var(--showcase-tilt-y, 0deg)) scale(var(--showcase-tilt-scale, 1)) !important;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html body #app .home-page .home-showcase__device--client,
html body #app .home-page .home-showcase__device--mobile {
  rotate: 0deg !important;
}

html body #app .home-page .home-mobile-placeholder {
  width: min(224px, 100%) !important;
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.34)) !important;
}

html body #app .home-page .home-mobile-placeholder::before {
  background: radial-gradient(ellipse, rgba(255, 107, 26, 0.1), transparent 66%) !important;
  filter: blur(20px) !important;
}

html body #app .home-page .home-mobile-placeholder__hardware {
  padding: 10px !important;
  background: linear-gradient(145deg, #30322f, #151614 42%, #242620) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  border-radius: 32px !important;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.04), inset 0 -14px 24px rgba(0, 0, 0, 0.36) !important;
}

html body #app .home-page .home-mobile-placeholder__screen {
  min-height: 430px !important;
  background: #030403 !important;
  border-radius: 25px !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 28px 60px rgba(255, 255, 255, 0.025) !important;
}

html body #app .home-page .home-mobile-placeholder__notch {
  background: #000 !important;
}

html body #app .home-page .home-mobile-placeholder__canvas {
  min-height: 374px !important;
  color: rgba(255, 255, 255, 0.82) !important;
  background: radial-gradient(circle at 50% 45%, rgba(255, 107, 26, 0.08), transparent 44%) !important;
  border: 0 !important;
  border-radius: 18px !important;
}

html body #app .home-page .home-mobile-placeholder__canvas strong {
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

html body #app .home-page .home-mobile-placeholder__canvas .material-symbols-outlined,
html body #app .home-page .home-mobile-placeholder__canvas small,
html body #app .home-page .home-mobile-placeholder__skeleton {
  display: none !important;
}

@media (max-width: 980px), (prefers-reduced-motion: reduce) {
  html body #app .home-page .home-showcase__device {
    transform: none !important;
  }
}
/* V38 - use the shared TiltedCard media interaction and improve phone-screen readability. */
html body #app .home-page .home-showcase__screenshot-slot.home-media-slot--tilted .home-media-slot__tilt-inner,
html body #app .home-page .home-showcase__phone-slot.home-media-slot--tilted .home-media-slot__tilt-inner {
  transition: transform 120ms ease-out !important;
}

html body #app .home-page .home-showcase__phone-slot {
  width: min(224px, 100%) !important;
  margin: 0 !important;
}

html body #app .home-page .home-showcase__phone-slot .home-media-slot__caption,
html body #app .home-page .home-showcase__phone-slot .home-media-slot__icon {
  display: none !important;
}

html body #app .home-page .home-showcase__phone-slot .home-media-slot__frame {
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body #app .home-page .home-showcase__phone-slot .home-media-slot__wireframe {
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

html body #app .home-page .home-mobile-placeholder {
  width: 100% !important;
}

html body #app .home-page .home-mobile-placeholder__canvas {
  color: #d8c7ad !important;
  background: radial-gradient(circle at 50% 45%, rgba(255, 107, 26, 0.14), transparent 44%), radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.035), transparent 58%) !important;
}

html body #app .home-page .home-mobile-placeholder__canvas strong {
  color: #d8c7ad !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  text-shadow: 0 0 18px rgba(255, 107, 26, 0.22) !important;
}
/* V39 - account header actions: membership is primary, home is neutral. */
html body #app .app-shell .header-actions {
  gap: 10px !important;
}


html body #app .app-shell .header-membership-btn.header-nav-btn,
html body #app .app-shell .header-membership-btn.header-nav-btn.el-button {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  min-height: 38px !important;
  padding: 0 16px !important;
  font-weight: 780 !important;
  background: #ffbd86 !important;
  background-color: #ffbd86 !important;
  background-image: none !important;
  border-color: #ff6b1a !important;
  box-shadow: 0 8px 20px rgba(255, 107, 26, 0.18) !important;
}

html body #app .app-shell .header-membership-btn.header-nav-btn:hover,
html body #app .app-shell .header-membership-btn.header-nav-btn:focus,
html body #app .app-shell .header-membership-btn.header-nav-btn.el-button:hover,
html body #app .app-shell .header-membership-btn.header-nav-btn.el-button:focus {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #ff7a24 !important;
  background-color: #ff7a24 !important;
  border-color: #ff7a24 !important;
  box-shadow: 0 10px 22px rgba(255, 107, 26, 0.22) !important;
  transform: translateY(-1px) !important;
}

html body #app .app-shell .header-membership-btn.header-nav-btn .header-nav-btn__icon,
html body #app .app-shell .header-membership-btn.header-nav-btn .header-nav-btn__label,
html body #app .app-shell .header-membership-btn.header-nav-btn:hover .header-nav-btn__icon,
html body #app .app-shell .header-membership-btn.header-nav-btn:focus .header-nav-btn__icon {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html body #app .app-shell .header-home-btn.el-button,
html body #app .app-shell .header-home-btn.el-button.el-button--primary {
  color: #252a31 !important;
  -webkit-text-fill-color: #252a31 !important;
  min-height: 38px !important;
  padding: 0 18px !important;
  font-weight: 760 !important;
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  border: 1px solid #dfe3e8 !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 20px rgba(31, 35, 41, 0.06) !important;
  transform: none !important;
}

html body #app .app-shell .header-home-btn.el-button:hover,
html body #app .app-shell .header-home-btn.el-button:focus,
html body #app .app-shell .header-home-btn.el-button.el-button--primary:hover,
html body #app .app-shell .header-home-btn.el-button.el-button--primary:focus {
  color: #252a31 !important;
  -webkit-text-fill-color: #252a31 !important;
  background: #f8f9fb !important;
  background-color: #f8f9fb !important;
  border-color: #cfd5dd !important;
  box-shadow: 0 10px 22px rgba(31, 35, 41, 0.08) !important;
  transform: translateY(-1px) !important;
}
/* V40 - Account center hub: use the same category stack as other user pages. */
html body #app .app-shell .account-center.console-hub {
  grid-template-columns: minmax(240px, 282px) minmax(0, 1fr) !important;
  column-gap: 24px !important;
  align-items: start !important;
}

html body #app .app-shell .account-center.console-hub > .console-context-panel {
  position: static !important;
  z-index: auto !important;
  grid-column: 1 !important;
  grid-row: auto !important;
  margin: 0 0 16px !important;
  padding: 28px !important;
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #dfe3e8 !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 32px rgba(31, 35, 41, 0.07) !important;
}

html body #app .app-shell .account-center.console-hub > .console-context-nav__item {
  position: relative !important;
  z-index: auto !important;
  grid-column: 1 !important;
  grid-row: auto !important;
  min-height: 64px !important;
  margin: 0 0 8px !important;
  padding: 10px 12px !important;
  color: #4f5660 !important;
  -webkit-text-fill-color: #4f5660 !important;
  background: #f7f8fa !important;
  background-image: none !important;
  border: 1px solid #e1e4e8 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  transform: none !important;
}

html body #app .app-shell .account-center.console-hub > .console-context-nav__item:hover,
html body #app .app-shell .account-center.console-hub > .console-context-nav__item.is-active {
  color: #252a31 !important;
  -webkit-text-fill-color: #252a31 !important;
  background: #fff3eb !important;
  background-image: none !important;
  border-color: rgba(255, 107, 26, 0.4) !important;
  box-shadow: none !important;
}

html body #app .app-shell .account-center.console-hub > .console-context-nav__item::before,
html body #app .app-shell .account-center.console-hub > .console-context-nav__item::after {
  display: none !important;
  content: none !important;
}

html body #app .app-shell .account-center.console-hub > .console-context-nav__item .material-symbols-outlined {
  color: #ff6b1a !important;
  -webkit-text-fill-color: #ff6b1a !important;
  background: #fff0e6 !important;
  background-image: none !important;
  border-color: rgba(255, 107, 26, 0.28) !important;
  box-shadow: none !important;
}

html body #app .app-shell .account-center.console-hub > .console-context-nav__item strong {
  color: #252a31 !important;
  -webkit-text-fill-color: #252a31 !important;
}

html body #app .app-shell .account-center.console-hub > .console-context-nav__item small {
  color: #68717d !important;
  -webkit-text-fill-color: #68717d !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 980px) {
  html body #app .app-shell .account-center.console-hub {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    grid-template-columns: 1fr !important;
  }

  html body #app .app-shell .account-center.console-hub > .console-context-panel,
  html body #app .app-shell .account-center.console-hub > .console-context-nav__item {
    width: 100% !important;
    margin: 0 !important;
  }
}
/* V41 - dual-device showcase: clearer phone text, wider spacing, and separate download entries. */
html body #app .home-page .home-showcase__device-stage {
  grid-template-columns: minmax(0, 1.32fr) minmax(230px, 0.48fr) !important;
  gap: clamp(48px, 6.4vw, 118px) !important;
  width: min(1320px, calc(100% - clamp(42px, 5vw, 84px))) !important;
}

html body #app .home-page .home-mobile-placeholder__canvas {
  color: #f4dfbd !important;
  background: radial-gradient(circle at 50% 45%, rgba(255, 107, 26, 0.22), transparent 46%), radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.07), transparent 58%) !important;
}

html body #app .home-page .home-mobile-placeholder__canvas strong {
  color: #f4dfbd !important;
  -webkit-text-fill-color: #f4dfbd !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  text-shadow: 0 0 18px rgba(255, 107, 26, 0.34), 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

html body #app .home-page .home-showcase__device-actions {
  display: flex !important;
  width: 100% !important;
  margin-top: clamp(18px, 2vw, 28px) !important;
}

html body #app .home-page .home-showcase__device-actions--client {
  justify-content: flex-start !important;
  padding-left: clamp(10px, 1.4vw, 18px) !important;
}

html body #app .home-page .home-showcase__device-actions--mobile {
  justify-content: center !important;
}

html body #app .home-page .home-showcase__download-link {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: linear-gradient(135deg, #ff9a24, #ff6414) !important;
  border: 0 !important;
  box-shadow: 0 14px 26px rgba(255, 107, 26, 0.18) !important;
}

html body #app .home-page .home-showcase__download-link:hover,
html body #app .home-page .home-showcase__download-link:focus-visible {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: linear-gradient(135deg, #ffb33d, #ff7a22) !important;
  box-shadow: 0 16px 30px rgba(255, 107, 26, 0.22) !important;
}

html body #app .home-page .home-showcase__qr-card {
  background: #fff !important;
  border-color: #dfe3e8 !important;
  box-shadow: 0 14px 28px rgba(31, 35, 41, 0.08) !important;
}

html body #app .home-page .home-showcase__qr-card strong {
  color: #252a31 !important;
  -webkit-text-fill-color: #252a31 !important;
}

html body #app .home-page .home-showcase__qr-card small {
  color: #68717d !important;
  -webkit-text-fill-color: #68717d !important;
}

@media (max-width: 980px) {
  html body #app .home-page .home-showcase__device-stage {
    grid-template-columns: 1fr !important;
    gap: 44px !important;
    width: min(760px, calc(100% - 32px)) !important;
  }

  html body #app .home-page .home-showcase__device-actions--client {
    justify-content: center !important;
    padding-left: 0 !important;
  }
}
/* V42 - refine dual-device entries and reduce oversized showcase shadows. */
html body #app .home-page .home-showcase__screenshot-slot .home-media-slot__frame {
  box-shadow: 0 18px 42px rgba(31, 35, 41, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}

html body #app .home-page .home-mobile-placeholder {
  filter: drop-shadow(0 16px 24px rgba(31, 35, 41, 0.24)) !important;
}

html body #app .home-page .home-mobile-placeholder::before {
  background: radial-gradient(ellipse, rgba(255, 107, 26, 0.075), transparent 62%) !important;
  filter: blur(14px) !important;
}

html body #app .home-page .home-showcase__download-link,
html body #app .home-page .home-showcase__qr-card {
  width: min(292px, 100%) !important;
  min-height: 76px !important;
  padding: 12px 14px !important;
  color: #252a31 !important;
  -webkit-text-fill-color: #252a31 !important;
  background: rgba(255, 255, 255, 0.94) !important;
  background-image: none !important;
  border: 1px solid #dfe3e8 !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 22px rgba(31, 35, 41, 0.08) !important;
}

html body #app .home-page .home-showcase__download-link {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 24px !important;
  gap: 12px !important;
  align-items: center !important;
}

html body #app .home-page .home-showcase__download-link:hover,
html body #app .home-page .home-showcase__download-link:focus-visible {
  color: #252a31 !important;
  -webkit-text-fill-color: #252a31 !important;
  background: #fff !important;
  border-color: rgba(255, 107, 26, 0.32) !important;
  box-shadow: 0 12px 26px rgba(31, 35, 41, 0.10) !important;
}

html body #app .home-page .home-showcase__action-icon {
  color: #ff6b1a !important;
  -webkit-text-fill-color: #ff6b1a !important;
  background: #fff2e8 !important;
  border-color: rgba(255, 107, 26, 0.22) !important;
}

html body #app .home-page .home-showcase__action-copy strong,
html body #app .home-page .home-showcase__qr-card strong {
  color: #252a31 !important;
  -webkit-text-fill-color: #252a31 !important;
}

html body #app .home-page .home-showcase__action-copy small,
html body #app .home-page .home-showcase__qr-card small {
  color: #68717d !important;
  -webkit-text-fill-color: #68717d !important;
}

html body #app .home-page .home-showcase__action-arrow {
  color: #ff6b1a !important;
  -webkit-text-fill-color: #ff6b1a !important;
}

html body #app .home-page .home-showcase__qr-card {
  grid-template-columns: 58px minmax(0, 1fr) !important;
}

html body #app .home-page .home-showcase__qr-placeholder {
  width: 58px !important;
  background: linear-gradient(135deg, rgba(255, 107, 26, 0.08), rgba(255, 255, 255, 0.9)), repeating-linear-gradient(90deg, transparent 0 7px, rgba(255, 107, 26, 0.12) 7px 8px), repeating-linear-gradient(0deg, transparent 0 7px, rgba(255, 107, 26, 0.12) 7px 8px) !important;
  border: 1px solid rgba(255, 107, 26, 0.18) !important;
  border-radius: 12px !important;
}
/* V43 - remove the orphan top border from the moved highlight cards. */
html body #app .home-page .home-highlights__grid,
html body #app .home-page .home-showcase__highlights .home-highlights__grid {
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body #app .home-page .home-highlights__grid::before,
html body #app .home-page .home-showcase__highlights .home-highlights__grid::before {
  display: none !important;
  content: none !important;
  background: transparent !important;
  animation: none !important;
}
/* V44 - final lock: the client download entry is a neutral card, not an orange CTA. */
html body #app .home-page a.home-showcase__download-link,
html body #app .home-page a.home-showcase__download-link:link,
html body #app .home-page a.home-showcase__download-link:visited,
html body #app .home-page a.home-showcase__download-link:hover,
html body #app .home-page a.home-showcase__download-link:focus,
html body #app .home-page a.home-showcase__download-link:focus-visible {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 24px !important;
  align-items: center !important;
  gap: 12px !important;
  width: min(292px, 100%) !important;
  min-height: 76px !important;
  padding: 12px 14px !important;
  color: #252a31 !important;
  -webkit-text-fill-color: #252a31 !important;
  text-decoration: none !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1px solid #dfe3e8 !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 22px rgba(31, 35, 41, 0.08) !important;
}

html body #app .home-page a.home-showcase__download-link:hover,
html body #app .home-page a.home-showcase__download-link:focus-visible {
  border-color: rgba(255, 107, 26, 0.32) !important;
  box-shadow: 0 12px 26px rgba(31, 35, 41, 0.10) !important;
  transform: translateY(-1px) !important;
}

html body #app .home-page a.home-showcase__download-link .home-showcase__action-icon.material-symbols-outlined {
  color: #ff6b1a !important;
  -webkit-text-fill-color: #ff6b1a !important;
  background: #fff2e8 !important;
  background-color: #fff2e8 !important;
  background-image: none !important;
  border: 1px solid rgba(255, 107, 26, 0.22) !important;
  box-shadow: none !important;
}

html body #app .home-page a.home-showcase__download-link .home-showcase__action-copy strong {
  color: #252a31 !important;
  -webkit-text-fill-color: #252a31 !important;
}

html body #app .home-page a.home-showcase__download-link .home-showcase__action-copy small {
  color: #68717d !important;
  -webkit-text-fill-color: #68717d !important;
}

html body #app .home-page a.home-showcase__download-link .home-showcase__action-arrow.material-symbols-outlined {
  color: #ff6b1a !important;
  -webkit-text-fill-color: #ff6b1a !important;
  background: transparent !important;
  background-image: none !important;
}/* V45 - give the dual-device preview headline more breathing room below the previous dark block. */
html body #app .home-page .home-plate--showcase {
  padding-top: clamp(84px, 8vw, 128px) !important;
}

@media (max-width: 760px) {
  html body #app .home-page .home-plate--showcase {
    padding-top: 64px !important;
  }
}
/* V46 - keep creator recruit CTA title white, overriding broad warm-theme text-fill rules. */
html body #app .home-page .home-creator-recruit-btn .home-creator-recruit-btn__title,
html body #app .home-page .home-creator-recruit-btn:hover .home-creator-recruit-btn__title,
html body #app .home-page .home-creator-recruit-btn:focus-visible .home-creator-recruit-btn__title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.45), 0 14px 30px rgba(0, 18, 72, 0.34) !important;
}
/* V47 - creator recruit CTA: default title is dark; hover title is white. */
html body #app .home-page .home-creator-recruit-btn .home-creator-recruit-btn__title {
  color: #20242b !important;
  -webkit-text-fill-color: #20242b !important;
  text-shadow: 0 2px 0 rgba(0, 44, 128, 0.22), 0 12px 28px rgba(0, 18, 72, 0.28) !important;
}

html body #app .home-page .home-creator-recruit-btn:hover .home-creator-recruit-btn__title,
html body #app .home-page .home-creator-recruit-btn:focus-visible .home-creator-recruit-btn__title,
html body #app .home-page .home-creator-recruit-btn.is-recruit-hovered .home-creator-recruit-btn__title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.45), 0 14px 30px rgba(0, 18, 72, 0.34) !important;
}
/* V49 - final clean orange native scrollbar override. */
html,
body,
#app,
#app * {
  scrollbar-color: #ffbd86 #fff3eb !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
#app::-webkit-scrollbar,
#app *::-webkit-scrollbar {
  width: 14px !important;
  height: 14px !important;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
#app::-webkit-scrollbar-track,
#app *::-webkit-scrollbar-track {
  background: #fff3eb !important;
  background-color: #fff3eb !important;
  background-image: none !important;
  border-radius: 999px !important;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
#app::-webkit-scrollbar-thumb,
#app *::-webkit-scrollbar-thumb {
  min-height: 72px !important;
  background: #ffbd86 !important;
  background-color: #ffbd86 !important;
  background-image: none !important;
  border: 4px solid #fff3eb !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
#app::-webkit-scrollbar-thumb:hover,
#app *::-webkit-scrollbar-thumb:hover {
  background: #ff6a1a !important;
  background-color: #ff6a1a !important;
  background-image: none !important;
}

html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:active,
#app::-webkit-scrollbar-thumb:active,
#app *::-webkit-scrollbar-thumb:active {
  background: #ff6418 !important;
  background-color: #ff6418 !important;
  background-image: none !important;
}

html body .el-scrollbar__bar .el-scrollbar__thumb,
html body #app .el-scrollbar__bar .el-scrollbar__thumb {
  background: #ffbd86 !important;
  background-color: #ffbd86 !important;
  opacity: 1 !important;
}

html body .el-scrollbar__bar .el-scrollbar__thumb:hover,
html body #app .el-scrollbar__bar .el-scrollbar__thumb:hover {
  background: #ff6a1a !important;
  background-color: #ff6a1a !important;
}
/* V50 - stop Chromium from auto-darkening scrollbar-color on hover; WebKit rules own the states. */
html,
body,
#app,
#app * {
  scrollbar-color: auto !important;
}

@supports (-moz-appearance: none) {
  html,
  body,
  #app,
  #app * {
    scrollbar-color: #ffbd86 #fff3eb !important;
  }
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
#app::-webkit-scrollbar,
#app *::-webkit-scrollbar {
  width: 14px !important;
  height: 14px !important;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
#app::-webkit-scrollbar-track,
#app *::-webkit-scrollbar-track {
  background: #fff3eb !important;
  background-color: #fff3eb !important;
  background-image: none !important;
  border-radius: 999px !important;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
#app::-webkit-scrollbar-thumb,
#app *::-webkit-scrollbar-thumb {
  min-height: 72px !important;
  background: #ffbd86 !important;
  background-color: #ffbd86 !important;
  background-image: none !important;
  border: 4px solid #fff3eb !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
#app::-webkit-scrollbar-thumb:hover,
#app *::-webkit-scrollbar-thumb:hover {
  background: #ff6a1a !important;
  background-color: #ff6a1a !important;
  background-image: none !important;
  border-color: #fff3eb !important;
  box-shadow: none !important;
}

html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:active,
#app::-webkit-scrollbar-thumb:active,
#app *::-webkit-scrollbar-thumb:active {
  background: #ff6418 !important;
  background-color: #ff6418 !important;
  background-image: none !important;
  border-color: #fff3eb !important;
  box-shadow: none !important;
}
/* V51 - keep mall cards soft, but restore left icons to the vivid brand orange. */
html body #app .inspiration-mall .mall-community-entry__icon,
html body #app .inspiration-mall .zone-banner__icon,
html body #app .inspiration-mall .mall-zone--game .zone-banner__icon,
html body #app .inspiration-mall .mall-zone--app .zone-banner__icon,
html body #app .inspiration-mall .zone-banner--plaza .zone-banner__icon {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #ff6414 !important;
  background-color: #ff6414 !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html body #app .inspiration-mall .mall-community-entry__icon *,
html body #app .inspiration-mall .zone-banner__icon *,
html body #app .inspiration-mall .mall-zone--game .zone-banner__icon *,
html body #app .inspiration-mall .mall-zone--app .zone-banner__icon *,
html body #app .inspiration-mall .zone-banner--plaza .zone-banner__icon * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
/* V52 - full ranking page light-surface contrast fix. */
html body #app .public-site .rank-full__title,
html body #app .public-site .rank-full__title.nexus-gradient-text {
  color: #20242b !important;
  -webkit-text-fill-color: #20242b !important;
  background: none !important;
  background-image: none !important;
}

html body #app .public-site .rank-full__lead,
html body #app .public-site .rank-full__name {
  color: #20242b !important;
  -webkit-text-fill-color: #20242b !important;
}

html body #app .public-site .rank-full__lead {
  color: #66717f !important;
  -webkit-text-fill-color: #66717f !important;
}

html body #app .public-site .rank-full__num,
html body #app .public-site .rank-full__stat,
html body #app .public-site .rank-full__empty,
html body #app .public-site .rank-full__tab:not(.active) {
  color: #9aa3af !important;
  -webkit-text-fill-color: #9aa3af !important;
}

html body #app .public-site .rank-full__tab {
  background: #f7f8fa !important;
  border-color: #dde2e8 !important;
}

html body #app .public-site .rank-full__tab:hover,
html body #app .public-site .rank-full__tab.active,
html body #app .public-site .rank-full__stat .material-symbols-outlined,
html body #app .public-site .rank-full__chev,
html body #app .public-site .back-link {
  color: #ff6414 !important;
  -webkit-text-fill-color: #ff6414 !important;
}

html body #app .public-site .rank-full__tab.active {
  background: #ffffff !important;
  border-color: #20242b !important;
}

html body #app .public-site .rank-full__row {
  border-top-color: #dde2e8 !important;
}

html body #app .public-site .rank-full__stat {
  background: #ffffff !important;
  border-color: #dde2e8 !important;
}
/* V53 - ranking stats: clear numbers, icon-only labels, view-like-favorite order. */
html body #app .public-site .rank-full__stat {
  min-width: 68px !important;
  gap: 6px !important;
  padding: 6px 10px !important;
  color: #20242b !important;
  -webkit-text-fill-color: #20242b !important;
  background: #ffffff !important;
  border-color: #dde2e8 !important;
}

html body #app .public-site .rank-full__stat-value {
  color: #20242b !important;
  -webkit-text-fill-color: #20242b !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
}

html body #app .public-site .rank-full__stat .material-symbols-outlined {
  color: #ff6414 !important;
  -webkit-text-fill-color: #ff6414 !important;
}
/* V54 - mall action text/icons use vivid brand orange, not deep orange. */
html body #app .inspiration-mall .rank-link,
html body #app .inspiration-mall .rank-link:hover,
html body #app .inspiration-mall .zone-banner__toggle,
html body #app .inspiration-mall .zone-banner__toggle:hover,
html body #app .inspiration-mall .zone-banner__toggle .material-symbols-outlined {
  color: #ff6414 !important;
  -webkit-text-fill-color: #ff6414 !important;
}

html body #app .inspiration-mall .zone-banner__toggle:hover {
  border-color: rgba(255, 100, 20, 0.38) !important;
}/* V55 - more nav dropdown: pure white bubble, no dark outline. */
html body .el-popper.site-nav-more-dropdown,
html body .el-popper.is-light.site-nav-more-dropdown,
html body .site-nav-more-dropdown {
  background: #ffffff !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: 0 14px 38px rgba(32, 37, 44, 0.12) !important;
}

html body .site-nav-more-dropdown .el-dropdown-menu,
html body .site-nav-more-dropdown .el-scrollbar,
html body .site-nav-more-dropdown .el-scrollbar__view {
  background: #ffffff !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body .el-popper.site-nav-more-dropdown .el-popper__arrow::before,
html body .el-popper.is-light.site-nav-more-dropdown .el-popper__arrow::before {
  background: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
}
