/* TVOE.TV global light/dark theme layer.
 * Loaded for every layout and deliberately scoped to html[data-theme]. */

html[data-theme="light"] {
  color-scheme: light;
  --app-page: #ffffff;
  --app-surface: #ffffff;
  --app-surface-raised: #ffffff;
  --app-soft: #f7f9fc;
  --app-soft-strong: #eef3f8;
  --app-ink: #111827;
  --app-muted: #667085;
  --app-border: rgba(15, 23, 42, .09);
  --app-shadow: 0 18px 50px rgba(15, 23, 42, .08);
  --app-link: #087db3;
}

/* Central CAPTCHA surfaces shared by login, registration, recovery and feedback. */
.tvoetv-captcha {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 16px 0;
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 10px;
  border: 1px solid var(--app-border, #dfe5ec);
  border-radius: 12px;
  background: var(--app-soft, #f7f9fc);
  color: var(--app-ink, #111827);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.tvoetv-captcha:focus-within {
  border-color: var(--app-link, #087db3);
  box-shadow: 0 0 0 3px rgba(41, 182, 246, .16);
}

.tvoetv-captcha[data-captcha-state="error"] {
  border-color: rgba(229, 72, 77, .45);
}

.tvoetv-captcha--recaptcha-v3 {
  display: none;
}

.tvoetv-captcha--recaptcha-v3:is([data-captcha-state="loading"], [data-captcha-state="error"]) {
  display: grid;
}

.tvoetv-captcha__mount {
  width: max-content;
  max-width: 100%;
  min-width: 0;
  /* Provider widgets keep their own accessible controls, branding and theme.
     Narrow containers use the provider's official compact size, not scaling. */
}

.tvoetv-captcha__mount:empty {
  display: none;
}

.tvoetv-captcha__mount iframe {
  display: block;
  border: 0;
  /* The provider supplies its own light/dark theme. Do not inherit the page's
     color-scheme: it adds a bright browser bevel around the dark widget. */
  color-scheme: normal;
}

.tvoetv-captcha__status {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 78px;
  margin: 0;
  color: var(--app-muted, #667085);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  overflow-wrap: anywhere;
}

.tvoetv-captcha[data-captcha-state="loading"] .tvoetv-captcha__status::before {
  content: "";
  flex: 0 0 18px;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  border: 2px solid var(--app-border, #dfe5ec);
  border-top-color: var(--app-link, #087db3);
  border-radius: 50%;
  animation: tvoetv-captcha-loading .8s linear infinite;
}

.tvoetv-captcha__retry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 40px;
  padding: 9px 16px;
  border: 1px solid var(--app-border, #dfe5ec);
  border-radius: 10px;
  background: var(--app-surface, #fff);
  color: var(--app-link, #087db3);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  white-space: normal;
}

.tvoetv-captcha__retry:hover {
  border-color: var(--app-link, #087db3);
  background: var(--app-soft-strong, #eef3f8);
}

.tvoetv-captcha__retry:focus-visible {
  outline: 3px solid rgba(41, 182, 246, .45);
  outline-offset: 2px;
}

.tvoetv-captcha__retry:disabled {
  cursor: wait;
  opacity: .65;
}

.tvoetv-captcha :is(.tvoetv-captcha__status, .tvoetv-captcha__retry, .tvoetv-captcha__error)[hidden] {
  display: none !important;
}

@keyframes tvoetv-captcha-loading {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .tvoetv-captcha {
    transition: none;
  }

  .tvoetv-captcha[data-captcha-state="loading"] .tvoetv-captcha__status::before {
    animation: none;
  }
}

/* Override legacy styles.css: the provider's visible badge must not be hidden. */
html[data-theme] .grecaptcha-badge {
  display: block;
}

.tvoetv-captcha__error,
.auth-public-captcha-error {
  box-sizing: border-box;
  width: 100%;
  margin: 8px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(229, 72, 77, .35);
  border-radius: 10px;
  background: rgba(229, 72, 77, .08);
  color: #b52f35;
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.tvoetv-captcha > .tvoetv-captcha__error {
  margin: 0;
}

html[data-theme="dark"] :is(.tvoetv-captcha__error, .auth-public-captcha-error) {
  border-color: rgba(255, 159, 164, .38);
  background: rgba(229, 72, 77, .16);
  color: #ffabb0;
}

.auth-public-local-captcha {
  width: 100%;
  margin: 14px 0;
  padding: 13px 14px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  border: 1px solid rgba(8, 125, 179, .22);
  border-radius: 12px;
  background: rgba(41, 182, 246, .08);
  color: var(--app-ink, #101828);
}

.auth-public-local-captcha__icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(41, 182, 246, .14);
  color: #087db3;
}

.auth-public-local-captcha__copy {
  min-width: 0;
  display: grid;
  gap: 3px;
  color: var(--app-muted, #667085);
  font-size: 12px;
  line-height: 1.45;
}

.auth-public-local-captcha__copy strong {
  color: var(--app-ink, #101828);
  font-size: 13px;
}

html[data-theme="dark"] .auth-public-local-captcha {
  border-color: rgba(112, 210, 247, .28);
  background: rgba(41, 182, 246, .1);
}

html[data-theme="dark"] .auth-public-local-captcha__icon {
  color: #70d2f7;
}

.auth-modal-captcha-code {
  margin: 14px 0;
  display: grid;
  gap: 8px;
}

.auth-modal-captcha-code > :is(a, .tvoetv-captcha__native-reload) {
  display: block;
  width: max-content;
  max-width: 100%;
}

.tvoetv-captcha__native-reload {
  padding: 0;
  border: 0;
  border-radius: 11px;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
}

.tvoetv-captcha__native-reload img {
  display: block;
  max-width: 100%;
  height: auto;
}

.tvoetv-captcha__native-reload:focus-visible {
  outline: 3px solid #29b6f6;
  outline-offset: 3px;
}

.feedback-form-card .feedback-challenge__content {
  min-width: 0;
  overflow: visible;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --app-page: #081016;
  --app-surface: #0f1c26;
  --app-surface-raised: #16232d;
  --app-soft: #182936;
  --app-soft-strong: #212f3a;
  --app-ink: #f8fafc;
  --app-muted: #a7b1ba;
  --app-border: rgba(255, 255, 255, .1);
  --app-shadow: 0 18px 50px rgba(0, 0, 0, .28);
  --app-link: #55c7f4;
}

html[data-theme="light"] body {
  --body-bg: #ffffff;
  --body-text-color: #667085;
  --heading-color: #111827;
  --theme-bg: #ffffff;
  --theme-bg2: #ffffff;
  --theme-bg-light: #f7f9fc;
  --color-dark: #111827;
  --border-info-color: rgba(15, 23, 42, .12);
  --footer-bg: #f9f9f9;
  --footer-bg2: #f3f3f3;
  --footer-text-color: #667085;
  background: var(--app-page);
  color: var(--app-muted);
}

html[data-theme="dark"] body,
html[data-theme="dark"] body.theme-mode-variables {
  --body-bg: #081016;
  --body-text-color: #a7b1ba;
  --heading-color: #f8fafc;
  --theme-bg: #0f1c26;
  --theme-bg2: #16232d;
  --theme-bg-light: #182936;
  --color-dark: #f8fafc;
  --border-info-color: rgba(255, 255, 255, .1);
  --border-white-color: rgba(255, 255, 255, .1);
  --box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
  --box-shadow2: 0 14px 34px rgba(0, 0, 0, .32);
  --footer-bg: #0f1c26;
  --footer-bg2: #081016;
  --footer-text-color: #d5dce2;
  background: var(--app-page);
  color: var(--app-muted);
}

html[data-theme="dark"] body,
html[data-theme="dark"] button,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  color-scheme: dark;
}

html[data-theme="dark"] :is(h1, h2, h3, h4, h5, h6) {
  color: var(--app-ink);
}

html[data-theme="dark"] a:not(.theme-btn):not(.btn):not(.site-header__account) {
  color: var(--app-link);
}

html[data-theme="dark"] :is(input, select, textarea)::placeholder {
  color: #82909b;
  opacity: 1;
}

/* Header */
html[data-theme="dark"] {
  --site-header-ink: #f8fafc;
  --site-header-muted: #a7b1ba;
  --site-header-soft: #182936;
  --site-header-border: rgba(255, 255, 255, .1);
}

html[data-theme="dark"] .site-header {
  border-bottom-color: var(--app-border);
  background: rgba(15, 28, 38, .96);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}

html[data-theme="dark"] .site-header__link {
  color: #d5dce2;
}

html[data-theme="dark"] .site-header__link:hover,
html[data-theme="dark"] .site-header__link[aria-current="page"] {
  color: #70d2f7;
  background: var(--app-soft);
}

html[data-theme="dark"] :is(.site-header__theme-toggle, .site-header__language, .site-header__menu-toggle) {
  border-color: var(--app-border);
  background: var(--app-soft);
  color: var(--app-ink);
}

html[data-theme="dark"] .site-header__language select option {
  background: var(--app-surface);
  color: var(--app-ink);
}

@media (min-width: 992px) {
  html[data-theme="dark"] .site-header__nav {
    border: 0;
    background: transparent;
    box-shadow: none;
  }
}

@media (max-width: 991.98px) {
  html[data-theme="dark"] .site-header__nav {
    border-color: var(--app-border);
    background: var(--app-surface);
    box-shadow: var(--app-shadow);
  }
}

/* Shared cabinet tokens and surfaces */
html[data-theme="dark"] .account-shell,
html[data-theme="dark"] .billing-shell,
html[data-theme="dark"] .feedback-shell,
html[data-theme="dark"] .channel-catalog-shell,
html[data-theme="dark"] .playlist-editor-shell,
html[data-theme="dark"] .device-page {
  --account-accent: #29b6f6;
  --account-accent-strong: #55c7f4;
  --account-button: #087db3;
  --account-button-hover: #0a90c9;
  --account-ink: #f8fafc;
  --account-muted: #a7b1ba;
  --account-surface: #0f1c26;
  --account-soft: #182936;
  --account-border: rgba(255, 255, 255, .1);
  --account-success: #42c997;
  --account-shadow: 0 18px 50px rgba(0, 0, 0, .28);
  color: var(--account-ink);
}

html[data-theme="dark"] body.account-page,
html[data-theme="dark"] body.account-page .movie-area,
html[data-theme="dark"] body.feedback-page,
html[data-theme="dark"] body.feedback-page .movie-area,
html[data-theme="dark"] body.channel-list-page,
html[data-theme="dark"] body.channel-list-page .movie-area,
html[data-theme="dark"] body.playlist-editor-page,
html[data-theme="dark"] body.playlist-editor-page .movie-area,
html[data-theme="dark"] body.device-page-body,
html[data-theme="dark"] body.device-page-body .movie-area,
html[data-theme="dark"] body.billing-page,
html[data-theme="dark"] body.billing-page .movie-area {
  background: var(--app-page) !important;
}

html[data-theme="dark"] :is(
  .account-sidebar,
  .account-card,
  .account-key-panel,
  .account-balance-panel,
  .feedback-form-card,
  .feedback-methods-card,
  .channel-catalog-sidebar,
  .playlist-editor-sidebar,
  .playlist-editor-panel,
  .device-registration-card,
  .device-item,
  .billing-content,
  .billing-history-wrapper
) {
  border-color: var(--app-border) !important;
  background: var(--app-surface) !important;
  box-shadow: var(--app-shadow);
}

/* Layout-only containers must stay transparent; they are not visual cards. */
html[data-theme="dark"] :is(.account-main, .channel-catalog-main, .playlist-editor-main, .device-list-section) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] :is(
  .account-card-title,
  .account-pane-heading,
  .account-key-heading,
  .playlist-entry__heading,
  .feedback-section-heading,
  .channel-catalog-results__heading,
  .playlist-editor-panel__heading,
  .device-card-heading,
  .device-list-heading
) {
  border-color: var(--app-border) !important;
  color: var(--app-ink) !important;
}

html[data-theme="dark"] :is(
  .account-subtitle,
  .account-card-description,
  .account-nav-hint,
  .account-pane-kicker,
  .feedback-hero__main p,
  .feedback-method__copy small,
  .channel-catalog-card__category,
  .channel-catalog-results__count,
  .playlist-channel-copy small,
  .device-section-label,
  .device-summary-label
) {
  color: var(--app-muted) !important;
}

/* Account cabinet */
html[data-theme="dark"] .account-hero {
  border-color: rgba(85, 199, 244, .22);
  background:
    radial-gradient(circle at 92% 20%, rgba(41, 182, 246, .17), transparent 34%),
    linear-gradient(135deg, #0f1c26 0%, #132733 100%);
  box-shadow: var(--app-shadow);
}

html[data-theme="dark"] .account-loading-skeleton {
  background: var(--app-page) !important;
}

html[data-theme="dark"] :is(.account-skeleton-hero, .account-skeleton-sidebar, .account-skeleton-main) {
  border-color: var(--app-border);
  background: var(--app-surface) !important;
}

html[data-theme="dark"] :is(.account-skeleton-hero, .account-skeleton-sidebar, .account-skeleton-main) span,
html[data-theme="dark"] .account-card-loader > span {
  background: var(--app-soft-strong) !important;
}

html[data-theme="dark"] :is(.account-skeleton-hero, .account-skeleton-sidebar, .account-skeleton-main) span::after,
html[data-theme="dark"] .account-card-loader > span::after {
  background: linear-gradient(105deg, transparent 22%, rgba(255, 255, 255, .11) 45%, transparent 68%) !important;
}

html[data-theme="dark"] .account-nav .nav-link {
  color: #d5dce2 !important;
}

html[data-theme="dark"] .account-nav .nav-link:hover {
  background: var(--app-soft) !important;
}

html[data-theme="dark"] .account-nav .nav-link.active {
  border-color: rgba(41, 182, 246, .36) !important;
  background: rgba(41, 182, 246, .14) !important;
  color: #70d2f7 !important;
}

html[data-theme="dark"] :is(
  .account-id-value,
  .credential-value,
  .playlist-input,
  .playlist-pin-form__field input,
  .subscription-checklist-item,
  .subscription-connection-item,
  .subscription-package-chip,
  .stalker-metric,
  .stalker-device,
  .stalker-technical,
  .stalker-technical__item,
  .store-tile
) {
  border-color: var(--app-border) !important;
  background: var(--app-soft) !important;
  color: var(--app-ink) !important;
}

html[data-theme="dark"] .account-key-field .key-value {
  background: var(--app-soft) !important;
  color: #70d2f7 !important;
}

html[data-theme="dark"] .account-shell .playlist-input {
  border: 1px solid rgba(255, 255, 255, .09) !important;
  background: var(--app-surface-raised) !important;
  color: var(--app-ink) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .16) !important;
}

html[data-theme="dark"] .account-shell .playlist-input:focus {
  border-color: rgba(85, 199, 244, .62) !important;
  background: #142731 !important;
  box-shadow: 0 0 0 3px rgba(85, 199, 244, .14) !important;
}

html[data-theme="dark"] .subscription-status-line {
  background: rgba(66, 201, 151, .12) !important;
  color: #8ce2bf !important;
}

html[data-theme="dark"] .subscription-package-chip strong {
  color: #70d2f7 !important;
}

html[data-theme="dark"] .subscription-package-chip small {
  color: #a7b1ba !important;
}

html[data-theme="dark"] .account-nav-logout .nav-link {
  color: #ff8a90 !important;
}

html[data-theme="dark"] .account-profile-row {
  border-color: var(--app-border) !important;
}

html[data-theme="dark"] .account-profile-label {
  color: var(--app-muted) !important;
}

html[data-theme="dark"] .account-profile-value {
  color: var(--app-ink) !important;
}

html[data-theme="dark"] #countryForm #countrySelect {
  border-color: rgba(255, 255, 255, .18) !important;
  background-color: var(--app-soft) !important;
  color: var(--app-ink) !important;
  box-shadow: none !important;
  color-scheme: dark;
}

html[data-theme="dark"] #countryForm #countrySelect:focus {
  border-color: #55c7f4 !important;
  box-shadow: 0 0 0 3px rgba(85, 199, 244, .18) !important;
}

html[data-theme="dark"] #countryForm #countrySelect option {
  background: #182936;
  color: #f8fafc;
}

html[data-theme="dark"] :is(.playlist-pin-form__field input:focus, .playlist-pin-toggle:hover) {
  border-color: rgba(85, 199, 244, .48) !important;
  background: var(--app-surface-raised) !important;
}

/* These are layout wrappers, not additional cards. */
html[data-theme="dark"] :is(.account-key-field, .playlist-card, .device-pin-section) {
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] :is(.account-key-field, .playlist-card) {
  border: 0 !important;
}

html[data-theme="dark"] .device-pin-section {
  border-color: var(--app-border) !important;
}

html[data-theme="dark"] :is(.playlist-entry, .wisp-link-entry) {
  border-color: var(--app-border) !important;
  background: var(--app-soft) !important;
}

/* Activation and renewal module ships late inline light styles. */
html[data-theme="dark"] .account-card--activation .subscription-card {
  --c-border: var(--app-border);
  --c-gray: var(--app-muted);
  color: var(--app-ink) !important;
}

html[data-theme="dark"] .account-card--activation .sub-field > label,
html[data-theme="dark"] .account-card--activation :is(
  .tariff-head-left,
  .device-connection-title,
  .tariff-price,
  .period-title,
  .tariff-check,
  .card-check
) {
  color: var(--app-ink) !important;
}

html[data-theme="dark"] .account-card--activation :is(.device-card, .tariff-card, .period-card) {
  border-color: var(--app-border) !important;
  background: var(--app-surface) !important;
  color: var(--app-ink) !important;
}

html[data-theme="dark"] .account-card--activation :is(.tariff-head, .card-head) {
  border-color: var(--app-border) !important;
  background: var(--app-soft) !important;
  color: var(--app-ink) !important;
}

html[data-theme="dark"] .account-card--activation :is(
  .tariff-card.checked .tariff-head,
  .device-card.checked .card-head,
  .period-card.checked
) {
  border-color: rgba(41, 182, 246, .55) !important;
  background: rgba(41, 182, 246, .14) !important;
  color: #70d2f7 !important;
}

html[data-theme="dark"] .account-card--activation :is(.tariff-body, .card-content) {
  color: var(--app-muted) !important;
}

html[data-theme="dark"] .account-card--activation .device-connection-row {
  border-color: var(--app-border) !important;
}

html[data-theme="dark"] .account-card--activation :is(
  .device-connection-value,
  .tariff-duration,
  .subscription-selection-hint
) {
  color: var(--app-muted) !important;
}

html[data-theme="dark"] .account-card--activation :is(.tariff-check input, .card-check input) {
  border-color: rgba(255, 255, 255, .38) !important;
  background-color: transparent !important;
}

html[data-theme="dark"] .account-card--activation :is(.tariff-check input:checked, .card-check input:checked) {
  border-color: #29b6f6 !important;
  background-color: #29b6f6 !important;
}

html[data-theme="dark"] .stalker-overview {
  border-color: rgba(85, 199, 244, .25) !important;
  background: linear-gradient(135deg, #132733, #0f1c26) !important;
}

html[data-theme="dark"] .subscription-summary {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .stalker-overview.is-inactive {
  border-color: rgba(255, 255, 255, .1) !important;
  background: linear-gradient(135deg, #18252f, #0f1c26) !important;
}

html[data-theme="dark"] :is(.stalker-overview__icon, .playlist-entry__icon, .account-key-heading__icon) {
  background: rgba(41, 182, 246, .15) !important;
  color: #70d2f7 !important;
}

html[data-theme="dark"] :is(.sync-error-details, .account-empty-state--error) {
  border-color: rgba(255, 115, 119, .32) !important;
  background: rgba(229, 72, 77, .11) !important;
  color: #ffb3b6 !important;
}

html[data-theme="dark"] .sync-success-details {
  border-color: rgba(66, 201, 151, .3) !important;
  background: rgba(66, 201, 151, .1) !important;
  color: #8ce2bf !important;
}

html[data-theme="dark"] .playlist-pin-toggle__track {
  background: #344552 !important;
}

html[data-theme="dark"] .playlist-pin-toggle__track > span {
  background: #f8fafc !important;
}

/* Billing */
html[data-theme="dark"] .billing-shell {
  --billing-ink: #f8fafc;
  --billing-muted: #a7b1ba;
  --billing-border: rgba(255, 255, 255, .1);
  --billing-surface: #0f1c26;
  --billing-soft: #182936;
  --billing-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}

html[data-theme="dark"] .billing-overview {
  border-color: rgba(85, 199, 244, .22) !important;
  background:
    radial-gradient(circle at 94% 32%, rgba(41, 182, 246, .17), transparent 34%),
    linear-gradient(135deg, #0f1c26, #132733) !important;
}

html[data-theme="dark"] .billing-menu {
  border-color: var(--app-border) !important;
  background: var(--app-surface-raised) !important;
}

html[data-theme="dark"] .billing-overview__balance {
  border-color: var(--app-border) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .billing-menu-item {
  color: #d5dce2 !important;
}

html[data-theme="dark"] .billing-menu-item:hover:not(.billing-item-active) {
  background: var(--app-soft) !important;
}

html[data-theme="dark"] :is(
  .billing-shell .form-control,
  .billing-shell .form-select,
  .billing-shell input[type="text"],
  .billing-shell input[type="email"],
  .billing-shell input[type="number"],
  .billing-shell input[type="password"],
  .billing-shell textarea,
  .billing-shell select,
  .billing-shell .input-group-text,
  .billing-pay-fields,
  .billing-pay-step-start,
  .billing-preview-result,
  .billing-preview-result dl,
  .billing_modal_footer
) {
  border-color: var(--app-border) !important;
  background: var(--app-soft) !important;
  color: var(--app-ink) !important;
}

html[data-theme="dark"] :is(.billing-table, .billing-table tr, .billing-menu-content) {
  border-color: var(--app-border) !important;
  background: transparent !important;
  color: var(--app-ink) !important;
}

@media (max-width: 520px) {
  html[data-theme="dark"] :is(
    .transfer-card ~ .billing-history-wrapper,
    .billing-transaction-history
  ) {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

html[data-theme="dark"] .billing-shell .btn-white {
  border-color: var(--app-border) !important;
  background: var(--app-soft) !important;
  color: var(--app-ink) !important;
}

html[data-theme="dark"] .billing-shell .promo-feedback.is-error {
  background: rgba(229, 72, 77, .11) !important;
  color: #ffb3b6 !important;
}

html[data-theme="dark"] .billing-shell .promo-feedback.is-success {
  background: rgba(66, 201, 151, .1) !important;
  color: #8ce2bf !important;
}

/* Payment cards follow the dark surface; only provider marks keep a neutral island. */
html[data-theme="dark"] .billing-shell .billing-payment-item {
  border-color: var(--app-border) !important;
  background: var(--app-soft) !important;
  color: var(--app-ink) !important;
}

html[data-theme="dark"] .billing-shell .billing-payment-item:hover {
  border-color: rgba(85, 199, 244, .52) !important;
  background: var(--app-soft-strong) !important;
  box-shadow: 0 0 0 4px rgba(85, 199, 244, .1) !important;
}

html[data-theme="dark"] .billing-shell .billing-payment-item.selected,
html[data-theme="dark"] .billing-shell .billing-payment-item:has(input:checked) {
  border-color: #55c7f4 !important;
  background: rgba(41, 182, 246, .14) !important;
  box-shadow: 0 0 0 4px rgba(85, 199, 244, .12) !important;
}

html[data-theme="dark"] .billing-shell .billing-payment-item:has(.paymentSelect:focus-visible) {
  outline: 3px solid #70d2f7;
  outline-offset: 3px;
}

html[data-theme="dark"] .billing-shell .billing-payment-item .payment__desc {
  color: var(--app-ink) !important;
}

html[data-theme="dark"] .billing-shell .billing-payment-item img {
  box-sizing: border-box;
  padding: 0;
  border-radius: 0;
  background: transparent;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .7)) drop-shadow(0 0 10px rgba(255, 255, 255, .12)) !important;
}

html[data-theme="dark"] .billing-shell .billing-payment-item .billing-preview-badge {
  border-color: rgba(112, 210, 247, .32);
  background: rgba(41, 182, 246, .14);
  color: #8bdcff;
}

/* Channel catalogue */
html[data-theme="dark"] .channel-catalog-hero,
html[data-theme="dark"] .playlist-editor-hero,
html[data-theme="dark"] .feedback-hero {
  border-color: rgba(85, 199, 244, .22) !important;
  background:
    radial-gradient(circle at 93% 25%, rgba(41, 182, 246, .18), transparent 35%),
    linear-gradient(135deg, #0f1c26, #132733) !important;
  box-shadow: var(--app-shadow);
}

html[data-theme="dark"] :is(.channel-catalog-summary, .playlist-editor-hero__summary, .feedback-hero__note) {
  border-color: var(--app-border) !important;
  background: var(--app-surface-raised) !important;
}

html[data-theme="dark"] :is(.channel-catalog-metric, .playlist-editor-metric) {
  background: var(--app-soft) !important;
  color: var(--app-ink) !important;
}

html[data-theme="dark"] .channel-category-button {
  color: #d5dce2 !important;
}

html[data-theme="dark"] .channel-category-button:hover {
  background: var(--app-soft) !important;
}

html[data-theme="dark"] .channel-category-button.is-active {
  background: rgba(41, 182, 246, .15) !important;
  color: #70d2f7 !important;
}

html[data-theme="dark"] :is(
  .channel-catalog-search input,
  .channel-catalog-control select,
  .channel-catalog-filter,
  .channel-catalog-notes > span,
  .channel-catalog-card,
  .channel-catalog-empty,
  .channel-catalog-more__previous
) {
  border-color: var(--app-border) !important;
  background: var(--app-soft) !important;
  color: var(--app-ink) !important;
}

html[data-theme="dark"] .channel-catalog-card:hover {
  border-color: rgba(85, 199, 244, .35) !important;
  background: var(--app-surface-raised) !important;
}

html[data-theme="dark"] .channel-catalog-search__clear {
  background: var(--app-soft-strong) !important;
  color: var(--app-muted) !important;
}

html[data-theme="dark"] .channel-catalog-error {
  border-color: rgba(229, 72, 77, .32) !important;
  background: rgba(229, 72, 77, .1) !important;
}

/* Keep logos on an unmodified light field; never invert images. */
html[data-theme="dark"] :is(.channel-catalog-card__media, .playlist-channel-media) {
  border-color: rgba(255, 255, 255, .14) !important;
  background: #f8fafc !important;
}

html[data-theme="dark"] :is(.channel-catalog-card__media img, .playlist-channel-media img, .billing-payment-item img) {
  filter: none !important;
}

/* Playlist editor */
html[data-theme="dark"] :is(.playlist-editor-state, .playlist-editor-category__icon, .playlist-editor-category__count, .playlist-editor-adult, .playlist-editor-bulk-actions button, .playlist-editor-load-more, .playlist-editor-secondary) {
  border-color: var(--app-border) !important;
  background: var(--app-soft) !important;
  color: var(--app-ink) !important;
}

html[data-theme="dark"] :is(.playlist-editor-state:hover:not(:disabled), .playlist-editor-category:hover, .playlist-editor-bulk-actions button:hover) {
  background: var(--app-soft-strong) !important;
}

html[data-theme="dark"] .playlist-editor-category.is-active {
  background: rgba(41, 182, 246, .15) !important;
  color: #70d2f7 !important;
}

html[data-theme="dark"] :is(.playlist-editor-search input, .playlist-editor-control select) {
  border-color: var(--app-border) !important;
  background: var(--app-soft) !important;
  color: var(--app-ink) !important;
}

html[data-theme="dark"] .playlist-channel-card {
  border-color: var(--app-border) !important;
  background: var(--app-surface-raised) !important;
}

html[data-theme="dark"] .playlist-channel-card.is-selected {
  border-color: rgba(85, 199, 244, .45) !important;
  background: rgba(41, 182, 246, .12) !important;
}

html[data-theme="dark"] :is(.playlist-channel-number, .playlist-channel-lock, .playlist-editor-empty i) {
  background: var(--app-soft) !important;
  color: var(--app-muted) !important;
}

html[data-theme="dark"] .playlist-channel-lock.is-locked {
  background: rgba(217, 119, 6, .16) !important;
  color: #fbbf74 !important;
}

html[data-theme="dark"] .playlist-editor-noscript {
  border-color: rgba(217, 119, 6, .3) !important;
  background: rgba(217, 119, 6, .12) !important;
  color: #fbbf74 !important;
}

/* Device management */
html[data-theme="dark"] :is(.device-hero-summary, .device-meta-grid > div, .device-empty-state) {
  border-color: var(--app-border) !important;
  background: var(--app-soft) !important;
  color: var(--app-ink) !important;
}

html[data-theme="dark"] :is(.device-page .form-control, .device-page input, .device-page select) {
  border-color: var(--app-border) !important;
  background: var(--app-soft) !important;
  color: var(--app-ink) !important;
}

html[data-theme="dark"] :is(.device-api-notice, .device-state-message, .device-provider-state) {
  border-color: rgba(85, 199, 244, .26) !important;
  background: rgba(41, 182, 246, .1) !important;
  color: #9cdef8 !important;
}

html[data-theme="dark"] :is(.device-api-notice.is-warning, .device-state-message.is-warning, .device-provider-state.is-warning) {
  border-color: rgba(217, 119, 6, .3) !important;
  background: rgba(217, 119, 6, .12) !important;
  color: #fbbf74 !important;
}

/* Feedback */
html[data-theme="dark"] .feedback-label,
html[data-theme="dark"] .feedback-method__copy strong,
html[data-theme="dark"] .feedback-question label strong,
html[data-theme="dark"] .feedback-question label strong span {
  color: var(--app-ink) !important;
}

html[data-theme="dark"] :is(
  .feedback-field input:not([type="file"]),
  .feedback-field select,
  .feedback-field textarea,
  .feedback-field input[type="file"]
) {
  border-color: var(--app-border) !important;
  background: var(--app-soft) !important;
  color: var(--app-ink) !important;
}

html[data-theme="dark"] :is(.feedback-captcha, .feedback-question, .feedback-method) {
  border-color: var(--app-border) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--app-ink) !important;
}

html[data-theme="dark"] :is(.feedback-field input:not([type="file"]), .feedback-field select, .feedback-field textarea):focus {
  border-color: rgba(85, 199, 244, .48) !important;
  background: var(--app-surface-raised) !important;
}

html[data-theme="dark"] .feedback-field input[type="file"]::file-selector-button {
  background: var(--app-soft-strong) !important;
  color: var(--app-ink) !important;
}

html[data-theme="dark"] :is(.feedback-method__icon, .feedback-method__icon--telegram) {
  background: rgba(41, 182, 246, .14) !important;
  color: #70d2f7 !important;
}

html[data-theme="dark"] .feedback-response .berrors {
  border-color: rgba(229, 72, 77, .3) !important;
  background: rgba(229, 72, 77, .1) !important;
  color: #ffb3b6 !important;
}

/* Global toast */
html[data-theme="dark"] .tvoetv-toast {
  --toast-surface: #16232d;
  background: var(--toast-surface);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .34);
  color: var(--app-ink);
}

html[data-theme="dark"] .tvoetv-toast.is-success {
  --toast-surface: #10271f;
}

html[data-theme="dark"] .tvoetv-toast.is-error {
  --toast-surface: #2a191d;
}

html[data-theme="dark"] .tvoetv-toast.is-warning {
  --toast-surface: #2b2415;
}

html[data-theme="dark"] .tvoetv-toast__close {
  color: var(--app-muted);
}

html[data-theme="dark"] .tvoetv-toast__close:hover {
  background: rgba(255, 255, 255, .08);
  color: var(--app-ink);
}

html[data-theme="dark"] #DLEPush .DLEPush-notification {
  border-color: var(--app-border) !important;
  background: var(--app-surface-raised) !important;
  color: var(--app-ink) !important;
}

/* Public landing-page tariff and onboarding cards. */
html[data-theme="dark"] :is(.pricing-card, .process-step) {
  border-color: var(--app-border) !important;
  background: var(--app-surface) !important;
  box-shadow: var(--app-shadow) !important;
  color: var(--app-muted) !important;
}

html[data-theme="dark"] .pricing-card.border-warning {
  border-color: rgba(255, 193, 7, .5) !important;
}

html[data-theme="dark"] :is(.pricing-card, .process-step) :is(h4, h5) {
  color: var(--app-ink) !important;
}

html[data-theme="dark"] :is(.pricing-price .period, .pricing-feature, .mr-note) {
  color: var(--app-muted) !important;
}

html[data-theme="dark"] .pricing-card .multiroom-link {
  color: #70d2f7 !important;
}

html[data-theme="dark"] .mr-toggle {
  --mr-bg: var(--app-soft);
  --mr-accent: #70d2f7;
  border-color: var(--app-border) !important;
  background: var(--mr-bg) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .28) !important;
}

html[data-theme="dark"] .mr-toggle__thumb {
  background: var(--app-surface-raised) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .24) !important;
}

html[data-theme="dark"] .mr-toggle__btn {
  background: transparent !important;
  color: var(--app-muted) !important;
}

html[data-theme="dark"] .mr-toggle__btn.is-active {
  color: #70d2f7 !important;
}

html[data-theme="dark"] .mr-toggle__btn:focus-visible {
  outline: 2px solid #70d2f7;
  outline-offset: 2px;
}

html[data-theme="dark"] .mr-toggle:has(> .mr-toggle__btn:only-of-type) .mr-toggle__thumb {
  width: calc(100% - .7rem);
  transform: translateX(.35rem) !important;
}

/* Generic DLE/Bootstrap surfaces that appear outside redesigned modules. */
html[data-theme="dark"] :is(.modal-content, .dropdown-menu, .nice-select .list) {
  border-color: var(--app-border);
  background: var(--app-surface);
  color: var(--app-ink);
}

html[data-theme="dark"] :is(.modal-header, .modal-footer, .dropdown-divider) {
  border-color: var(--app-border);
}

html[data-theme="dark"] :is(.dropdown-item, .nice-select .option) {
  color: var(--app-ink);
}

html[data-theme="dark"] :is(.dropdown-item:hover, .nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus) {
  background: var(--app-soft);
  color: #70d2f7;
}

html[data-theme="dark"] hr {
  border-color: var(--app-border);
  opacity: 1;
}

/* Guest account dialog: cabinet-style surface shared by every desktop skin. */
html.login-modal-open,
html.login-modal-open body {
  overflow: hidden;
}

#userPanelModal[hidden] {
  display: none !important;
}

#userPanelModal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100dvh;
  padding: clamp(12px, 3vw, 28px);
  overflow-x: hidden;
  overflow-y: auto;
  background: rgba(8, 16, 22, .58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease, background-color .2s ease;
}

html[data-theme="dark"] #userPanelModal {
  background: rgba(3, 9, 13, .76);
}

#userPanelModal.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#userPanelModal > .content-wrapper {
  position: relative;
  display: block;
  width: min(100%, 440px);
  margin: auto;
  transform: translateY(14px) scale(.985);
  transition: transform .22s ease;
  transition-delay: 0s;
}

#userPanelModal.open > .content-wrapper {
  transform: translateY(0) scale(1);
}

#userPanelModal .auth-wrap {
  width: 100%;
  padding: 30px;
  border: 1px solid var(--app-border);
  border-radius: 20px;
  background: var(--app-surface);
  box-shadow: var(--app-shadow);
  color: var(--app-muted);
}

#userPanelModal .auth-modal__heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin: 0 48px 24px 0;
}

#userPanelModal .auth-modal__heading-icon {
  display: inline-flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: rgba(41, 182, 246, .12);
  color: #087db3;
  font-size: 19px;
}

html[data-theme="dark"] #userPanelModal .auth-modal__heading-icon {
  color: #70d2f7;
}

#userPanelModal .auth-modal__heading h2 {
  margin: 0;
  color: var(--app-ink);
  font-size: 25px;
  font-weight: 820;
  letter-spacing: -.025em;
  line-height: 1.15;
}

#userPanelModal .auth-form,
#userPanelModal .auth-form form {
  width: 100%;
}

