/* Customer light/dark surface remaps. Tokens live in design_tokens.css.
   Unlayered on purpose so remaps beat @layer utilities/components without !important.
   Prefer semantic tokens in component CSS over new remaps here. */

html.theme-dark body,
html.theme-dark body.bg-blue-100 {
  background-color: var(--color-page);
  color: var(--color-on-surface);
}

html.theme-dark .flash-banner--notice {
  background-color: var(--button-grey-bg, #3f4d69);
  color: var(--button-grey-fg, #ffffff);
}

html.theme-dark .door-access-package-banner {
  background-color: var(--chart-warning-fill, rgb(250 226 133 / 20%));
  border-color: color-mix(in srgb, var(--chart-warning, #fae285) 45%, transparent);
}

html.theme-dark .door-status-badge--available {
  background-color: var(--color-notice-surface, rgb(70 196 98 / 15%));
  color: var(--color-label-green, #46c462);
}

html.theme-dark .bg-white {
  background-color: var(--color-surface);
}

html.theme-dark .card:not(.card--purple):not(.card--yellow) {
  background-color: var(--color-surface) !important;
  color: var(--color-on-surface);
  box-shadow:
    0 0.25rem 0.75rem var(--color-overlay-soft),
    0 1px 1px 1px var(--color-border-subtle);
}

html.theme-dark .split-card,
html.theme-dark .split-card.bg-white {
  background-color: var(--color-surface) !important;
  color: var(--color-on-surface);
  box-shadow: var(--login-card-shadow, none);
}

html.theme-dark .split-card__right {
  background-color: var(--color-surface) !important;
  color: var(--color-on-surface);
}

html.theme-dark .input input,
html.theme-dark .input textarea,
html.theme-dark .input select {
  background-color: var(--color-surface-subtle) !important;
  background-image: none !important;
  color: var(--color-on-surface) !important;
  border-color: var(--color-border-subtle) !important;
}

html.theme-dark .input label {
  color: var(--color-on-surface);
}

html.theme-dark .input input::placeholder,
html.theme-dark .input textarea::placeholder,
html.theme-dark .input select::placeholder {
  color: var(--color-muted);
}

html.theme-dark .bg-blue-100 {
  background-color: var(--color-page);
}

html.theme-dark .bg-blue-50 {
  background-color: var(--color-surface-subtle) !important;
}

html.theme-dark .bg-blue-lighter {
  background-color: var(--bg-blue-lighter) !important;
}

html.theme-dark .bg-gray-50 {
  background-color: var(--color-surface-subtle);
}

html.theme-dark .bg-green-50 {
  background-color: var(--color-notice-surface);
}

html.theme-dark .bg-red-50 {
  background-color: var(--color-danger-surface);
}

html.theme-dark .hover\:bg-gray-50:hover {
  background-color: var(--color-overlay-soft);
}

html.theme-dark .hover\:bg-blue-200:hover {
  background-color: var(--own-results-add-card-bg-hover, #242b3d);
}

html.theme-dark .hover\:bg-red-50:hover {
  background-color: var(--color-danger-surface);
}

html.theme-dark .text-gray-900,
html.theme-dark .text-gray-800,
html.theme-dark .text-gray-700,
html.theme-dark .text-purple-950,
html.theme-dark .text-black {
  color: var(--color-on-surface);
}

html.theme-dark .text-gray-600,
html.theme-dark .text-gray-500 {
  color: var(--color-muted);
}

html.theme-dark .border-gray-200,
html.theme-dark .border-gray-300,
html.theme-dark .border-gray-400,
html.theme-dark .border-blue-200 {
  border-color: var(--color-border-subtle);
}

html.theme-dark .hover\:border-gray-400:hover {
  border-color: var(--color-muted);
}

html.theme-dark .border-red-300 {
  border-color: var(--color-alert-border);
}

html.theme-dark .text-red-800 {
  color: var(--color-alert-emphasis);
}

html.theme-dark .color-purple {
  color: var(--color-heading);
}

html.theme-dark .color-dark {
  color: var(--color-on-surface);
}

html.theme-dark .color-black {
  color: var(--color-on-surface);
}

html.theme-dark .text-black {
  color: var(--color-on-surface) !important;
}

html.theme-dark .nav-header--desktop {
  position: relative;
  background-color: var(--color-page);
  color: var(--color-on-surface);
  /* Full-width hairline above logo/logotype backgrounds (inset shadow was covered by them). */
  box-shadow: none;
  border-bottom: none;
  width: 100%;
  max-width: none;
}

html.theme-dark .nav-header--desktop::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: var(--color-border-subtle);
  pointer-events: none;
  z-index: 2;
}

html.theme-dark .nav-header--desktop .logo-container {
  background-color: var(--color-page);
}

html.theme-dark .nav-header--mobile {
  background-color: var(--color-page);
  color: var(--color-on-surface);
}

html.theme-dark .nav-header--mobile .nav-header__container {
  background-color: transparent;
}

html.theme-dark .mobile-hamburger-circle {
  background-color: var(--button-grey-bg, #3f4d69);
}

html.theme-dark .mobile-hamburger-circle .nav-toggle::before,
html.theme-dark .mobile-hamburger-circle .nav-toggle::after,
html.theme-dark .mobile-hamburger-circle .nav-toggle__inner {
  background-color: var(--color-on-surface, #ffffff);
}

html.theme-dark #user-top-chrome {
  background-color: var(--color-page);
  box-shadow: inset 0 -1px 0 var(--color-border-subtle);
  border-bottom: none;
  width: 100%;
  left: 0;
  right: 0;
}

html.theme-dark .nav-header--desktop .nav-header__links {
  /* Bottom hairline lives on the full-width header; drop the links-only top rule. */
  border-top-color: transparent;
}

html.theme-dark .nav-header__logo-symbol,
html.theme-dark .nav-header__logo-symbol.bg-purple-950 {
  background: var(--color-page);
}

html.theme-dark .nav-header__logotype {
  background: var(--color-page);
}

.repurchase-graph {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.repurchase-graph--dark {
  display: none;
}

html.theme-dark .repurchase-graph--light {
  display: none;
}

html.theme-dark .repurchase-graph--dark {
  display: block;
}

.site-wrapper__footer .footer-logo--dark {
  display: none;
}

html.theme-dark .nav-header__logotype-img {
  filter: brightness(0) invert(1);
}

html.theme-dark .site-wrapper__footer .footer-logo--light {
  display: none;
}

html.theme-dark .site-wrapper__footer .footer-logo--dark {
  display: block;
}

html.theme-dark #left-links a:not(.nav-link--external).nav-item-selected-gradient {
  background: linear-gradient(
    121.92deg,
    var(--nav-item-selected-start) -1.88%,
    var(--nav-item-selected-end) 89.66%
  );
  border-bottom: 4px solid var(--bodymaja, #5696dc);
}

html.theme-dark .mobile-menu-panel > div.flex a.nav-item-selected-gradient {
  background: linear-gradient(
    121.92deg,
    var(--nav-item-selected-start) -1.88%,
    var(--nav-item-selected-end) 89.66%
  );
}

html.theme-dark .nav-header--desktop .nav-link__icon,
html.theme-dark .nav-header--desktop .nav-link__arrow,
html.theme-dark .nav-header--desktop .nav-link__arrow-icon,
html.theme-dark .nav-header--mobile .nav-link__icon,
html.theme-dark #user-top-chrome .nav-link__icon,
html.theme-dark #left-links .nav-menu-item__icon,
html.theme-dark .nav-menu-item__icon,
html.theme-dark .mobile-menu__item-icon,
html.theme-dark .mobile-menu__language-icon {
  color: var(--bodymaja, #5696dc);
}

html.theme-dark .menu-measurement-info,
html.theme-dark .menu-measurement-info strong {
  color: var(--color-muted, #c0c5d3);
}

html.theme-dark .menu-measurement-link,
html.theme-dark .menu-measurement-link-separator {
  color: var(--bodymaja, #5696dc);
}

html.theme-dark .menu-measurement-btn {
  background: var(--login-button-bg);
  color: var(--color-on-surface, #ffffff);
}

html.theme-dark .menu-measurement-btn:hover {
  background: var(--login-button-bg-hover);
  opacity: 1;
}

html.theme-dark .measurement-notice__open-door {
  background: var(--login-button-bg) !important;
  color: var(--color-on-surface, #ffffff);
}

html.theme-dark .measurement-notice__open-door:hover {
  background: var(--login-button-bg-hover) !important;
}

/* Dark-only: language trigger matches dropdown panel + item hover surfaces. */
html.theme-dark .navigation-list__link--dropdown > .nav-link__content.button.button--grey {
  height: 1.5rem;
  min-width: auto;
  padding: 0 8px;
  gap: 8px;
  border-radius: var(--radius-md, 8px);
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1.5rem;
  letter-spacing: 0.005rem;
  background-color: var(--color-surface, #141924);
  color: var(--color-on-surface, #ffffff);
}

html.theme-dark .navigation-list__link--dropdown > .nav-link__content.button.button--grey:hover {
  background-color: var(--own-results-add-card-bg-hover, #242b3d);
  color: var(--color-on-surface, #ffffff);
}

html.theme-dark .navigation-list__link--dropdown > .nav-link__content.button.button--grey .nav-link__label {
  color: inherit;
}

html.theme-dark .navigation-list__link--dropdown > .nav-link__content.button.button--grey .nav-link__icon,
html.theme-dark .navigation-list__link--dropdown > .nav-link__content.button.button--grey .nav-link__arrow,
html.theme-dark .navigation-list__link--dropdown > .nav-link__content.button.button--grey .nav-link__arrow-icon {
  color: var(--bodymaja, #5696dc);
}

html.theme-dark .navigation-list__link--dropdown > .nav-link__content.button.button--grey .nav-link__arrow {
  margin-inline-start: 0;
}

html.theme-dark .logo-container,
html.theme-dark [data-controller="user--navigation"] #left-links {
  background-color: var(--color-page);
}

html.theme-dark .nav-header__logotype-img--light {
  display: none;
}

html.theme-dark .nav-header__logotype-img--dark {
  display: block;
}

html.theme-dark .header:before,
html.theme-dark .header:after {
  background-color: var(--header-banner);
}

html.theme-dark .user-profile-popover,
html.theme-dark .mobile-menu-panel,
html.theme-dark .navigation-list__submenu--active {
  background-color: var(--color-surface);
  color: var(--color-on-surface);
  box-shadow: var(--popover-shadow);
}

html.theme-dark .mobile-menu-panel > div.flex a,
html.theme-dark .mobile-menu-panel > div.flex a .nav-link__label,
html.theme-dark .mobile-menu-panel > div.flex a:hover > span.nav-link__label,
html.theme-dark .mobile-menu__item,
html.theme-dark button.mobile-menu__item,
html.theme-dark .mobile-menu__item-label,
html.theme-dark .mobile-menu__language-label,
html.theme-dark .mobile-menu-panel .mobile-menu__locale-link,
html.theme-dark .mobile-menu-panel .mobile-menu__locale-link--active,
html.theme-dark .mobile-menu-panel a.mobile-menu__locale-link:hover,
html.theme-dark .mobile-menu-panel .mobile-menu__locale-separator {
  color: var(--color-on-surface);
}

html.theme-dark .mobile-menu-panel .nav-link__count-badge {
  box-sizing: border-box;
  align-self: center;
  background-color: var(--color-blue, #4bc1e5);
  color: var(--color-surface, #141924);
  height: 20px;
  min-height: 20px;
  max-height: 20px;
  min-width: 20px;
  padding: 0 8px;
  font-size: 12px;
  line-height: 20px;
  font-stretch: normal;
}

html.theme-dark .mobile-menu__separator {
  border-top: 1px solid var(--color-border-subtle);
  background-color: transparent;
}

html.theme-dark .mobile-menu__section-label {
  color: var(--color-muted);
}

html.theme-dark .user-profile-popover .mobile-menu__item:hover,
html.theme-dark .user-profile-popover .mobile-menu__item:focus-visible,
html.theme-dark .user-profile-popover button.mobile-menu__item:hover,
html.theme-dark .user-profile-popover button.mobile-menu__item:focus-visible,
html.theme-dark .navigation-list__submenu .nav-link--menuitem:hover,
html.theme-dark .navigation-list__submenu .nav-link--menuitem:focus-visible {
  background-color: var(--own-results-add-card-bg-hover, #242b3d);
}

html.theme-dark .navigation-list__submenu .nav-link--menuitem,
html.theme-dark .navigation-list__submenu .nav-link--menuitem .nav-link__label {
  color: var(--color-on-surface);
}

html.theme-dark .navigation-list__submenu .nav-link--menuitem:hover .nav-link__label,
html.theme-dark .navigation-list__submenu .nav-link--menuitem:focus-visible .nav-link__label {
  color: var(--color-muted);
}

html.theme-dark .navigation-list__submenu .nav-link__icon-img:not(.nav-list__filler-icon) {
  filter: brightness(0) invert(1);
}

html.theme-dark .own-results-add-card {
  background-color: var(--own-results-add-card-bg);
  color: var(--own-results-add-card-color);
}

html.theme-dark .own-results-add-card:hover {
  background-color: var(--own-results-add-card-hover-bg);
}

html.theme-dark .own-results-add-card:focus-visible {
  outline-color: var(--color-link);
}

html.theme-dark .header:before,
html.theme-dark .header:after {
  background-color: var(--header-band-bg, var(--color-page));
}

html.theme-dark .date-range-preset {
  background-color: var(--date-range-preset-bg);
  color: var(--date-range-preset-fg);
}

html.theme-dark .date-range-preset:hover {
  background-color: var(--own-results-add-card-bg-hover);
  color: var(--date-range-preset-fg);
}

html.theme-dark .date-range-preset--active {
  background-color: var(--date-range-preset-active-bg);
  color: var(--date-range-preset-active-fg);
  box-shadow: 0 0 0 1px var(--date-range-preset-active-ring);
}

html.theme-dark .order-history-period-filter__presets .date-range-preset--active {
  color: var(--color-link);
  border-color: var(--color-link);
  box-shadow: 0 2px 6px rgb(0 0 0 / 35%);
}

html.theme-dark .border-purple-950 {
  border-color: var(--color-heading);
}

html.theme-dark .hover\:text-purple-950:hover {
  color: var(--color-heading);
}

html.theme-dark .own-results-combobox-search {
  background-color: var(--color-surface-subtle);
  color: var(--color-on-surface);
  border-color: var(--color-border-subtle);
}

html.theme-dark .own-results-modal-heading-icon {
  color: var(--color-neutral-gray, #646464);
}

html.theme-dark .own-results-filter-section-title {
  color: var(--color-link);
}

html.theme-dark .laboratory-test-circle-chart__percent {
  color: var(--color-on-surface);
}

html.theme-dark .dashboard-tab-button.text-blue-600,
html.theme-dark .dashboard-tab-button.hover\:text-blue-600:hover {
  color: var(--color-link);
}

html.theme-dark .dashboard-tab-button.border-blue-600 {
  border-color: var(--color-link);
}

html.theme-dark .dashboard-tab-button.text-blue-500 {
  color: color-mix(in srgb, var(--color-link) 70%, var(--color-muted));
}

/* Measurement sessions: card surfaces, shadows, order-select chrome */
html.theme-dark .shadow,
html.theme-dark .shadow-sm,
html.theme-dark .shadow-md,
html.theme-dark .shadow-lg {
  box-shadow: var(--popover-shadow);
}

html.theme-dark .order-select-container,
html.theme-dark .inbody-score-card,
html.theme-dark .result-card,
html.theme-dark .overview-card {
  box-shadow: var(--popover-shadow);
}

html.theme-dark .order-select-container {
  background-color: var(--color-surface);
  color: var(--color-on-surface);
}

html.theme-dark .order-select-container .dropdown-toggle {
  background-color: var(--color-surface);
  color: var(--color-on-surface);
  border-color: var(--color-border-subtle);
}

html.theme-dark .order-select-container .dropdown-item {
  background-color: var(--color-surface);
  color: var(--color-on-surface);
}

html.theme-dark .order-select-container .body-composition-order-select__section-link,
html.theme-dark .order-select-container .body-composition-order-select__text-button {
  color: var(--color-link);
}

html.theme-dark .order-select-container .body-composition-order-select__section-link:hover,
html.theme-dark .order-select-container .body-composition-order-select__text-button:hover {
  color: var(--bodymaja, #5696dc);
}

html.theme-dark .order-select-container .body-composition-order-select__section-link:focus,
html.theme-dark .order-select-container .body-composition-order-select__text-button:focus {
  outline-color: var(--color-link);
}

html.theme-dark .inbody-score-card,
html.theme-dark .result-card__content,
html.theme-dark .result-card__title-block,
html.theme-dark .result-card__chart-block,
html.theme-dark .result-card__details-panel,
html.theme-dark .overview-card__content,
html.theme-dark .overview-card__inner {
  background-color: var(--color-surface);
  color: var(--color-on-surface);
}

html.theme-dark .bg-\[\#E0F0EB\] {
  background-color: var(--color-surface-subtle);
}

/* Change-from-previous chips and range previous-value pills */
.result-text__change-from-previous,
.range-chart__change-from-previous,
.bp-change-from-previous {
  background-color: var(--result-change-chip-bg, #f3f4f7);
  border: 0.8px solid var(--result-change-chip-border, #e0e2e9);
  color: var(--result-change-chip-fg, #39235d);
  font-weight: 600;
}

.range-slider__previous-label,
.range-slider .marker-label--previous {
  background-color: var(--result-previous-chip-bg, var(--result-change-chip-bg, #f3f4f7));
  border: 0.8px solid var(--result-change-chip-border, #e0e2e9);
  color: var(--result-change-chip-fg, #39235d);
}

html.theme-dark .result-text__change-from-previous.text-purple-950,
html.theme-dark .range-chart__change-from-previous.text-purple-950,
html.theme-dark .result-text__change-from-previous,
html.theme-dark .range-chart__change-from-previous,
html.theme-dark .bp-change-from-previous,
html.theme-dark .bp-change-from-previous .text-purple-950,
html.theme-dark .bp-change-from-previous .bp-summary-change-label,
html.theme-dark .bp-change-from-previous .bp-summary-change-value,
html.theme-dark .range-slider__previous-label,
html.theme-dark .range-slider .marker-label--previous {
  color: var(--result-change-chip-fg, #c0c5d3);
}

html.theme-dark .bp-change-from-previous {
  border-color: transparent;
}

.result-card__show-more {
  color: var(--result-show-more-fg, #016d81);
}

html.theme-dark .result-card__show-more {
  background-color: var(--result-show-more-bg, rgb(255 255 255 / 8%));
  border-top-color: var(--color-border-subtle);
  color: var(--result-show-more-fg, #a8c5e6);
}

html.theme-dark .result-card__show-more p,
html.theme-dark .result-card__show-more span,
html.theme-dark .result-card__show-more .result-card__show-more-icon {
  color: var(--result-show-more-fg, #a8c5e6);
  stroke: var(--result-show-more-fg, #a8c5e6);
}

/* Range chart reference limits and bars: solid status green/red in dark mode */
html.theme-dark .range-slider__min,
html.theme-dark .range-slider__max,
html.theme-dark .range-slider .text-red-450,
html.theme-dark .range-slider .text-red-400,
html.theme-dark .range-slider .color-red-dark {
  color: var(--result-ref-label-red, #ea5858);
}

html.theme-dark .range-slider .text-green-700,
html.theme-dark .range-slider .text-green-600,
html.theme-dark .range-slider .text-green-500,
html.theme-dark .range-slider .color-green,
html.theme-dark .range-slider .color-green-dark {
  color: var(--result-ref-label-green, #46c462);
}

/* Status sentences render beside the chart, outside .range-slider. */
html.theme-dark .inline-icon-text.color-red-dark,
html.theme-dark .inline-icon-text.color-red-dark .inline-icon-text__icon,
html.theme-dark .result-text .text-red-600 {
  color: var(--chart-negative, #ea5858);
}

html.theme-dark .inline-icon-text.color-green-dark,
html.theme-dark .inline-icon-text.color-green-dark .inline-icon-text__icon,
html.theme-dark .result-text .text-green-500 {
  color: var(--chart-positive, #46c462);
}

/* Second green segment keeps legacy dark green (Puristusvoima / green-450). */
html.theme-dark .range-slider .text-green-450 {
  color: var(--result-range-bar-green-dark, #157f2c);
}

html.theme-dark .range-slider .bg-red,
html.theme-dark .range-slider .bg-red-400,
html.theme-dark .range-slider .bg-red-600,
html.theme-dark .range-slider__bar.bg-red {
  background-color: var(--result-range-bar-red, #ea5858);
}

html.theme-dark .range-slider .bg-green,
html.theme-dark .range-slider .bg-green-600,
html.theme-dark .range-slider .bg-green-500,
html.theme-dark .range-slider__bar.bg-green,
html.theme-dark .range-slider__midpoint-marker,
html.theme-dark .range-slider__green-midpoint-marker {
  background-color: var(--result-range-bar-green, #46c462);
}

html.theme-dark .range-slider .bg-green-450 {
  background-color: var(--result-range-bar-green-dark, #157f2c);
}

html.theme-dark .range-slider .bg-yellow-500,
html.theme-dark .range-slider .bg-yellow-600,
html.theme-dark .range-slider__recommendation {
  background-color: var(--result-range-bar-yellow, #e2b53f);
}

html.theme-dark .range-slider .text-yellow-700,
html.theme-dark .range-slider .text-yellow-600,
html.theme-dark .range-slider__recommendation,
html.theme-dark .range-slider__recommendation:after {
  color: var(--result-range-bar-yellow, #e2b53f);
}

/* Login notice icon strip uses --login-notice-icon-bg from design_tokens.
   .card surface/shadow tokens live on the shared .card rule (phlex + React pack). */

/* React lab-order leftover surfaces (hybrid until Phlex owns /orders/:id).
   Prefer tokens in React Sass; these catch CSS-module and leftover hardcodes. */
html.theme-dark .react-shell {
  color: var(--color-on-surface);
}

html.theme-dark .react-shell .card:not(.card--purple):not(.card--yellow),
html.theme-dark .react-shell .suggestion-item,
html.theme-dark .react-shell .notice {
  background-color: var(--color-surface) !important;
  color: var(--color-on-surface);
  box-shadow: var(--popover-shadow);
}

html.theme-dark .react-shell .split-card {
  background-color: var(--color-surface) !important;
  color: var(--color-on-surface);
  box-shadow: var(--login-card-shadow, none);
}

html.theme-dark .react-shell .suggestion-item__footer,
html.theme-dark .react-shell .select-order__footer,
html.theme-dark .react-shell .disabled-card,
html.theme-dark .react-shell .result-box__footer,
html.theme-dark .react-shell .result-box__footer-desktop,
html.theme-dark .react-shell .result-box__left--grey,
html.theme-dark .react-shell .result-box__right--grey,
html.theme-dark .react-shell .result-box__right--pending {
  background-color: var(--color-surface-subtle) !important;
  color: var(--color-on-surface);
}

html.theme-dark .react-shell .result-box__label,
html.theme-dark .react-shell .result-box__comparison,
html.theme-dark .react-shell .result-box__more-notice {
  color: var(--color-heading) !important;
}

html.theme-dark .react-shell .result-box__readmore {
  color: var(--result-show-more-fg, #a8c5e6) !important;
}

html.theme-dark .react-shell .result-box__comparison svg {
  stroke: var(--color-heading) !important;
}

html.theme-dark .react-shell .result-box__readmore svg {
  stroke: var(--result-show-more-fg, #a8c5e6) !important;
}

html.theme-dark .react-shell .result-box__value,
html.theme-dark .react-shell .result-box__statement,
html.theme-dark .react-shell .result-box__pending {
  color: var(--color-muted) !important;
}

html.theme-dark .react-shell .promotions-banner-container,
html.theme-dark .promotions-banner-container {
  background-color: var(--color-surface) !important;
  color: var(--color-on-surface);
}

html.theme-dark .promotions-banner-container .button.button--white,
html.theme-dark .promotions-banner-container .button.button--white_outlined {
  background: var(--login-button-bg);
  color: var(--color-on-surface, #ffffff);
  box-shadow: none;
}

html.theme-dark .promotions-banner-container .button.button--white:hover,
html.theme-dark .promotions-banner-container .button.button--white_outlined:hover {
  background: var(--login-button-bg-hover);
  color: var(--color-on-surface, #ffffff);
  opacity: 1;
}

html.theme-dark .blood-test-react-boot-overlay {
  background-color: var(--color-page);
  color: var(--color-on-surface);
}

html.theme-dark .page-header__heading {
  color: var(--color-heading) !important;
}

html.theme-dark .page-header__subheading {
  color: var(--color-muted) !important;
}

html.theme-dark .own-results-add-card__face {
  background-color: transparent !important;
  background-image: linear-gradient(
    var(--own-results-add-card-bg),
    var(--own-results-add-card-bg)
  ) !important;
}

html.theme-dark .own-results-add-card:hover .own-results-add-card__face {
  background-image: linear-gradient(
    var(--own-results-add-card-hover-bg),
    var(--own-results-add-card-hover-bg)
  ) !important;
}