.vi-panel {
  position: sticky;
  inset-block-start: 0;
  z-index: 250;
  display: none;
  padding-block: 14px;
  border-block-end: 3px solid #ff0;
  background: #000;
  color: #fff;
}

html[data-vi='on'] .vi-panel {
  display: block;
}

.vi-panel__in {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 28px;
}

.vi-settings {
  display: contents;
}

.vi-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-inline-start: auto;
}

.vi-actions .vi-off {
  margin-inline-start: 0;
}

.vi-collapse__when-collapsed {
  display: none;
}

html[data-vi-collapsed='true'] .vi-settings {
  display: none;
}

html[data-vi-collapsed='true'] .vi-collapse__when-expanded {
  display: none;
}

html[data-vi-collapsed='true'] .vi-collapse__when-collapsed {
  display: inline;
}

.vi-group {
  display: flex;
  align-items: center;
  max-inline-size: 100%;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.vi-group__label {
  flex: 0 0 auto;
  padding-inline-end: 4px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.78;
}

.vi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 44px;
  min-block-size: 44px;
  flex: 0 0 auto;
  padding: 7px 13px;
  border: 2px solid #fff;
  border-radius: 4px;
  background: transparent;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
}

.vi-btn[aria-pressed='true'] {
  border-color: #ff0;
  background: #ff0;
  color: #000;
}