#userPanelModal .google-auth-login {
  width: 100%;
  margin: 0 0 18px;
}

#userPanelModal .google-auth-button {
  display: inline-flex;
  width: 100%;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 11px 16px;
  border: 1px solid rgba(15, 23, 42, .15);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(15, 23, 42, .06);
  color: #1f2937 !important;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease, transform .18s ease;
}

#userPanelModal .google-auth-button:hover {
  border-color: rgba(8, 125, 179, .38);
  background: #fafdff;
  box-shadow: 0 9px 20px rgba(15, 23, 42, .1);
  color: #111827 !important;
  transform: translateY(-1px);
}

#userPanelModal .google-auth-button:focus-visible {
  outline: 3px solid rgba(41, 182, 246, .3);
  outline-offset: 3px;
}

#userPanelModal .google-auth-button__icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
}

#userPanelModal .google-auth-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  margin: 17px 0 0;
  color: var(--app-muted);
  font-size: 12px;
  font-weight: 680;
  letter-spacing: .025em;
  line-height: 1;
}

#userPanelModal .google-auth-divider::before,
#userPanelModal .google-auth-divider::after {
  height: 1px;
  background: var(--app-border);
  content: "";
}

html[data-theme="dark"] #userPanelModal .google-auth-button {
  border-color: rgba(255, 255, 255, .16);
  background: #fff;
  color: #1f2937 !important;
}