.vi-btn--font-s { font-size: 0.85rem; }
.vi-btn--font-m { font-size: 1.05rem; }
.vi-btn--font-l { font-size: 1.3rem; }
.vi-btn--sw-white { background: #fff; color: #000; }
.vi-btn--sw-black { background: #000; color: #fff; }
.vi-btn--sw-blue { background: #9dd1ff; color: #063462; }

.vi-off {
  margin-inline-start: auto;
  border-color: #ff0;
  background: #ff0;
  color: #000;
}

html[data-vi-size='m'] { font-size: 125%; }
html[data-vi-size='l'] { font-size: 155%; }

html[data-vi-spacing='mid'] body {
  line-height: 2;
  letter-spacing: 0.06em;
  word-spacing: 0.16em;
}

html[data-vi-spacing='big'] body {
  line-height: 2.4;
  letter-spacing: 0.12em;
  word-spacing: 0.3em;
}

html[data-vi-font='serif'] body,
html[data-vi-font='serif'] h1,
html[data-vi-font='serif'] h2,
html[data-vi-font='serif'] h3,
html[data-vi-font='serif'] button,
html[data-vi-font='serif'] input,
html[data-vi-font='serif'] select,
html[data-vi-font='serif'] textarea {
  font-family: Georgia, 'Times New Roman', serif;
}

html[data-vi-theme='white'] {
  --bg: #fff;
  --surface: #fff;
  --surface-soft: #f2f2f2;
  --ink: #000;
  --muted: #1f1f1f;
  --brand: #000;
  --brand-dark: #000;
  --brand-deep: #fff;
  --mint: #f2f2f2;
  --mint-bright: #000;
  --line: #000;
  --shadow: none;
  --dark-surface: #fff;
  --dark-ink: #000;
  --button-bg: #000;
  --button-ink: #fff;
}

html[data-vi-theme='black'] {
  --bg: #000;
  --surface: #000;
  --surface-soft: #111;
  --ink: #fff;
  --muted: #ff0;
  --brand: #ff0;
  --brand-dark: #ff0;
  --brand-deep: #000;
  --mint: #111;
  --mint-bright: #ff0;
  --line: #ff0;
  --shadow: none;
  --dark-surface: #000;
  --dark-ink: #ff0;
  --button-bg: #ff0;
  --button-ink: #000;
}

html[data-vi-theme='blue'] {
  --bg: #9dd1ff;
  --surface: #9dd1ff;
  --surface-soft: #8ac4f7;
  --ink: #063462;
  --muted: #063462;
  --brand: #063462;
  --brand-dark: #063462;
  --brand-deep: #9dd1ff;
  --mint: #8ac4f7;
  --mint-bright: #063462;
  --line: #063462;
  --shadow: none;
  --dark-surface: #9dd1ff;
  --dark-ink: #063462;
  --button-bg: #063462;
  --button-ink: #9dd1ff;
}

html[data-vi='on'] body {
  background: var(--bg);
  color: var(--ink);
}

html[data-vi='on'] .topbar,
html[data-vi='on'] .floating-max {
  display: none !important;
}

html[data-vi='on'] *,
html[data-vi='on'] *::before,
html[data-vi='on'] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
  text-shadow: none !important;
}

html[data-vi='on'] .nav-shell,
html[data-vi='on'] .hero,
html[data-vi='on'] .page-hero,
html[data-vi='on'] .service-card,
html[data-vi='on'] .doctor-card,
html[data-vi='on'] .price-panel,
html[data-vi='on'] .document-card,
html[data-vi='on'] .review-card,
html[data-vi='on'] .info-card,
html[data-vi='on'] .contact-info,
html[data-vi='on'] .contact-page-info,
html[data-vi='on'] .contact-page-map,
html[data-vi='on'] .map-wrap,
html[data-vi='on'] .about-media > img,
html[data-vi='on'] .article-card,
html[data-vi='on'] .article-body,
html[data-vi='on'] .page-cta,
html[data-vi='on'] .booking-banner,
html[data-vi='on'] .document-dialog,
html[data-vi='on'] .booking-dialog,
html[data-vi='on'] .menu-dialog,
html[data-vi='on'] .side-nav,
html[data-vi='on'] .rich-content,
html[data-vi='on'] .doctor-profile,
html[data-vi='on'] .sitemap-grid section {
  border-radius: 0;
  box-shadow: none;
}

html[data-vi='on'] .nav-shell {
  position: static;
  border: 2px solid var(--line);
  background: var(--surface);
  backdrop-filter: none;
}

html[data-vi='on'] .hero__media::after,
html[data-vi='on'] .hero__media > img {
  filter: none;
}

html[data-vi-theme] :where(.service-card, .doctor-card, .page-hero, .hero, .price-panel, .document-card, .review-card, .info-card, .contact-info, .contact-page-info, .contact-page-map, .article-card, .article-body, .document-dialog, .booking-dialog, .menu-dialog, .side-nav, .rich-content, .doctor-profile, .sitemap-grid section, .detail-steps li, .visit-list li, .principles-grid article, .navigation-cards > a, .related-links > a, .icon-list li, .check-grid li, .search-result, .site-search) {
  border: 2px solid var(--line);
  background: var(--surface);
  color: var(--ink);
}

html[data-vi-theme] .section--soft,
html[data-vi-theme] .section--soft > .container {
  background: var(--surface-soft);
}

html[data-vi-theme] :where(.section--dark, .site-footer, .page-cta, .booking-banner, .service-card--accent) {
  border-color: var(--line);
  background: var(--dark-surface) !important;
  color: var(--dark-ink) !important;
}

html[data-vi-theme] :where(.section--dark, .site-footer, .page-cta, .booking-banner, .service-card--accent) :where(p, h1, h2, h3, h4, li, dt, dd, small, strong, span, a) {
  color: inherit;
}

html[data-vi-theme] .section--dark,
html[data-vi-theme] .page-cta,
html[data-vi-theme] .booking-banner,
html[data-vi-theme] .site-footer {
  border-block: 2px solid var(--line);
}

html[data-vi-theme] .button,
html[data-vi-theme] .circle-button,
html[data-vi-theme] .icon-button,
html[data-vi-theme] .menu-toggle,
html[data-vi-theme] .price-row > button {
  border: 2px solid var(--button-bg);
  background: var(--button-bg);
  color: var(--button-ink);
  box-shadow: none;
}

html[data-vi-theme] .button *,
html[data-vi-theme] .circle-button *,
html[data-vi-theme] .icon-button *,
html[data-vi-theme] .menu-toggle * {
  color: inherit;
}

html[data-vi-theme] .button--ghost,
html[data-vi-theme] .button--ghost * {
  border-color: var(--ink);
  background: transparent;
  color: var(--ink);
}

html[data-vi-theme] .text-link,
html[data-vi-theme] .doctor-card__link,
html[data-vi-theme] .article-card__link,
html[data-vi-theme] .contact-item div > a:not(.contact-phone),
html[data-vi-theme] .breadcrumbs a,
html[data-vi-theme] .rich-content a,
html[data-vi-theme] .side-nav a,
html[data-vi-theme] .sitemap-grid a {
  color: var(--brand);
}

html[data-vi-theme] .brand__text strong,
html[data-vi-theme] .brand__text small,
html[data-vi-theme] .hero__note strong {
  color: var(--ink);
}

html[data-vi-theme] .brand__text strong span,
html[data-vi-theme] h1 em,
html[data-vi-theme] .stat strong,
html[data-vi-theme] .rating > strong,
html[data-vi-theme] .price-row > strong {
  color: var(--brand);
}

html[data-vi-theme] .eyebrow,
html[data-vi-theme] .eyebrow--light,
html[data-vi-theme] .dialog-kicker,
html[data-vi-theme] .profile-label,
html[data-vi-theme] .document-card > span,
html[data-vi-theme] .article-card > span,
html[data-vi-theme] .search-result > span {
  color: var(--brand);
}

html[data-vi-theme] :where(.service-card__icon, .document-card__icon, .step__icon, .contact-item > .icon, .check-list li > .icon, .principles-grid article > .icon, .navigation-cards > a > .icon:first-child, .contact-methods > a > .icon:first-child, .page-hero__meta, .faq-list summary > span, .online-booking-link, .document-notice, .review-card__avatar, .social-links a, .emergency-numbers a) {
  background: var(--surface-soft);
  color: var(--brand);
}

html[data-vi-theme] :where(.hero__badge, .about-media__label, .doctor-card__photo > span) {
  border: 2px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  box-shadow: none;
  backdrop-filter: none;
}

html[data-vi-theme] .hero__badge span,
html[data-vi-theme] .about-content > p,
html[data-vi-theme] .check-list span,
html[data-vi-theme] .booking-banner p,
html[data-vi-theme] .page-cta p,
html[data-vi-theme] .footer-brand > p,
html[data-vi-theme] .footer-nav a,
html[data-vi-theme] .footer-nav button,
html[data-vi-theme] .footer-contacts p,
html[data-vi-theme] .footer-contacts > span,
html[data-vi-theme] .footer-bottom,
html[data-vi-theme] .medical-warning,
html[data-vi-theme] .service-card--accent .service-card__number,
html[data-vi-theme] .service-card--accent p {
  color: var(--dark-ink);
}

html[data-vi-theme] .review-card__quote {
  color: var(--muted);
  opacity: 0.35;
}

html[data-vi-theme] .stars {
  color: var(--brand);
}

html[data-vi-theme] .avatar-stack img {
  border-color: var(--surface);
}

html[data-vi-theme] input,
html[data-vi-theme] select,
html[data-vi-theme] textarea {
  border: 2px solid var(--line);
  background: var(--surface);
  color: var(--ink);
}

html[data-vi-theme] input::placeholder,
html[data-vi-theme] textarea::placeholder {
  color: var(--muted);
}

html[data-vi-theme] .document-dialog__header,
html[data-vi-theme] .document-dialog__footer {
  background: var(--surface);
}

html[data-vi-theme] .document-watermark span {
  color: var(--brand);
  opacity: 0.3;
}

html[data-vi-theme] .document-page {
  box-shadow: none;
}

html[data-vi-theme] a:focus-visible,
html[data-vi-theme] button:focus-visible,
html[data-vi-theme] input:focus-visible,
html[data-vi-theme] select:focus-visible,
html[data-vi-theme] summary:focus-visible,
html[data-vi-theme] [tabindex]:focus-visible {
  outline: 4px solid currentColor;
  outline-offset: 4px;
}

html[data-vi-size='m'] .desktop-nav,
html[data-vi-size='l'] .desktop-nav {
  display: none;
}

html[data-vi-size='m'] .nav-shell,
html[data-vi-size='l'] .nav-shell {
  justify-content: space-between;
}

html[data-vi-size='m'] .nav-actions,
html[data-vi-size='l'] .nav-actions {
  margin-inline-start: auto;
}

html[data-vi-size='m'] .menu-toggle,
html[data-vi-size='l'] .menu-toggle {
  display: grid;
}

html[data-vi-size='l'] .nav-phone {
  display: none;
}

html[data-vi-img='off'] img:not(.brand__mark img),
html[data-vi-img='off'] .avatar-stack {
  display: none !important;
}

html[data-vi-img='off'] .hero__media,
html[data-vi-img='off'] .about-media,
html[data-vi-img='off'] .doctor-card__photo,
html[data-vi-img='off'] .doctor-profile__photo,
html[data-vi-img='off'] .map-wrap,
html[data-vi-img='off'] .contact-page-map {
  display: none !important;
}

html[data-vi-img='off'] .hero,
html[data-vi-img='off'] .about-grid,
html[data-vi-img='off'] .doctor-profile,
html[data-vi-img='off'] .contacts-grid,
html[data-vi-img='off'] .contact-page-grid {
  grid-template-columns: 1fr;
}

@media (max-width: 900px) {
  .vi-off {
    margin-inline-start: 0;
  }
}

@media (max-width: 700px) {
  html[data-vi-size='m'] .nav-actions .button,
  html[data-vi-size='l'] .nav-actions .button {
    display: none;
  }
}

@media (max-width: 600px) {
  .vi-panel {
    padding-block: 12px;
  }

  .vi-panel__in {
    align-items: flex-start;
    gap: 12px;
  }

  .vi-group {
    inline-size: 100%;
    padding-block-end: 2px;
  }

  .vi-group__label {
    min-inline-size: 104px;
  }

  .vi-actions {
    inline-size: 100%;
  }

  .vi-actions .vi-btn {
    flex: 1 1 180px;
  }

  .vi-actions .vi-off {
    inline-size: auto;
  }
}

@media (forced-colors: active) {
  .vi-panel {
    border-color: Highlight;
  }

  .vi-btn,
  .vi-btn[aria-pressed='true'],
  .vi-off {
    border-color: ButtonText;
  }

  .vi-btn[aria-pressed='true'] {
    background: Highlight;
    color: HighlightText;
  }

  html[data-vi-theme] .button,
  html[data-vi-theme] .service-card,
  html[data-vi-theme] .page-hero,
  html[data-vi-theme] input,
  html[data-vi-theme] select {
    border-color: ButtonText;
  }
}