html[data-theme="dark"] #userPanelModal .google-auth-button:hover {
  border-color: rgba(112, 210, 247, .52);
  background: #f7fbff;
  color: #111827 !important;
}

#userPanelModal .auth-form .form-group {
  margin: 0 0 16px;
}

#userPanelModal .auth-form label {
  display: block;
  margin: 0 0 7px;
  color: var(--app-ink);
  font-size: 14px;
  font-weight: 720;
  line-height: 1.35;
}

#userPanelModal .auth-form .form-control {
  width: 100%;
  min-height: 50px;
  padding: 12px 15px;
  border: 1px solid var(--app-border);
  border-radius: 12px;
  outline: 0;
  background: var(--app-soft);
  box-shadow: none;
  color: var(--app-ink);
  font-size: 16px;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

html[data-theme="dark"] #userPanelModal .auth-form .form-control {
  background: var(--app-surface-raised);
}

#userPanelModal .auth-form .form-control:focus {
  border-color: #29b6f6;
  background: var(--app-surface);
  box-shadow: 0 0 0 3px rgba(41, 182, 246, .22);
}

#userPanelModal .auth-form .auth-check {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 3px 0 0;
}

#userPanelModal .auth-form .form-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
}

#userPanelModal .auth-form .form-check-input {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid var(--app-border);
  border-radius: 6px;
  background-color: var(--app-soft);
  box-shadow: none;
  accent-color: #087db3;
}

#userPanelModal .auth-form .form-check-input:checked {
  border-color: #087db3;
  background-color: #087db3;
}

#userPanelModal .auth-form .form-check-input:focus-visible {
  outline: 3px solid rgba(41, 182, 246, .28);
  outline-offset: 2px;
}

#userPanelModal .auth-form .form-check-label {
  display: inline;
  margin: 0;
  color: var(--app-muted);
  font-weight: 600;
}

#userPanelModal .auth-check a,
#userPanelModal .auth-footer a {
  color: var(--app-link);
  font-weight: 700;
  text-decoration: none;
}

#userPanelModal .auth-check a:hover,
#userPanelModal .auth-footer a:hover {
  color: #29b6f6;
  text-decoration: underline;
}

#userPanelModal :is(.auth-check a, .auth-footer a, .auth-btn button):focus-visible {
  outline: 3px solid rgba(41, 182, 246, .3);
  outline-offset: 3px;
}

#userPanelModal #recaptchaContainer {
  max-width: 100%;
  margin-top: 14px;
  overflow: visible;
}

#userPanelModal #recaptchaContainer:empty {
  display: none;
}

#userPanelModal #recaptchaError {
  color: #c6363b !important;
  font-weight: 650;
}

html[data-theme="dark"] #userPanelModal #recaptchaError {
  color: #ff9fa4 !important;
}

#userPanelModal .auth-btn {
  margin-top: 22px;
}

#userPanelModal .auth-btn .theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 50px;
  padding: 12px 18px;
  border: 0;
  border-radius: 12px;
  background: #087db3 !important;
  box-shadow: 0 12px 24px rgba(8, 125, 179, .22);
  color: #fff !important;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: none;
  transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

#userPanelModal .auth-btn .theme-btn::before {
  display: none !important;
}

#userPanelModal .auth-btn .theme-btn:hover {
  background: #066a98 !important;
  box-shadow: 0 14px 28px rgba(8, 125, 179, .28);
  transform: translateY(-1px);
}

#userPanelModal .auth-footer p {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--app-border);
  color: var(--app-muted);
  font-size: 14px;
  line-height: 1.55;
}

#userPanelModal .content-wrapper .close {
  position: absolute;
  z-index: 2;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--app-border);
  border-radius: 12px;
  background: var(--app-soft);
  color: var(--app-muted);
  opacity: 1;
  transform: none;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}

#userPanelModal .content-wrapper .close::before,
#userPanelModal .content-wrapper .close::after {
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

#userPanelModal .content-wrapper .close:hover {
  border-color: rgba(229, 72, 77, .32);
  background: rgba(229, 72, 77, .1);
  color: #c6363b;
  transform: none;
}

html[data-theme="dark"] #userPanelModal .content-wrapper .close:hover {
  color: #ff9fa4;
}

#userPanelModal .content-wrapper .close:focus-visible {
  outline: 3px solid rgba(41, 182, 246, .3);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  #userPanelModal {
    align-items: flex-start;
    padding: 10px;
  }

  #userPanelModal > .content-wrapper {
    width: 100%;
  }

  #userPanelModal .auth-wrap {
    padding: 24px 18px 20px;
    border-radius: 18px;
  }

  #userPanelModal .auth-modal__heading {
    margin: 2px 44px 22px 0;
  }

  #userPanelModal .auth-modal__heading-icon {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
  }

  #userPanelModal .auth-modal__heading h2 {
    font-size: 22px;
  }

  #userPanelModal .content-wrapper .close {
    top: 12px;
    right: 12px;
  }

  #userPanelModal .auth-form .auth-check {
    align-items: flex-start;
    flex-direction: column;
    gap: 11px;
  }

  #userPanelModal .auth-btn {
    margin-top: 20px;
  }
}

/* Two-factor challenge shared by the main cabinet and dealer login. */
body.tvoetv-twofactor-open {
  overflow: hidden;
}

body.tvoetv-twofactor-open > .ui-widget-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  z-index: 2147483000 !important;
  background: rgba(3, 10, 15, .72) !important;
  opacity: 1 !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.dle-popup-twofactor.ui-dialog {
  position: fixed !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  box-sizing: border-box;
  width: min(calc(100vw - 24px), 500px) !important;
  max-width: 500px !important;
  max-height: calc(100vh - 24px) !important;
  max-height: calc(100dvh - 24px) !important;
  z-index: 2147483001 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--app-border, rgba(15, 23, 42, .12)) !important;
  border-radius: 24px !important;
  background: var(--app-surface, #fff) !important;
  color: var(--app-ink, #111827) !important;
  box-shadow: 0 28px 90px rgba(2, 8, 13, .36) !important;
  transform: translate(-50%, -50%) !important;
}

.dle-popup-twofactor .ui-dialog-titlebar {
  box-sizing: border-box;
  min-height: 0;
  margin: 0 !important;
  padding: 25px 28px 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--app-ink, #111827) !important;
  font-size: clamp(20px, 3vw, 24px) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  text-shadow: none !important;
}

.dle-popup-twofactor .ui-dialog-title {
  float: none;
  width: auto;
  margin: 0;
  color: inherit !important;
}

.dle-popup-twofactor .ui-dialog-titlebar-close {
  display: none !important;
}

.dle-popup-twofactor #twofactor.ui-dialog-content {
  box-sizing: border-box;
  width: 100% !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding: 14px 28px 4px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--app-muted, #667085) !important;
}

.tvoetv-twofactor-copy {
  margin: 0 0 21px;
  color: var(--app-muted, #667085) !important;
  font-size: 15px;
  line-height: 1.6;
}

.tvoetv-twofactor-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  margin: -1px !important;
  padding: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.tvoetv-twofactor-code {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 390px;
  margin: 0 auto;
}

.tvoetv-twofactor-code__digit,
.tvoetv-twofactor-code__digit:-webkit-autofill {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  aspect-ratio: 1 / 1;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--app-border, rgba(15, 23, 42, .13)) !important;
  border-radius: 14px !important;
  outline: 0 !important;
  background: var(--app-soft, #f7f9fc) !important;
  color: var(--app-ink, #111827) !important;
  caret-color: #149fd8 !important;
  -webkit-text-fill-color: var(--app-ink, #111827) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  text-align: center;
  font-family: inherit;
  font-size: clamp(22px, 5vw, 28px) !important;
  font-weight: 800;
  line-height: 1;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease, transform .16s ease;
}

.tvoetv-twofactor-code__digit:hover {
  border-color: rgba(20, 159, 216, .42) !important;
}

.tvoetv-twofactor-code__digit:focus {
  border-color: #149fd8 !important;
  background: var(--app-surface-raised, #fff) !important;
  box-shadow: 0 0 0 4px rgba(20, 159, 216, .18) !important;
  transform: translateY(-1px);
}

.tvoetv-twofactor-code__digit.is-invalid {
  border-color: #e5484d !important;
  box-shadow: 0 0 0 3px rgba(229, 72, 77, .12) !important;
}

.tvoetv-twofactor-code__digit:disabled {
  cursor: wait;
  opacity: .62 !important;
}

.tvoetv-twofactor-response {
  min-height: 0;
  margin: 0;
  color: #d13438;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}

.tvoetv-twofactor-response:not(:empty) {
  margin-top: 16px;
}

.dle-popup-twofactor .ui-dialog-buttonpane {
  box-sizing: border-box;
  margin: 20px 0 0 !important;
  padding: 0 28px 28px !important;
  border: 0 !important;
  background: transparent !important;
}

.dle-popup-twofactor .ui-dialog-buttonset {
  display: grid !important;
  float: none !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.dle-popup-twofactor .ui-dialog-buttonpane button {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  margin: 0 !important;
  padding: 11px 16px !important;
  border: 1px solid transparent !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, #149fd8, #087db3) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(8, 125, 179, .2) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-shadow: none !important;
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}

.dle-popup-twofactor .ui-dialog-buttonpane button:first-child {
  border-color: var(--app-border, rgba(15, 23, 42, .12)) !important;
  background: var(--app-soft, #f7f9fc) !important;
  color: var(--app-ink, #111827) !important;
  box-shadow: none !important;
}

.dle-popup-twofactor .ui-dialog-buttonpane button:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(8, 125, 179, .26) !important;
}

.dle-popup-twofactor .ui-dialog-buttonpane button:first-child:not(:disabled):hover {
  border-color: rgba(20, 159, 216, .36) !important;
  box-shadow: none !important;
}

.dle-popup-twofactor.is-busy .ui-dialog-buttonpane button,
.dle-popup-twofactor .ui-dialog-buttonpane button:disabled {
  cursor: wait;
  opacity: .58;
}

@media (max-width: 480px) {
  .dle-popup-twofactor.ui-dialog {
    width: calc(100vw - 20px) !important;
    border-radius: 19px !important;
  }

  .dle-popup-twofactor .ui-dialog-titlebar {
    padding: 21px 20px 0 !important;
  }

  .dle-popup-twofactor #twofactor.ui-dialog-content {
    padding: 12px 20px 2px !important;
  }

  .tvoetv-twofactor-copy {
    margin-bottom: 17px;
    font-size: 14px;
  }

  .tvoetv-twofactor-code {
    gap: 6px;
  }

  .tvoetv-twofactor-code__digit,
  .tvoetv-twofactor-code__digit:-webkit-autofill {
    border-radius: 10px !important;
    font-size: clamp(20px, 7vw, 25px) !important;
  }

  .dle-popup-twofactor .ui-dialog-buttonpane {
    margin-top: 17px !important;
    padding: 0 20px 20px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] *,
  html[data-theme] *::before,
  html[data-theme] *::after {
    transition-duration: .01ms !important;
  }
}