:root {
  color: #15191d;
  background: #eef4f6;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --ink: #15191d;
  --muted: #65737b;
  --line: rgba(24, 32, 36, 0.1);
  --glass: rgba(255, 255, 255, 0.66);
  --glass-strong: rgba(255, 255, 255, 0.86);
  --shadow: 0 28px 80px rgba(33, 49, 57, 0.16);
  --shadow-soft: 0 14px 36px rgba(33, 49, 57, 0.12);
  --radius-lg: calc(32px * var(--kiosk-radius-scale, 1) * var(--site-radius, 1));
  --radius-md: calc(24px * var(--kiosk-radius-scale, 1) * var(--site-radius, 1));
  --radius-sm: calc(18px * var(--kiosk-radius-scale, 1) * var(--site-radius, 1));
  --gold: #c5a764;
  --mint: #8fd8ce;
  --ice: #dce9ef;
  --blue: #aebdff;
  --rose: #ecc5b8;
  --aurora-1: #9fe6dc;
  --aurora-2: #b7c3ff;
  --aurora-3: #f0d795;
  --aurora-ink: #12181d;
  --heading: #101417;
  --surface-tint: #eef8f8;
  --card-base-1: rgba(255, 255, 255, 0.8);
  --card-base-2: rgba(255, 255, 255, 0.5);
  --card-border: rgba(255, 255, 255, 0.72);
  --theme-glow: rgba(143, 216, 206, 0.3);
  --icon-bg: rgba(17, 23, 27, 0.92);
  --icon-color: #ffffff;
  --site-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --site-radius: 1;
}

/* Telegram bot constructor ------------------------------------------------ */
.telegram-bot-studio {
  position: fixed;
  inset: 32px 0 0;
  z-index: 2147482000;
  display: grid;
  place-items: stretch;
  background: #edf1f3;
  color: #17212b;
  font-family: Inter, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

.telegram-bot-studio *,
.telegram-bot-studio *::before,
.telegram-bot-studio *::after {
  box-sizing: border-box;
}

.telegram-bot-studio__window {
  display: grid;
  grid-template-rows: 64px 42px minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  background: #f8fafb;
}

.telegram-bot-studio__header {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto 36px;
  align-items: center;
  gap: 18px;
  padding: 10px 18px;
  border-bottom: 1px solid #d5dde2;
  background: #15222c;
  color: #f7fafc;
}

.telegram-bot-studio__header > div:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.telegram-bot-studio__header span {
  color: #aab9c4;
  font-size: 11px;
}

.telegram-bot-studio__header strong {
  overflow: hidden;
  font-size: 16px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.telegram-bot-studio__header > button {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #f7fafc;
  font-size: 24px;
  cursor: pointer;
}

.telegram-bot-studio__header > button:hover {
  background: #263641;
}

.telegram-bot-studio__connection {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 360px;
}

.telegram-bot-studio__connection i {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #8c9aa4;
}

.telegram-bot-studio__connection.is-ok i { background: #4bd28b; }
.telegram-bot-studio__connection.is-warning i { background: #f4bc55; }
.telegram-bot-studio__connection.is-empty i { background: #8c9aa4; }

.telegram-bot-studio__connection span {
  overflow: hidden;
  color: #dbe4e9;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.telegram-bot-studio__tabs {
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 0 14px;
  overflow-x: auto;
  border-bottom: 1px solid #d5dde2;
  background: #fff;
}

.telegram-bot-studio__tabs button {
  position: relative;
  flex: 0 0 auto;
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: #56656f;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.telegram-bot-studio__tabs button::after {
  position: absolute;
  right: 12px;
  bottom: 0;
  left: 12px;
  height: 2px;
  background: transparent;
  content: "";
}

.telegram-bot-studio__tabs button:hover,
.telegram-bot-studio__tabs button.is-active {
  color: #0f6d8d;
}

.telegram-bot-studio__tabs button.is-active::after {
  background: #0f87ad;
}

.telegram-bot-studio__form {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 58px;
  min-height: 0;
}

.telegram-bot-studio__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
  min-width: 0;
  min-height: 0;
}

.telegram-bot-studio__panel,
.telegram-bot-studio__preview {
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.telegram-bot-studio__panel {
  padding: 24px;
}

.telegram-bot-studio__preview {
  padding: 20px;
  border-left: 1px solid #d5dde2;
  background: #e8edef;
}

.telegram-bot-studio__preview > header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.telegram-bot-studio__preview > header span,
.telegram-bot-studio__preview > header strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.telegram-bot-studio__section-head,
.telegram-bot-studio__row-head,
.telegram-bot-studio__entity > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.telegram-bot-studio__section-head {
  margin-bottom: 20px;
}

.telegram-bot-studio__section-head > div {
  min-width: 0;
}

.telegram-bot-studio__section-head span {
  color: #0f789b;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.telegram-bot-studio__section-head h2 {
  margin: 3px 0 6px;
  font-size: 22px;
  line-height: 1.15;
}

.telegram-bot-studio__section-head p,
.telegram-bot-studio__note {
  max-width: 760px;
  margin: 0;
  color: #61717b;
  font-size: 13px;
  line-height: 1.45;
}

.telegram-bot-studio button,
.telegram-bot-studio input,
.telegram-bot-studio select,
.telegram-bot-studio textarea {
  font: inherit;
  letter-spacing: 0;
}

.telegram-bot-studio button {
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid #aebbc3;
  border-radius: 5px;
  background: #fff;
  color: #22313a;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.telegram-bot-studio button:hover:not(:disabled) {
  border-color: #0f87ad;
  color: #096783;
}

.telegram-bot-studio button.is-primary,
.telegram-bot-studio__footer button.is-primary {
  border-color: #0f789b;
  background: #0f789b;
  color: #fff;
}

.telegram-bot-studio button:disabled {
  cursor: default;
  opacity: 0.5;
}

.telegram-bot-studio__grid {
  display: grid;
  gap: 14px;
}

.telegram-bot-studio__grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.telegram-bot-studio__grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.telegram-bot-studio__grid .is-wide { grid-column: 1 / -1; }

.telegram-bot-studio label {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  color: #33434d;
  font-size: 12px;
  font-weight: 600;
}

.telegram-bot-studio label small {
  color: #71808a;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.35;
}

.telegram-bot-studio input,
.telegram-bot-studio select,
.telegram-bot-studio textarea {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #bdc8ce;
  border-radius: 5px;
  outline: 0;
  background: #fff;
  color: #17212b;
  font-size: 13px;
}

.telegram-bot-studio textarea {
  min-height: 82px;
  resize: vertical;
}

.telegram-bot-studio input:focus,
.telegram-bot-studio select:focus,
.telegram-bot-studio textarea:focus {
  border-color: #0f87ad;
  box-shadow: 0 0 0 2px rgb(15 135 173 / 14%);
}

.telegram-bot-studio label.is-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding-top: 20px;
}

.telegram-bot-studio label.is-check input {
  width: 16px;
  min-height: 16px;
  margin: 0;
}

.telegram-bot-studio__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #d9e0e4;
}

.telegram-bot-studio__inline-field {
  min-width: 200px;
  margin-left: auto;
}

.telegram-bot-studio__menu-editor {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  min-height: 430px;
  border: 1px solid #ccd5da;
  background: #fff;
}

.telegram-bot-studio__screen-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  overflow-y: auto;
  border-right: 1px solid #d9e0e4;
  background: #f1f4f5;
}

.telegram-bot-studio__screen-list button {
  display: grid;
  justify-items: start;
  min-height: 50px;
  text-align: left;
}

.telegram-bot-studio__screen-list button.is-active {
  border-color: #0f87ad;
  background: #e2f2f7;
}

.telegram-bot-studio__screen-list small {
  color: #71808a;
  font-weight: 400;
}

.telegram-bot-studio__screen-fields {
  min-width: 0;
  padding: 18px;
  overflow: auto;
}

.telegram-bot-studio__row-head {
  align-items: center;
  margin: 18px 0 8px;
}

.telegram-bot-studio__button-list,
.telegram-bot-studio__product-list,
.telegram-bot-studio__channel-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.telegram-bot-studio__button-row {
  display: grid;
  grid-template-columns: 20px minmax(120px, 1fr) minmax(150px, 1fr) minmax(140px, 1fr) auto 34px;
  align-items: end;
  gap: 8px;
  padding: 10px;
  border: 1px solid #d2dade;
  background: #f8fafb;
}

.telegram-bot-studio__button-row .is-check {
  padding-top: 0;
}

.telegram-bot-studio__drag {
  align-self: center;
  color: #82909a;
  font-size: 15px;
}

.telegram-bot-studio__entity {
  padding: 14px;
  border: 1px solid #ccd5da;
  background: #fff;
}

.telegram-bot-studio__entity > header {
  align-items: center;
  margin-bottom: 12px;
}

.telegram-bot-studio__danger-link {
  margin-top: 18px;
  border-color: #d9a5ab !important;
  color: #a62d3b !important;
}

.telegram-bot-studio__commands {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 16px;
  margin-top: 20px;
  padding: 14px;
  border-left: 3px solid #0f87ad;
  background: #eaf4f7;
  font-size: 12px;
}

.telegram-bot-studio__log-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.telegram-bot-studio__log-grid > section {
  min-width: 0;
}

.telegram-bot-studio__logs,
.telegram-bot-studio__orders {
  display: grid;
  gap: 8px;
  max-height: 470px;
  overflow: auto;
}

.telegram-bot-studio__logs article,
.telegram-bot-studio__orders article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 10px;
  padding: 10px;
  border-left: 3px solid #8a9aa4;
  background: #fff;
  font-size: 11px;
}

.telegram-bot-studio__logs p,
.telegram-bot-studio__orders p,
.telegram-bot-studio__orders small {
  grid-column: 1 / -1;
  margin: 0;
  overflow-wrap: anywhere;
}

.telegram-bot-studio__footer {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 18px;
  border-top: 1px solid #ccd5da;
  background: #fff;
}

.telegram-bot-studio__footer [data-bot-studio-status] {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-right: auto;
  color: #56656f;
  font-size: 11px;
}

.telegram-bot-studio__footer [data-bot-studio-status] span {
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.telegram-bot-studio__footer [data-bot-studio-status].is-error { color: #ae2f3d; }
.telegram-bot-studio__footer [data-bot-studio-status].is-success { color: #14784c; }
.telegram-bot-studio__footer [data-bot-studio-status].is-loading { color: #0f6d8d; }

.telegram-bot-phone {
  width: min(100%, 330px);
  min-height: 500px;
  margin: 0 auto;
  overflow: hidden;
  border: 6px solid #18242d;
  border-radius: 8px;
  background: #b9d2de;
  box-shadow: 0 12px 30px rgb(20 34 44 / 16%);
}

.telegram-bot-phone__bar {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: 20px 18px;
  padding: 8px 12px;
  background: #fff;
}

.telegram-bot-phone__bar i {
  grid-row: 1 / 3;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #2aabee;
}

.telegram-bot-phone__bar strong,
.telegram-bot-phone__bar span {
  overflow: hidden;
  color: #1d2a33;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.telegram-bot-phone__bar span {
  color: #778791;
  font-size: 10px;
}

.telegram-bot-phone__chat {
  min-height: 446px;
  padding: 18px 10px;
  background: linear-gradient(135deg, #dbe8ed, #b6ced8 58%, #d7e3e8);
}

.telegram-bot-phone__message {
  width: 88%;
  padding: 10px;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(16 35 45 / 14%);
}

.telegram-bot-phone__message p {
  margin: 0 0 10px;
  color: #1e2b33;
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.telegram-bot-phone__message div {
  display: grid;
  gap: 5px;
}

.telegram-bot-phone__message button {
  min-height: 30px;
  border-color: #c8dce5;
  color: #147b9c;
}

.telegram-bot-studio__summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 14px auto 0;
  width: min(100%, 330px);
}

.telegram-bot-studio__summary div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border-bottom: 1px solid #c5d0d5;
  font-size: 11px;
}

.telegram-bot-studio__loading {
  place-items: center;
  align-content: center;
  gap: 14px;
}

.telegram-bot-studio__loading > span {
  width: 34px;
  height: 34px;
  border: 3px solid #b9c7ce;
  border-top-color: #0f87ad;
  border-radius: 50%;
  animation: telegram-bot-spin 0.8s linear infinite;
}

.telegram-bot-studio.is-busy::after {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: rgb(240 244 246 / 32%);
  content: "";
  pointer-events: none;
}

@keyframes telegram-bot-spin { to { transform: rotate(360deg); } }

.site-block-telegram-bot {
  display: grid;
  gap: 10px;
}

.site-block-telegram-bot__status {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.site-block-telegram-bot__status i {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #2aabee;
  box-shadow: 0 0 0 4px rgb(42 171 238 / 14%);
}

.site-block-telegram-bot__status span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.site-block-telegram-bot__status span[data-state="error"] { color: #b53a47; }
.site-block-telegram-bot__status span[data-state="warning"] { color: #946515; }
.site-block-telegram-bot__status span[data-state="success"] { color: #168253; }

.site-block-telegram-bot__open[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.55;
}

.site-block-telegram-bot__event {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.site-block-telegram-bot__event small {
  grid-column: 1 / -1;
  overflow-wrap: anywhere;
}

@media (max-width: 920px) {
  .telegram-bot-studio__body { grid-template-columns: minmax(0, 1fr); }
  .telegram-bot-studio__preview { display: none; }
  .telegram-bot-studio__grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .telegram-bot-studio__button-row { grid-template-columns: 18px repeat(2, minmax(120px, 1fr)); }
}

@media (max-width: 640px) {
  .telegram-bot-studio { inset: 0; }
  .telegram-bot-studio__window { grid-template-rows: 64px 42px minmax(0, 1fr); }
  .telegram-bot-studio__header { grid-template-columns: minmax(0, 1fr) 34px; }
  .telegram-bot-studio__connection { display: none; }
  .telegram-bot-studio__panel { padding: 14px; }
  .telegram-bot-studio__grid--two,
  .telegram-bot-studio__grid--three,
  .telegram-bot-studio__menu-editor,
  .telegram-bot-studio__log-grid { grid-template-columns: minmax(0, 1fr); }
  .telegram-bot-studio__screen-list {
    flex-direction: row;
    max-width: 100%;
    border-right: 0;
    border-bottom: 1px solid #d9e0e4;
  }
  .telegram-bot-studio__screen-list button { min-width: 150px; }
  .telegram-bot-studio__footer [data-bot-studio-status] { display: none; }
  .telegram-bot-studio__footer { justify-content: flex-end; overflow-x: auto; }
  .telegram-bot-studio__button-row { grid-template-columns: minmax(0, 1fr); }
  .telegram-bot-studio__drag { display: none; }
  .site-block-telegram-bot__event { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .telegram-bot-studio__loading > span { animation-duration: 1.8s; }
}

/* Desktop creator: the application header is separate from the editable page.
   The whole site starts below the 32px title/menu strip. */
body:has(.creator-window-chrome):has(.page-layout-toolbar.is-editing) #root {
  padding-top: 32px !important;
}

body:has(.creator-window-chrome):has(.page-layout-toolbar.is-editing) .kiosk-app {
  height: calc(100dvh - 32px) !important;
  margin-top: 0 !important;
}

.creator-window-chrome .creator-menu__site-settings {
  color: #f4d37d;
}

.site-settings-theme-card {
  position: relative;
  min-width: 0;
}

.site-settings-theme-card .site-settings-theme {
  width: 100%;
}

.site-settings-theme-card__remove {
  position: absolute;
  z-index: 1;
  top: 6px;
  right: 6px;
  display: grid;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(150, 34, 52, 0.28);
  border-radius: 4px;
  place-items: center;
  background: rgba(255, 255, 255, 0.88);
  color: #a32334;
  font-size: 1rem;
  line-height: 1;
}

.site-settings-theme-card__remove:hover,
.site-settings-theme-card__remove:focus-visible {
  background: #a32334;
  color: #fff;
}

/* Saved project history controls in the full site settings panel. */
.site-settings-history__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.site-settings-history__status {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

html {
  font-size: calc(16px * var(--kiosk-font-scale, 1));
}

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--site-font-family);
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.kiosk-app {
  position: relative;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 18% 8%, color-mix(in srgb, var(--aurora-1) 34%, transparent), transparent 42%),
    radial-gradient(ellipse at 82% 14%, color-mix(in srgb, var(--aurora-2) 30%, transparent), transparent 46%),
    radial-gradient(ellipse at 50% 96%, color-mix(in srgb, var(--aurora-3) 20%, transparent), transparent 42%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(235, 244, 246, 0.2) 42%, rgba(223, 234, 238, 0.8)),
    linear-gradient(90deg, rgba(143, 216, 206, 0.14), transparent 38%, rgba(197, 167, 100, 0.12)),
    var(--surface-tint);
}

.kiosk-app::before,
.kiosk-app::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.kiosk-app::before {
  display: none;
}

.kiosk-app::after {
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.42) 44%, transparent 72%);
}

.screen-transition,
.screen-layer {
  position: absolute;
  inset: 0;
}

.screen-transition {
  z-index: 1;
}

.screen-layer {
  z-index: 1;
}

.screen-layer--enter {
  z-index: 2;
}

.screen-layer--exit {
  pointer-events: none;
}

.screen-layer--enter.screen-layer--forward {
  animation: enter-forward 220ms cubic-bezier(0.2, 0.82, 0.22, 1) both;
}

.screen-layer--exit.screen-layer--forward {
  animation: exit-forward 220ms cubic-bezier(0.2, 0.82, 0.22, 1) both;
}

.screen-layer--enter.screen-layer--back {
  animation: enter-back 220ms cubic-bezier(0.2, 0.82, 0.22, 1) both;
}

.screen-layer--exit.screen-layer--back {
  animation: exit-back 220ms cubic-bezier(0.2, 0.82, 0.22, 1) both;
}

@keyframes enter-forward {
  from {
    opacity: 0;
    transform: translateX(28px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes exit-forward {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(-22px) scale(0.992);
  }
}

@keyframes enter-back {
  from {
    opacity: 0;
    transform: translateX(-24px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes exit-back {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(24px) scale(0.992);
  }
}

@keyframes theme-breathe {
  from {
    filter: saturate(1) brightness(1);
  }
  to {
    filter: saturate(1.1) brightness(1.025);
  }
}

html[data-theme="star-route"] {
  color-scheme: dark;
}

html[data-theme="star-route"] .kiosk-app {
  background:
    radial-gradient(circle at 18% 12%, rgba(67, 98, 255, 0.26), transparent 26%),
    radial-gradient(circle at 84% 78%, rgba(133, 51, 196, 0.23), transparent 32%),
    linear-gradient(145deg, #02030e, #070b2d 52%, #13072a);
}

html[data-theme="star-route"] .kiosk-app::after {
  background: radial-gradient(circle at 50% 50%, transparent 30%, rgba(3, 5, 20, 0.3) 100%);
}

.star-route-scene {
  display: none;
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.star-route-scene.is-active {
  display: block;
}

.star-route-starfield,
.star-route-milky-way {
  position: absolute;
  pointer-events: none;
}

.star-route-starfield {
  inset: -18%;
  opacity: 0.96;
  background:
    radial-gradient(circle at 5% 12%, #ffffff 0 1px, transparent 1.7px),
    radial-gradient(circle at 11% 62%, #8bb7ff 0 1px, transparent 1.8px),
    radial-gradient(circle at 17% 31%, #ffffff 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 23% 82%, #e8d3ff 0 1px, transparent 1.8px),
    radial-gradient(circle at 29% 18%, #ffffff 0 0.9px, transparent 1.7px),
    radial-gradient(circle at 37% 48%, #bcd5ff 0 1.1px, transparent 1.9px),
    radial-gradient(circle at 44% 8%, #ffffff 0 1px, transparent 1.7px),
    radial-gradient(circle at 52% 71%, #fce3a1 0 1.1px, transparent 2px),
    radial-gradient(circle at 61% 23%, #ffffff 0 1px, transparent 1.9px),
    radial-gradient(circle at 68% 92%, #9dc5ff 0 1.2px, transparent 2px),
    radial-gradient(circle at 76% 45%, #ffffff 0 0.9px, transparent 1.7px),
    radial-gradient(circle at 82% 12%, #ded2ff 0 1.3px, transparent 2px),
    radial-gradient(circle at 91% 60%, #ffffff 0 1px, transparent 1.8px),
    radial-gradient(circle at 97% 34%, #8ec0ff 0 1.2px, transparent 2px);
  background-size: 260px 190px, 310px 250px, 280px 290px, 340px 230px, 230px 320px, 360px 260px, 300px 210px, 390px 310px, 270px 250px, 330px 360px, 250px 220px, 380px 280px, 320px 340px, 290px 230px;
  animation: star-route-drift 28s linear infinite;
}

.star-route-milky-way {
  inset: -35% -12%;
  opacity: 0.34;
  background: linear-gradient(108deg, transparent 42%, rgba(121, 164, 255, 0.28) 48%, rgba(231, 180, 255, 0.24) 52%, transparent 58%);
  filter: blur(22px);
  transform: rotate(-16deg);
}

.star-route-planet {
  position: absolute;
  display: block;
  border: 1px solid rgba(222, 237, 255, 0.54);
  border-radius: 50%;
  opacity: 0.72;
  box-shadow: inset -20px -18px 26px rgba(0, 0, 0, 0.48), 0 0 26px color-mix(in srgb, var(--planet-glow) 55%, transparent);
  transition: opacity 280ms ease, transform 420ms cubic-bezier(0.2, 0.84, 0.22, 1), filter 280ms ease;
}

.star-route-planet::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.78), transparent 20%);
  mix-blend-mode: screen;
}

.star-route-planet.is-active {
  z-index: 2;
  opacity: 1;
  filter: brightness(1.2) saturate(1.18);
  transform: scale(1.22);
}

.star-route-planet--mercury {
  --planet-glow: #d5bc9f;
  top: 13%;
  left: 8%;
  width: clamp(28px, 4vw, 62px);
  aspect-ratio: 1;
  background: radial-gradient(circle at 33% 28%, #ede2d3, #a78167 48%, #34273a 100%);
}

.star-route-planet--venus {
  --planet-glow: #ffbc70;
  top: 58%;
  left: 19%;
  width: clamp(44px, 7vw, 108px);
  aspect-ratio: 1;
  background: repeating-linear-gradient(12deg, rgba(255, 236, 174, 0.34) 0 5px, transparent 5px 10px), radial-gradient(circle at 31% 27%, #ffe1a3, #d7803b 54%, #572b3e 100%);
}

.star-route-planet--earth {
  --planet-glow: #74bbff;
  top: 12%;
  right: 15%;
  width: clamp(62px, 10vw, 154px);
  aspect-ratio: 1;
  background: radial-gradient(circle at 68% 56%, #f3ffff 0 5%, transparent 6%), radial-gradient(circle at 33% 27%, #9deeff, #2673bf 43%, #113c7c 71%, #061537 100%);
}

.star-route-planet--mars {
  --planet-glow: #ff7655;
  right: 6%;
  bottom: 12%;
  width: clamp(36px, 5vw, 78px);
  aspect-ratio: 1;
  background: radial-gradient(circle at 35% 28%, #ffb182, #b84936 55%, #481c2c 100%);
}

.star-route-planet--jupiter {
  --planet-glow: #f2b980;
  top: 36%;
  left: 43%;
  width: clamp(76px, 12vw, 184px);
  aspect-ratio: 1;
  background: radial-gradient(ellipse at 67% 66%, #d96852 0 6%, transparent 7%), repeating-linear-gradient(0deg, #f6d2a1 0 10%, #b76b52 10% 18%, #ecd0a0 18% 26%, #8a443c 26% 35%);
}

.star-route-planet--saturn {
  --planet-glow: #f6e0a4;
  top: 5%;
  left: 55%;
  width: clamp(52px, 8vw, 124px);
  aspect-ratio: 1;
  background: repeating-linear-gradient(0deg, #f5dfa9 0 11%, #cba66f 11% 20%, #eed39b 20% 29%);
}

.star-route-planet--saturn::after {
  content: "";
  position: absolute;
  top: 43%;
  left: -43%;
  width: 186%;
  height: 30%;
  border: clamp(2px, 0.4vw, 5px) solid rgba(241, 221, 165, 0.78);
  border-left-color: rgba(165, 123, 89, 0.48);
  border-right-color: rgba(255, 241, 196, 0.88);
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(255, 216, 148, 0.4);
  transform: rotate(-17deg);
}

.star-route-planet--neptune {
  --planet-glow: #5594ff;
  bottom: 5%;
  left: 54%;
  width: clamp(48px, 7vw, 116px);
  aspect-ratio: 1;
  background: repeating-linear-gradient(9deg, #5da1ff 0 10%, #2851c6 10% 19%, #1a2b8f 19% 28%);
}

.star-route-scene.is-jumping .star-route-starfield {
  animation: star-route-warp 680ms cubic-bezier(0.18, 0.76, 0.2, 1) both;
}

.star-route-scene.is-jumping .star-route-milky-way {
  animation: star-route-nebula-jump 680ms ease both;
}

.star-route-scene.is-jumping .star-route-planet.is-active {
  animation: star-route-arrive 680ms cubic-bezier(0.12, 0.82, 0.18, 1) both;
}

.star-route-scene.is-jumping .star-route-planet:not(.is-active) {
  animation: star-route-depart 680ms ease both;
}

@keyframes star-route-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-3%, 2%, 0) scale(1.05); }
}

@keyframes star-route-warp {
  0% { filter: brightness(1); transform: scale(1); opacity: 0.88; }
  38% { filter: brightness(1.6) saturate(1.4); transform: scale(1.44); opacity: 1; }
  100% { filter: brightness(1); transform: scale(1.04); opacity: 0.96; }
}

@keyframes star-route-nebula-jump {
  0% { opacity: 0.28; transform: rotate(-16deg) scale(1); }
  45% { opacity: 0.68; transform: rotate(-12deg) scale(1.32); }
  100% { opacity: 0.34; transform: rotate(-16deg) scale(1); }
}

@keyframes star-route-arrive {
  0% { opacity: 0.28; transform: scale(0.36); }
  62% { opacity: 1; transform: scale(1.45); }
  100% { opacity: 1; transform: scale(1.22); }
}

@keyframes star-route-depart {
  0% { opacity: 0.8; transform: scale(1); }
  38% { opacity: 0.12; transform: scale(0.35); }
  100% { opacity: 0.72; transform: scale(1); }
}

html[data-theme="star-route"] .screen-heading h1,
html[data-theme="star-route"] .splash-screen h1 {
  color: #ffffff;
  text-shadow: 0 0 18px rgba(148, 191, 255, 0.68), 0 0 48px rgba(111, 72, 255, 0.42);
}

html[data-theme="star-route"] .eyebrow,
html[data-theme="star-route"] .screen-subtitle,
html[data-theme="star-route"] .splash-lead {
  color: #d6ddff;
  text-shadow: 0 0 12px rgba(92, 143, 255, 0.35);
}

html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="dark"] .kiosk-app::after {
  background: linear-gradient(120deg, transparent, rgba(140, 255, 225, 0.12) 44%, transparent 72%);
}

html[data-theme="dark"] .screen-heading h1,
html[data-theme="dark"] .splash-screen h1 {
  color: #0d1114;
  font-weight: 680;
  text-shadow:
    0 0 16px rgba(255, 255, 255, 0.55),
    0 0 34px rgba(53, 240, 196, 0.26);
}

html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .screen-subtitle,
html[data-theme="dark"] .splash-lead {
  color: #1f2b31;
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.38);
}

html[data-theme="dark"] .feature-strip span,
html[data-theme="dark"] .feature-stack span,
html[data-theme="dark"] .mini-stats span,
html[data-theme="dark"] .stat-row span {
  color: #11171b;
  font-weight: 540;
  text-shadow: 0 0 13px rgba(255, 255, 255, 0.46);
}

html[data-theme="dark"] .mini-stats strong,
html[data-theme="dark"] .stat-row strong {
  color: #0d1114;
  font-weight: 620;
  text-shadow:
    0 0 14px rgba(255, 255, 255, 0.42),
    0 0 24px rgba(53, 240, 196, 0.22);
}

html[data-theme="dark"] .feature-strip svg,
html[data-theme="dark"] .feature-stack svg {
  color: #9cfbe5;
}

html[data-theme="dark"] .doctor-card__body small,
html[data-theme="dark"] .doctor-card__body strong,
html[data-theme="dark"] .service-panel h2,
html[data-theme="dark"] .service-row strong,
html[data-theme="dark"] .service-row small,
html[data-theme="dark"] .service-row em {
  color: #0d1114;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.42);
}

html[data-theme="dark"] .menu-tile strong,
html[data-theme="dark"] .menu-tile small,
html[data-theme="dark"] .review-card,
html[data-theme="dark"] .review-card div > strong,
html[data-theme="dark"] .review-card p,
html[data-theme="dark"] .review-score strong,
html[data-theme="dark"] .review-score span,
html[data-theme="dark"] .client-strip em,
html[data-theme="dark"] .client-strip b {
  color: #0d1114;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.38);
}

html[data-theme="dark"] .rating-stars,
html[data-theme="dark"] .review-card span,
html[data-theme="dark"] .review-score svg {
  color: #d8a62a;
  text-shadow: none;
}

.screen-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 30px 42px 38px;
  overflow: hidden;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 62px;
  margin-bottom: 28px;
}

.brand-chip,
.icon-action,
.ghost-button,
.start-button,
.thanks-actions button,
.confirm-button {
  border: 1px solid rgba(255, 255, 255, 0.62);
  background: var(--glass);
  color: var(--ink);
  box-shadow:
    var(--shadow-soft),
    0 0 28px color-mix(in srgb, var(--theme-glow) 54%, transparent);
  backdrop-filter: blur(24px);
}

.brand-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 54px;
  padding: 0 18px;
  border-radius: 999px;
  font-weight: 760;
}

.brand-chip svg {
  color: var(--gold);
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.icon-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 118px;
  height: 54px;
  border-radius: 999px;
  font-weight: 720;
}

.icon-action:hover,
.brand-chip:hover,
.menu-tile:hover,
.doctor-card:hover,
.primary-action:hover,
.service-row:hover,
.document-card:hover,
.confirm-button:hover,
.thanks-actions button:hover {
  transform: translateY(-2px);
}

.screen-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 26px;
  height: calc(100% - 90px);
  overflow: hidden;
}

.screen-grid:has(.screen-aside) {
  grid-template-columns: minmax(0, 1fr) 330px;
}

.screen-heading {
  min-width: 0;
}

.screen-heading h1,
.splash-screen h1 {
  margin: 0;
  color: var(--heading);
  font-size: 4.45rem;
  font-weight: 780;
  letter-spacing: 0;
  line-height: 0.96;
}

.eyebrow {
  margin: 0 0 13px;
  color: #728187;
  font-size: 0.78rem;
  font-weight: 820;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.screen-subtitle {
  width: min(780px, 100%);
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 1.14rem;
  line-height: 1.45;
}

.screen-aside {
  grid-column: 2;
  grid-row: 1 / 3;
  min-height: 0;
}

.screen-content {
  position: relative;
  grid-column: 1;
  grid-row: 2;
  min-height: 0;
  overflow: hidden;
}

.screen-grid:not(:has(.screen-aside)) .screen-content {
  grid-column: 1 / -1;
}

.splash-screen {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  align-items: center;
  gap: 54px;
  width: 100%;
  height: 100%;
  padding: 64px;
  overflow: hidden;
}

.theme-switcher {
  position: absolute;
  z-index: 14;
  left: 50%;
  top: clamp(18px, 3vh, 34px);
  display: flex;
  gap: 10px;
  transform: translateX(-50%);
}

.theme-dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--dot-a), var(--dot-b) 52%, var(--dot-c));
  box-shadow:
    0 10px 25px rgba(20, 30, 36, 0.18),
    inset 0 1px 6px rgba(255, 255, 255, 0.48);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.theme-dot span {
  position: absolute;
  top: 31px;
  left: 50%;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #314047;
  font-size: 0.62rem;
  font-weight: 820;
  opacity: 0;
  transform: translateX(-50%) translateY(-3px);
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 160ms ease, transform 160ms ease;
}

.theme-dot:hover,
.theme-dot.is-active {
  transform: translateY(-2px) scale(1.12);
  box-shadow:
    0 12px 32px color-mix(in srgb, var(--dot-a) 48%, transparent),
    0 0 18px color-mix(in srgb, var(--dot-b) 44%, transparent),
    inset 0 1px 8px rgba(255, 255, 255, 0.62);
}

.theme-dot:hover span {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.theme-dot--white {
  --dot-a: #ffffff;
  --dot-b: #e6f3f4;
  --dot-c: #f5dfad;
}

.theme-dot--north {
  --dot-a: #5ff0c8;
  --dot-b: #79a8ff;
  --dot-c: #d8a8ff;
}

.theme-dot--south {
  --dot-a: #ff6f61;
  --dot-b: #ffd166;
  --dot-c: #ff7bc8;
}

.theme-dot--west {
  --dot-a: #a7e86d;
  --dot-b: #7fd8a6;
  --dot-c: #d7f6bd;
}

.theme-dot--east {
  --dot-a: #c8ff57;
  --dot-b: #57f2b2;
  --dot-c: #8ed8ff;
}

.theme-dot--dark {
  --dot-a: #0a1016;
  --dot-b: #35f0c4;
  --dot-c: #7967ff;
}

.theme-dot--star-route {
  --dot-a: #07143f;
  --dot-b: #4c8dff;
  --dot-c: #ffd66d;
}

.ambient {
  position: absolute;
  pointer-events: none;
}

.ambient--one {
  inset: 0 52% 0 0;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.92), color-mix(in srgb, var(--aurora-1) 22%, transparent));
}

.ambient--two {
  inset: 0 0 0 58%;
  background: linear-gradient(235deg, color-mix(in srgb, var(--aurora-3) 22%, transparent), rgba(255, 255, 255, 0.2));
}

.splash-screen__content,
.splash-card {
  position: relative;
  z-index: 1;
}

.splash-mark,
.thanks-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 82px;
  margin-bottom: 28px;
  border-radius: 28px;
  border: 0;
  background: #12171b;
  color: #f5deb3;
  box-shadow: 0 28px 70px rgba(18, 23, 27, 0.22);
}

.splash-mark {
  padding: 0;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.splash-mark:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    0 24px 70px color-mix(in srgb, var(--theme-glow) 84%, transparent),
    0 0 36px color-mix(in srgb, var(--aurora-2) 45%, transparent);
  filter: saturate(1.14);
}

.splash-lead {
  max-width: 710px;
  margin: 26px 0 0;
  color: var(--muted);
  font-size: 1.3rem;
  line-height: 1.5;
}

.splash-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 42px;
}

.start-button,
.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  height: 68px;
  border-radius: 999px;
  padding: 0 28px;
  font-size: 1.04rem;
  font-weight: 800;
}

.start-button {
  min-width: 190px;
  background: #11171b;
  color: white;
  border-color: rgba(17, 23, 27, 0.2);
}

.ghost-button {
  min-width: 154px;
}

.feature-strip,
.feature-stack {
  display: flex;
  gap: 12px;
}

.feature-strip {
  flex-wrap: wrap;
  margin-top: 32px;
}

.feature-strip span,
.feature-stack span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.48);
  color: #506069;
  font-size: 0.92rem;
  font-weight: 720;
  backdrop-filter: blur(18px);
}

.splash-card {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: min(680px, 78vh);
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.66);
  border-radius: 38px;
  background: rgba(255, 255, 255, 0.56);
  box-shadow: var(--shadow);
  backdrop-filter: blur(28px);
}

.clinic-preview {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(224, 236, 239, 0.86)),
    linear-gradient(90deg, rgba(143, 216, 206, 0.16), rgba(197, 167, 100, 0.12));
}

.clinic-preview__light {
  position: absolute;
  inset: 18% 14% auto;
  height: 17px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 34px rgba(255, 255, 255, 0.9);
}

.clinic-preview__chair {
  position: absolute;
  right: 11%;
  bottom: 16%;
  width: 64%;
  height: 32%;
  border-radius: 90px 34px 34px 110px;
  background: linear-gradient(135deg, #ffffff, #cbdbe0);
  box-shadow: 0 32px 50px rgba(76, 95, 104, 0.18);
}

.clinic-preview__chair::before {
  content: "";
  position: absolute;
  left: 8%;
  top: -72%;
  width: 42%;
  height: 120%;
  border-radius: 42px;
  background: linear-gradient(145deg, #fdfefe, #cedce1);
  transform: rotate(-18deg);
}

.clinic-preview__console {
  position: absolute;
  left: 12%;
  bottom: 12%;
  width: 24%;
  height: 46%;
  border-radius: 28px;
  background: rgba(20, 28, 32, 0.92);
  box-shadow: 0 24px 44px rgba(24, 32, 36, 0.2);
}

.clinic-preview__badge {
  position: absolute;
  right: 11%;
  top: 14%;
  color: var(--gold);
  filter: drop-shadow(0 14px 20px rgba(197, 167, 100, 0.2));
}

.stat-row,
.mini-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.stat-row {
  margin-top: 18px;
}

.stat-row div,
.mini-stats div {
  padding: 18px 16px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.62);
}

.stat-row strong,
.mini-stats strong {
  display: block;
  font-size: 1.45rem;
}

.stat-stars {
  display: block;
  margin-top: 3px;
  color: #d8a62a;
  font-size: 0.72rem;
  font-style: normal;
  letter-spacing: 0;
  line-height: 1;
  text-shadow: 0 0 10px rgba(216, 166, 42, 0.38);
}

.stat-row span,
.mini-stats span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.3;
}

.menu-aside {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 16px;
  height: 100%;
}

.status-orb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 104px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.56);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(26px);
}

.status-orb span {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle, #a6f0da 0 42%, #2d8b72 43% 100%);
  box-shadow: 0 0 0 9px rgba(143, 216, 206, 0.18);
}

.status-orb strong {
  font-size: 1.1rem;
  text-transform: uppercase;
}

.feature-stack {
  flex-direction: column;
  min-height: 0;
}

.feature-stack span {
  justify-content: flex-start;
  width: 100%;
  min-height: 58px;
  padding: 0 18px;
  border-radius: 18px;
}

.menu-grid,
.doctors-grid,
.works-grid,
.promo-grid,
.services-grid,
.document-grid,
.documents-hub-grid {
  display: grid;
  gap: 18px;
  height: 100%;
  min-height: 0;
}

.menu-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.menu-tile,
.doctor-card,
.primary-action,
.document-card,
.documents-hub-card,
.work-card,
.review-card,
.review-score,
.promo-card,
.service-panel,
.appointment-panel,
.contact-card,
.route-card,
.map-panel,
.thanks-layout {
  border: 1px solid var(--card-border);
  background:
    linear-gradient(135deg, var(--card-base-1), var(--card-base-2)),
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--aurora-1) 30%, transparent), transparent 42%),
    radial-gradient(circle at 92% 88%, color-mix(in srgb, var(--aurora-3) 25%, transparent), transparent 46%),
    linear-gradient(145deg, color-mix(in srgb, var(--aurora-1) 17%, transparent), color-mix(in srgb, var(--aurora-2) 14%, transparent) 56%, color-mix(in srgb, var(--aurora-3) 15%, transparent));
  box-shadow:
    var(--shadow-soft),
    0 0 30px color-mix(in srgb, var(--theme-glow) 40%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(26px);
}

.menu-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
  padding: 24px;
  border-radius: var(--radius-md);
  color: var(--ink);
  text-align: left;
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.menu-tile:hover,
.doctor-card:hover,
.primary-action:hover,
.documents-hub-card:hover,
.service-row:hover,
.client-story:hover {
  border-color: color-mix(in srgb, var(--aurora-1) 42%, white);
  box-shadow:
    0 24px 64px color-mix(in srgb, var(--theme-glow) 76%, transparent),
    0 0 0 1px rgba(255, 255, 255, 0.68) inset,
    0 0 42px color-mix(in srgb, var(--aurora-1) 40%, transparent);
  animation: theme-breathe 1800ms ease-in-out infinite alternate;
}

.menu-tile:active,
.doctor-card:active,
.primary-action:active,
.documents-hub-card:active,
.service-row:active,
.client-story:active {
  transform: translateY(0) scale(0.985);
  box-shadow:
    0 16px 46px color-mix(in srgb, var(--aurora-1) 26%, transparent),
    0 0 42px color-mix(in srgb, var(--aurora-3) 22%, transparent);
}

.menu-tile__icon,
.primary-action__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 20px;
  background: var(--icon-bg);
  color: var(--icon-color);
  box-shadow:
    0 0 24px color-mix(in srgb, var(--theme-glow) 68%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.menu-tile strong {
  margin-top: auto;
  font-size: 1.58rem;
  line-height: 1.08;
}

.menu-tile small {
  margin-top: 9px;
  color: var(--muted);
  font-size: 0.98rem;
  font-weight: 680;
}

.doctors-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.doctors-grid--team {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.doctor-card {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 17px;
  min-width: 0;
  padding: 18px;
  overflow: hidden;
  border-radius: 30px;
  color: var(--ink);
  text-align: left;
  transition: transform 180ms ease;
}

.doctor-card::before,
.profile-photo::before {
  content: "";
  position: absolute;
  inset: auto 18px 18px;
  height: 42%;
  border-radius: 28px;
  background: color-mix(in srgb, var(--doctor-accent, #8fd8ce) 42%, white);
  opacity: 0.5;
}

.doctor-card__photo {
  position: relative;
  display: block;
  min-height: 0;
  overflow: hidden;
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(203, 219, 224, 0.88)),
    color-mix(in srgb, var(--doctor-accent, #8fd8ce) 34%, white);
}

.doctor-card__photo img,
.profile-photo img,
.doctor-picker img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.doctor-card__placeholder,
.profile-photo__placeholder {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 100%;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.3) 38%, transparent 39%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.56), rgba(208, 224, 229, 0.7));
  color: rgba(17, 23, 27, 0.48);
  font-weight: 880;
  line-height: 1;
}

.doctor-card__placeholder {
  font-size: clamp(3.2rem, 7vw, 5.4rem);
}

.profile-photo__placeholder {
  font-size: clamp(7rem, 16vw, 12rem);
}

.doctor-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 82px;
  padding: 4px 6px 8px;
}

.doctor-card__body small {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.3;
}

.doctor-card__body strong {
  margin-top: 9px;
  font-size: clamp(1.02rem, 1.35vw, 1.28rem);
  line-height: 1.08;
  overflow-wrap: anywhere;
  text-shadow: 0 0 12px color-mix(in srgb, var(--theme-glow) 46%, transparent);
}

.doctor-card__body em {
  display: none;
  margin-top: auto;
  color: #3d4d54;
  font-size: 0.96rem;
  font-style: normal;
  font-weight: 760;
}

.doctor-card__arrow {
  position: absolute;
  right: 24px;
  bottom: 24px;
  color: #12171b;
}

.profile-layout {
  display: grid;
  grid-template-columns: minmax(310px, 38%) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 20px;
  height: 100%;
}

.profile-photo {
  position: relative;
  grid-row: 1 / 3;
  min-height: 0;
  overflow: hidden;
  border-radius: 34px;
  box-shadow: var(--shadow);
}

.profile-photo img {
  position: relative;
  z-index: 1;
}

.profile-photo__glass {
  position: absolute;
  z-index: 2;
  left: 22px;
  right: 22px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.7);
  color: #243139;
  font-weight: 780;
  backdrop-filter: blur(22px);
}

.profile-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 18px;
  min-height: 0;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.66);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.52);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(26px);
}

.profile-info p {
  max-width: 760px;
  margin: 0;
  color: #3a4850;
  font-size: 1.22rem;
  line-height: 1.55;
}

.competency-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 0;
}

.competency-grid span {
  padding: 12px 15px;
  border-radius: 999px;
  background: rgba(17, 23, 27, 0.07);
  color: #34434a;
  font-weight: 760;
}

.profile-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.primary-action {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 94px;
  padding: 18px;
  border-radius: 22px;
  color: var(--ink);
  text-align: left;
  transition: transform 180ms ease;
}

.primary-action strong,
.primary-action small {
  display: block;
}

.primary-action strong {
  font-size: 1.08rem;
}

.primary-action small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 680;
}

.primary-action--dark {
  background: #11171b;
  color: white;
}

.primary-action--dark small {
  color: rgba(255, 255, 255, 0.68);
}

.primary-action--dark .primary-action__icon {
  background: rgba(255, 255, 255, 0.12);
}

.primary-action--gold .primary-action__icon {
  background: var(--gold);
  color: #101417;
}

.works-grid,
.promo-grid,
.services-grid,
.document-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.work-card,
.promo-card,
.service-panel,
.review-card,
.review-score,
.appointment-panel,
.contact-card,
.route-card,
.thanks-layout {
  border-radius: var(--radius-md);
}

.work-card {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
}

.smile-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  min-height: 0;
}

.smile-shot {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 54%, rgba(95, 48, 56, 0.28) 0 18%, transparent 19%),
    linear-gradient(180deg, rgba(255, 250, 244, 0.98), rgba(216, 230, 232, 0.95)),
    linear-gradient(115deg, rgba(240, 182, 167, 0.62), rgba(143, 216, 206, 0.42));
}

.smile-shot img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.04);
  opacity: 0.42;
  mix-blend-mode: multiply;
}

.smile-shot::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 12%;
  right: 12%;
  top: 34%;
  height: 36%;
  border-radius: 50% / 44%;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255, 196, 188, 0.72) 0 17%, transparent 18%),
    linear-gradient(180deg, rgba(154, 77, 84, 0.48), rgba(94, 48, 58, 0.32));
  box-shadow: inset 0 -18px 26px rgba(84, 42, 48, 0.16);
}

.smile-shot::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 18%;
  right: 18%;
  top: 45%;
  height: 19%;
  border-radius: 28px;
  background:
    linear-gradient(90deg, #fff 0 15%, #eef7f7 15% 17%, #fff 17% 32%, #eef7f7 32% 34%, #fff 34% 49%, #eef7f7 49% 51%, #fff 51% 66%, #eef7f7 66% 68%, #fff 68% 83%, #eef7f7 83% 85%, #fff 85%),
    #fff;
  box-shadow: 0 10px 18px rgba(62, 78, 82, 0.12);
}

.smile-shot--after::before {
  left: 10%;
  right: 10%;
}

.smile-shot--after::after {
  left: 14%;
  right: 14%;
  top: 44%;
  height: 21%;
  background:
    linear-gradient(90deg, #fff 0 16%, #f7ffff 16% 18%, #fff 18% 34%, #f7ffff 34% 36%, #fff 36% 52%, #f7ffff 52% 54%, #fff 54% 70%, #f7ffff 70% 72%, #fff 72% 88%, #f7ffff 88% 90%, #fff 90%),
    #fff;
}

.smile-shot span {
  position: absolute;
  z-index: 2;
  left: 16px;
  top: 16px;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(17, 23, 27, 0.78);
  color: white;
  font-size: 0.76rem;
  font-weight: 800;
}

.smile-shot i {
  position: absolute;
  z-index: 2;
  left: 18%;
  right: 18%;
  bottom: 18%;
  height: 9px;
  border-radius: 999px;
  background: rgba(98, 58, 64, 0.16);
}

.work-card--2 .smile-shot {
  background:
    radial-gradient(ellipse at 50% 54%, rgba(62, 74, 82, 0.18) 0 20%, transparent 21%),
    linear-gradient(180deg, rgba(246, 250, 251, 0.98), rgba(219, 232, 236, 0.95)),
    linear-gradient(115deg, rgba(174, 189, 255, 0.46), rgba(198, 179, 127, 0.35));
}

.work-card--3 .smile-shot {
  background:
    radial-gradient(ellipse at 50% 54%, rgba(70, 56, 88, 0.18) 0 20%, transparent 21%),
    linear-gradient(180deg, rgba(255, 251, 248, 0.98), rgba(223, 234, 238, 0.95)),
    linear-gradient(115deg, rgba(236, 197, 184, 0.56), rgba(184, 199, 255, 0.34));
}

.work-card__body {
  padding: 22px;
}

.work-card__body small,
.promo-card span,
.contact-card span {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 780;
  text-transform: uppercase;
}

.work-card__body h2,
.promo-card h2,
.service-panel h2,
.appointment-panel h2 {
  margin: 8px 0 12px;
  font-size: 1.34rem;
  line-height: 1.12;
}

.work-card__body p {
  margin: 7px 0 0;
  color: #56666d;
  line-height: 1.35;
}

.review-layout {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 18px;
  height: 100%;
}

.review-score {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 28px;
  text-align: center;
}

.review-score svg {
  color: var(--gold);
}

.review-score strong {
  margin-top: 18px;
  font-size: 4rem;
  line-height: 1;
}

.review-score span {
  margin-top: 10px;
  color: var(--muted);
  font-weight: 760;
}

.client-strip {
  display: grid;
  gap: 10px;
  width: 100%;
  margin-top: 26px;
}

.client-strip em {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 45px;
  padding: 0 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.58);
  color: #65737b;
  font-size: 0.86rem;
  font-style: normal;
  font-weight: 730;
}

.client-strip b {
  color: #15191d;
}

.review-grid {
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 16px;
  min-height: 0;
}

.review-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
}

.review-card div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.review-card div > strong {
  font-size: 1.16rem;
}

.review-card span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--gold);
  font-weight: 820;
}

.rating-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #d8a62a;
  filter:
    drop-shadow(0 3px 5px rgba(136, 91, 7, 0.24))
    drop-shadow(0 0 9px rgba(216, 166, 42, 0.48));
}

.rating-stars svg {
  stroke-width: 1.7;
}

.rating-stars svg:not(.is-filled) {
  opacity: 0.28;
}

.review-public-tools {
  position: absolute;
  z-index: 8;
  right: 14px;
  top: 14px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.review-public-tools .admin-content-tools {
  position: static;
}

.review-compose-button,
.review-form__save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  background: #11171b;
  color: white;
  padding: 0 18px;
  box-shadow: 0 18px 46px rgba(17, 23, 27, 0.18);
  font-weight: 840;
}

.review-form {
  display: grid;
  gap: 18px;
  width: min(680px, 100%);
  margin: 0 auto;
  padding: clamp(22px, 4vw, 36px);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.52)),
    linear-gradient(145deg, color-mix(in srgb, var(--aurora-1) 16%, transparent), color-mix(in srgb, var(--aurora-2) 12%, transparent));
  box-shadow: var(--shadow);
  backdrop-filter: blur(28px);
}

.review-form label {
  display: grid;
  gap: 8px;
  color: #53636b;
  font-weight: 780;
}

.review-form input,
.review-form textarea {
  width: 100%;
  border: 1px solid rgba(17, 23, 27, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  color: #11171b;
  font: inherit;
}

.review-form input {
  height: 54px;
  padding: 0 18px;
}

.review-form textarea {
  min-height: 150px;
  padding: 16px 18px;
  resize: none;
}

.review-form__rating {
  display: flex;
  gap: 8px;
}

.review-form__rating button {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(17, 23, 27, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  color: #a7a09a;
}

.review-form__rating button.is-selected {
  color: #d8a62a;
  opacity: 1;
  box-shadow:
    0 0 0 1px rgba(216, 166, 42, 0.22) inset,
    0 0 18px rgba(216, 166, 42, 0.38);
}

.review-form__rating button:not(.is-selected) {
  opacity: 0.64;
}

.review-form [data-review-status] {
  min-height: 20px;
  margin: 0;
  color: #53636b;
  font-weight: 760;
}

.review-form__save {
  min-height: 56px;
  border-radius: 20px;
}

.review-card p {
  margin: 18px 0 0;
  color: #45555d;
  font-size: 1.04rem;
  line-height: 1.45;
}

.document-grid {
  align-items: stretch;
}

.documents-hub-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.documents-hub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  min-height: 0;
  padding: 28px;
  overflow: hidden;
  border-radius: 30px;
  color: var(--ink);
  text-align: left;
  transition: transform 180ms ease;
}

.documents-hub-card:hover {
  transform: translateY(-2px);
}

.documents-hub-card::before {
  content: "";
  position: absolute;
  inset: 24px 24px auto;
  height: 44%;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.24)),
    repeating-linear-gradient(180deg, transparent 0 18px, rgba(30, 42, 48, 0.08) 19px 20px);
}

.documents-hub-card span {
  position: absolute;
  z-index: 1;
  right: 24px;
  top: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 23px;
  background: rgba(17, 23, 27, 0.92);
  color: white;
}

.documents-hub-card strong,
.documents-hub-card small {
  position: relative;
  z-index: 1;
  display: block;
}

.documents-hub-card strong {
  font-size: 1.68rem;
  line-height: 1.05;
}

.documents-hub-card small {
  margin-top: 10px;
  color: #5a686f;
  font-size: 0.96rem;
  font-weight: 760;
}

.documents-hub-card--mint {
  background: color-mix(in srgb, var(--mint) 24%, white);
}

.documents-hub-card--ice {
  background: color-mix(in srgb, var(--ice) 62%, white);
}

.documents-hub-card--gold {
  background: color-mix(in srgb, var(--gold) 24%, white);
}

.documents-hub-card--rose {
  background: color-mix(in srgb, var(--rose) 34%, white);
}

.document-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  padding: 28px;
  overflow: hidden;
  border-radius: 30px;
  color: var(--ink);
  text-align: left;
  transition: transform 180ms ease;
}

.document-card::before {
  content: "";
  position: absolute;
  inset: 24px 24px auto;
  height: 44%;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 20px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.2)),
    repeating-linear-gradient(180deg, transparent 0 17px, rgba(30, 42, 48, 0.08) 18px 19px);
}

.document-card--mint,
.document-sheet--mint {
  background: color-mix(in srgb, var(--mint) 23%, white);
}

.document-card--ice,
.document-sheet--ice {
  background: color-mix(in srgb, var(--ice) 60%, white);
}

.document-card--gold,
.document-sheet--gold {
  background: color-mix(in srgb, var(--gold) 24%, white);
}

.document-card--rose,
.document-sheet--rose {
  background: color-mix(in srgb, var(--rose) 34%, white);
}

.document-card__icon {
  position: absolute;
  right: 22px;
  top: 22px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  background: rgba(17, 23, 27, 0.9);
  color: white;
}

.document-card p,
.document-card h3,
.document-card strong {
  position: relative;
  z-index: 1;
}

.document-card p {
  margin: 0 0 10px;
  color: #5a686f;
  font-weight: 760;
}

.document-card h3 {
  margin: 0;
  font-size: 1.46rem;
  line-height: 1.12;
}

.document-card strong {
  margin-top: 18px;
  font-size: 1.1rem;
}

.document-viewer {
  position: relative;
  display: grid;
  place-items: center;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: rgba(17, 23, 27, 0.08);
}

.document-viewer__back {
  position: absolute;
  left: 22px;
  top: 22px;
  z-index: 2;
}

.document-sheet {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(680px, 72%);
  height: 88%;
  padding: 48px;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: 34px;
  box-shadow: var(--shadow);
  text-align: center;
}

.document-sheet__seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: #11171b;
  color: var(--gold);
}

.document-sheet p {
  margin: 24px 0 12px;
  color: #6b7a82;
  font-weight: 820;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.document-sheet h2 {
  max-width: 520px;
  margin: 0;
  font-size: 2.5rem;
  line-height: 1.05;
}

.document-sheet span {
  margin-top: 18px;
  color: #596870;
  font-size: 1.1rem;
}

.document-sheet strong {
  margin-top: 20px;
  font-size: 1.55rem;
}

.document-lines {
  display: grid;
  gap: 12px;
  width: 74%;
  margin-top: 38px;
}

.document-lines i {
  display: block;
  height: 11px;
  border-radius: 999px;
  background: rgba(17, 23, 27, 0.12);
}

.promo-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 28px;
}

.promo-card h2 {
  margin-top: 18px;
  font-size: 1.8rem;
}

.promo-card p {
  margin: 0;
  color: #526169;
  font-size: 1.04rem;
  line-height: 1.45;
}

.promo-card strong {
  margin-top: auto;
  color: #11171b;
  font-size: 2rem;
}

.service-panel {
  display: grid;
  grid-template-rows: auto repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
  padding: 24px;
}

.service-panel h2 {
  margin: 0 0 8px;
}

.service-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(17, 23, 27, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.54);
  color: var(--ink);
  text-align: left;
  transition: transform 180ms ease;
}

.service-row span {
  min-width: 0;
}

.service-row strong,
.service-row small {
  display: block;
}

.service-row strong {
  font-size: 1.02rem;
  line-height: 1.18;
}

.service-row small {
  margin-top: 6px;
  color: var(--muted);
  font-weight: 700;
}

.service-row em {
  flex: 0 0 auto;
  color: #11171b;
  font-style: normal;
  font-weight: 830;
}

.appointment-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 410px;
  gap: 18px;
  height: 100%;
}

.appointment-panel {
  min-height: 0;
  padding: 24px;
}

.appointment-panel h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
}

.doctor-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  height: calc(100% - 52px);
}

.doctor-picker button {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(17, 23, 27, 0.08);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.5);
  color: var(--ink);
  text-align: left;
}

.doctor-picker button.is-selected,
.time-grid button.is-selected {
  border-color: rgba(17, 23, 27, 0.5);
  background: rgba(17, 23, 27, 0.92);
  color: white;
}

.doctor-picker img {
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0;
  object-fit: cover;
}

.doctor-picker span {
  display: block;
  min-height: 92px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.doctor-picker button.is-selected span {
  background: rgba(17, 23, 27, 0.92);
}

.doctor-picker strong,
.doctor-picker small {
  display: block;
}

.doctor-picker strong {
  font-size: 1.02rem;
  line-height: 1.08;
}

.doctor-picker small {
  margin-top: 6px;
  color: currentColor;
  opacity: 0.64;
  line-height: 1.24;
}

.appointment-panel--time {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 16px;
}

.time-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-height: 0;
}

.time-grid button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgba(17, 23, 27, 0.08);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.54);
  color: var(--ink);
  font-size: 1.12rem;
  font-weight: 820;
}

.visit-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 70px;
  padding: 0 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.6);
}

.visit-summary span {
  color: #526169;
  font-weight: 760;
}

.visit-summary strong {
  font-size: 1.5rem;
}

.confirm-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 72px;
  border-radius: 22px;
  background: #11171b;
  color: white;
  font-weight: 840;
}

.contacts-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: 18px;
  height: 100%;
}

.map-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
  padding: 34px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(217, 236, 237, 0.52)),
    linear-gradient(90deg, rgba(143, 216, 206, 0.18), rgba(197, 167, 100, 0.1));
}

.map-gridline {
  position: absolute;
  border-radius: 999px;
  background: rgba(17, 23, 27, 0.08);
}

.map-gridline--one {
  left: -10%;
  right: 8%;
  top: 33%;
  height: 18px;
  transform: rotate(-14deg);
}

.map-gridline--two {
  left: 34%;
  top: -12%;
  bottom: -10%;
  width: 18px;
  transform: rotate(22deg);
}

.map-pin {
  position: absolute;
  left: 50%;
  top: 38%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  border-radius: 28px;
  background: #11171b;
  color: var(--gold);
  box-shadow: 0 18px 40px rgba(17, 23, 27, 0.22);
}

.map-panel strong {
  position: relative;
  z-index: 1;
  font-size: 2.2rem;
}

.map-panel em {
  position: relative;
  z-index: 1;
  margin-top: 9px;
  color: var(--muted);
  font-style: normal;
  font-weight: 760;
}

.contact-card-grid {
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 14px;
  min-height: 0;
}

.contact-card,
.route-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 24px;
}

.contact-card strong,
.route-card strong {
  margin-top: 10px;
  font-size: 1.28rem;
  line-height: 1.14;
}

.route-card {
  background: #11171b;
  color: white;
}

.route-card svg {
  color: var(--gold);
}

.route-card span {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.3;
}

.thanks-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 48px;
  text-align: center;
}

.thanks-layout h2 {
  margin: 0;
  font-size: 2.6rem;
  line-height: 1.05;
}

.thanks-layout p {
  max-width: 560px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 1.16rem;
  line-height: 1.45;
}

.thanks-actions {
  display: flex;
  gap: 14px;
  margin-top: 34px;
}

.thanks-actions button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 62px;
  padding: 0 22px;
  border-radius: 999px;
  font-weight: 820;
}

@media (max-width: 1180px) {
  .screen-shell {
    padding: 24px;
  }

  .screen-grid:has(.screen-aside) {
    grid-template-columns: minmax(0, 1fr) 280px;
  }

  .screen-heading h1,
  .splash-screen h1 {
    font-size: 3.3rem;
  }

  .menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }

  .doctors-grid,
  .works-grid,
  .promo-grid,
  .services-grid,
  .document-grid,
  .documents-hub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .promo-grid .promo-card:nth-child(3),
  .services-grid .service-panel:nth-child(3),
  .document-grid .document-card:nth-child(3) {
    display: none;
  }

  .splash-screen {
    grid-template-columns: 1fr;
  }

  .splash-card {
    display: none;
  }
}

@media (max-height: 790px) {
  .screen-shell {
    padding-top: 20px;
    padding-bottom: 24px;
  }

  .topbar {
    height: 54px;
    margin-bottom: 18px;
  }

  .brand-chip,
  .icon-action {
    height: 48px;
  }

  .screen-grid {
    height: calc(100% - 72px);
    gap: 18px;
  }

  .screen-heading h1,
  .splash-screen h1 {
    font-size: 3.15rem;
  }

  .screen-subtitle {
    margin-top: 10px;
    font-size: 1rem;
  }

  .profile-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .primary-action {
    min-height: 76px;
  }
}

@media (max-width: 820px) {
  .topbar__actions span {
    display: none;
  }

  .icon-action {
    min-width: 54px;
    padding: 0;
  }

  .screen-grid:has(.screen-aside) {
    grid-template-columns: minmax(0, 1fr);
  }

  .screen-aside {
    display: none;
  }

  .profile-layout,
  .appointment-layout,
  .contacts-layout,
  .review-layout {
    grid-template-columns: 1fr;
  }

  .profile-photo,
  .review-score,
  .contact-card-grid {
    display: none;
  }
}

/* Editor chrome uses its own high-contrast palette. Website themes must never
   make authoring controls unreadable. */
.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__popover {
  color-scheme: light;
  border: 1px solid #cbd4da !important;
  background: #f6f8f9 !important;
  color: #17242b !important;
  box-shadow: 0 18px 44px rgba(7, 18, 24, 0.28) !important;
}

.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__popover :is(p, strong, span, label, output, h2, h3, legend) {
  color: #17242b !important;
  text-shadow: none !important;
}

.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__popover :is(small, .page-layout-toolbar__popover-title, .page-layout-visual-layers__empty) {
  color: #62727b !important;
  text-shadow: none !important;
}

.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__popover button:not(.page-layout-toolbar__theme-button):not(.page-layout-toolbar__theme-delete) {
  border: 1px solid #d5dde1 !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #17242b !important;
  box-shadow: none !important;
}

.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__popover button:not(.page-layout-toolbar__theme-button):not(.page-layout-toolbar__theme-delete):hover:not(:disabled),
.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__popover button:not(.page-layout-toolbar__theme-button):not(.page-layout-toolbar__theme-delete).is-active {
  border-color: #3979bf !important;
  background: #e9f3ff !important;
  color: #0b4f98 !important;
}

.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__popover button:disabled {
  color: #8b989f !important;
  opacity: 0.56;
}

.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__popover :is(input, select, textarea) {
  border-color: #c9d3d9 !important;
  background: #fff !important;
  color: #17242b !important;
}

.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__popover option {
  background: #fff;
  color: #17242b;
}

.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__theme-delete {
  background: #fff !important;
  color: #b3293b !important;
}

.page-layout-toolbar__theme-configure {
  width: 100%;
  margin-top: 10px;
}

/* A familiar resize frame: drag any edge or corner, while the compact action
   group remains outside the block's content. */
.page-layout-editor-active .page-layout-target > .page-layout-handle {
  position: absolute;
  z-index: 100;
  inset: -7px !important;
  display: block;
  width: auto;
  height: auto;
  border: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}

.page-layout-editor-active .page-layout-handle > .page-layout-handle__actions {
  position: absolute;
  top: -32px;
  right: 0;
  display: flex;
  width: auto;
  height: 27px;
  gap: 4px;
  border: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: auto;
}

.page-layout-editor-active .page-layout-handle__actions > span {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid #4d6571;
  border-radius: 6px;
  background: #17242b;
  color: #fff;
  box-shadow: 0 6px 16px rgba(4, 16, 22, 0.26);
  cursor: pointer;
  font-size: 0.86rem;
  line-height: 1;
  pointer-events: auto;
  user-select: none;
  touch-action: none;
}

.page-layout-editor-active .page-layout-handle__actions > .page-layout-handle__move {
  cursor: grab;
  color: #f1c86f;
}

.page-layout-editor-active .page-layout-handle__actions > .page-layout-handle__delete {
  border-color: #a73d4b;
  background: #8f2635;
}

.page-layout-editor-active .page-layout-handle > .page-layout-handle__edge {
  position: absolute;
  display: block;
  width: 11px;
  height: 11px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 2px;
  background: #1769c2;
  box-shadow: 0 0 0 1px #174b82, 0 2px 8px rgba(6, 31, 54, 0.24);
  pointer-events: auto;
  touch-action: none;
}

.page-layout-handle__edge--n { top: -5px; left: calc(50% - 5px); cursor: ns-resize; }
.page-layout-handle__edge--ne { top: -5px; right: -5px; cursor: nesw-resize; }
.page-layout-handle__edge--e { top: calc(50% - 5px); right: -5px; cursor: ew-resize; }
.page-layout-handle__edge--se { right: -5px; bottom: -5px; cursor: nwse-resize; }
.page-layout-handle__edge--s { bottom: -5px; left: calc(50% - 5px); cursor: ns-resize; }
.page-layout-handle__edge--sw { bottom: -5px; left: -5px; cursor: nesw-resize; }
.page-layout-handle__edge--w { top: calc(50% - 5px); left: -5px; cursor: ew-resize; }
.page-layout-handle__edge--nw { top: -5px; left: -5px; cursor: nwse-resize; }

.layout-custom-card {
  container-type: inline-size;
}

.layout-custom-card :is(h1, h2, h3, h4, p, strong, small, span, button, a) {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.layout-custom-card :is(img, video, iframe, canvas) {
  max-width: 100%;
}

/* Theme studio: preset selection, live page preview and editable palette in
   one place. */
.site-theme-studio {
  position: fixed;
  z-index: 1800;
  inset: 0;
  display: grid;
  padding: 24px;
  place-items: center;
  background: rgba(9, 18, 23, 0.62);
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  backdrop-filter: blur(12px);
}

.site-theme-studio__panel {
  display: grid;
  width: min(1180px, 100%);
  max-height: min(860px, calc(100dvh - 48px));
  overflow: hidden;
  border: 1px solid #cbd5da;
  border-radius: 8px;
  background: #f5f7f8;
  box-shadow: 0 28px 80px rgba(4, 13, 18, 0.38);
  color: #17242b;
}

.site-theme-studio__header,
.site-theme-studio__panel > footer {
  display: flex;
  min-height: 60px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px;
  border-bottom: 1px solid #d6dee2;
  background: #fff;
}

.site-theme-studio__header span {
  color: #687781;
  font-size: 0.68rem;
  font-weight: 760;
  text-transform: uppercase;
}

.site-theme-studio__header h2 {
  margin: 3px 0 0;
  color: #17242b;
  font-size: 1.14rem;
  letter-spacing: 0;
}

.site-theme-studio__header button {
  width: 34px;
  height: 34px;
  border: 1px solid #ccd6db;
  border-radius: 6px;
  background: #fff;
  color: #17242b;
  font-size: 1.2rem;
}

.site-theme-studio__workspace {
  display: grid;
  min-height: 0;
  grid-template-columns: 240px minmax(300px, 1fr) 300px;
  overflow: hidden;
}

.site-theme-studio__library,
.site-theme-studio__settings {
  min-height: 0;
  overflow: auto;
  padding: 14px;
  background: #f8fafb;
}

.site-theme-studio__library {
  border-right: 1px solid #d6dee2;
}

.site-theme-studio__library > div {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.site-theme-studio__library button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 2px 9px;
  align-items: center;
  padding: 7px;
  border: 1px solid #d6dee2;
  border-radius: 6px;
  background: #fff;
  color: #17242b;
  text-align: left;
}

.site-theme-studio__library button.is-active {
  border-color: #1769c2;
  background: #eaf4ff;
  box-shadow: inset 3px 0 #1769c2;
}

.site-theme-studio__library button i {
  grid-row: 1 / 3;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--theme-option-a, #c7a96a), var(--theme-option-b, #67cfe4));
}

.site-theme-studio__library button span,
.site-theme-studio__library button small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-theme-studio__library button span { font-size: 0.78rem; font-weight: 760; }
.site-theme-studio__library button small { color: #6a7981; font-size: 0.66rem; }

.site-theme-studio__preview {
  display: grid;
  min-width: 0;
  padding: clamp(16px, 3vw, 34px);
  place-items: center;
  overflow: auto;
  background:
    radial-gradient(circle at 18% 16%, color-mix(in srgb, var(--aurora-1) 58%, transparent), transparent 42%),
    radial-gradient(circle at 78% 72%, color-mix(in srgb, var(--aurora-2) 48%, transparent), transparent 46%),
    var(--surface-tint);
  color: var(--heading);
  font-family: var(--site-font-family);
}

.site-theme-studio__preview-page {
  display: grid;
  width: min(520px, 100%);
  gap: 12px;
}

.site-theme-studio__preview-page > span,
.site-theme-studio__preview-page p,
.site-theme-studio__preview-page article small {
  color: var(--muted);
}

.site-theme-studio__preview-page h3,
.site-theme-studio__preview-page p {
  margin: 0;
}

.site-theme-studio__preview-page h3 {
  color: var(--heading);
  font-size: clamp(1.8rem, 5cqi, 3rem);
  letter-spacing: 0;
}

.site-theme-studio__preview-page article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--card-border);
  border-radius: calc(8px * var(--site-radius));
  background: linear-gradient(135deg, var(--card-base-1), var(--card-base-2));
  box-shadow: 0 16px 34px color-mix(in srgb, var(--theme-glow) 26%, transparent);
}

.site-theme-studio__preview-page article i {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: calc(7px * var(--site-radius));
  background: var(--icon-bg);
  color: var(--icon-color);
}

.site-theme-studio__preview-page article strong,
.site-theme-studio__preview-page article small {
  display: block;
}

.site-theme-studio__preview-page article button,
.site-theme-studio__save {
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: calc(6px * var(--site-radius));
  background: var(--gold);
  color: #101820;
  font-weight: 780;
}

.site-theme-studio__settings {
  display: grid;
  align-content: start;
  gap: 12px;
  border-left: 1px solid #d6dee2;
}

.site-theme-studio__settings > label,
.site-theme-studio__colors label {
  display: grid;
  gap: 5px;
  color: #53636c;
  font-size: 0.72rem;
  font-weight: 740;
}

.site-theme-studio__settings :is(input, select) {
  width: 100%;
  min-height: 38px;
  box-sizing: border-box;
  padding: 7px 9px;
  border: 1px solid #cbd5da;
  border-radius: 6px;
  background: #fff;
  color: #17242b;
  font: inherit;
}

.site-theme-studio__colors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.site-theme-studio__colors input[type="color"] {
  padding: 3px;
}

.site-theme-studio__settings > small {
  color: #687781;
  line-height: 1.45;
}

.site-theme-studio__panel > footer {
  justify-content: flex-end;
  border-top: 1px solid #d6dee2;
  border-bottom: 0;
}

.site-theme-studio__panel > footer button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #cbd5da;
  border-radius: 6px;
  background: #fff;
  color: #17242b;
  font-weight: 760;
}

.site-theme-studio__panel > footer .site-theme-studio__save {
  border-color: #1769c2;
  background: #1769c2;
  color: #fff;
}

/* Effect studios and inspectors keep readable controls independently from the
   selected website palette. */
:is(.grainient-studio__panel, .smoke-studio__panel, .site-block-inspector) {
  color-scheme: light;
  color: #17242b;
}

:is(.grainient-studio__panel, .smoke-studio__panel, .site-block-inspector) :is(input, select, textarea, option) {
  background-color: #fff;
  color: #17242b;
}

@media (max-width: 860px) {
  .site-theme-studio {
    padding: 10px;
  }

  .site-theme-studio__panel {
    max-height: calc(100dvh - 20px);
    overflow: auto;
  }

  .site-theme-studio__workspace {
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
  }

  .site-theme-studio__library,
  .site-theme-studio__settings {
    max-height: none;
    overflow: visible;
    border: 0;
  }

  .site-theme-studio__library > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 220px;
    overflow: auto;
  }

  .site-theme-studio__preview {
    min-height: 330px;
  }
}

/* The desktop creator has a single compact application strip. The page canvas
   intentionally stays free of editor labels and controls. */
body:has(.creator-window-chrome) .builder-editor-bar {
  display: none !important;
}

body:has(.creator-window-chrome) #root,
body:has(.creator-window-chrome):has(.builder-editor-bar) #root {
  padding-top: 32px !important;
}

.creator-window-chrome {
  gap: 3px;
  padding: 0 8px;
  overflow: visible;
}

.creator-window-chrome .creator-menu {
  display: flex;
  flex: 0 0 auto;
  gap: 0;
}

.creator-window-chrome .creator-menu__trigger {
  min-height: 28px;
  padding: 0 5px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.67rem;
  font-weight: 400;
  letter-spacing: 0;
}

.creator-window-chrome .creator-menu__trigger:hover,
.creator-window-chrome .creator-menu__trigger[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.creator-window-chrome > .page-layout-toolbar.is-editing {
  position: static;
  z-index: auto;
  display: block;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__top {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 1px;
  flex-wrap: nowrap;
}

.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__group,
.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__history {
  position: relative;
  flex: 0 0 auto;
}

.creator-window-chrome > .page-layout-toolbar.is-editing button {
  min-height: 28px;
  padding: 0 5px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.65rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.creator-window-chrome > .page-layout-toolbar.is-editing button:hover:not(:disabled),
.creator-window-chrome > .page-layout-toolbar.is-editing button.is-open,
.creator-window-chrome > .page-layout-toolbar.is-editing button.is-active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.creator-window-chrome > .page-layout-toolbar.is-editing button:disabled {
  color: rgba(255, 255, 255, 0.34);
}

.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__save,
.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__close {
  font-weight: 400;
}

.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__menu-trigger span {
  display: none;
}

.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__popover {
  position: fixed;
  z-index: 1100;
  top: 36px;
  left: 8px;
  width: min(520px, calc(100vw - 16px));
  max-height: min(74vh, 760px);
  overflow: auto;
  border-radius: 0 0 8px 8px;
}

@media (max-width: 1180px) {
  .creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__top {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__top::-webkit-scrollbar {
    display: none;
  }
}

/* Original procedural mesh gradients inspired by modern gradient tooling.
   The texture is generated in CSS and ships with the exported site. */
.site-block-visual-background--grainient,
.grainient-studio__preview-surface {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  isolation: isolate;
  background: var(--surface-tint, #eef7fb);
}

.grainient-surface__mesh {
  position: absolute;
  z-index: 0;
  inset: -14%;
  background: var(--grainient-bg);
  filter:
    blur(var(--grainient-blur))
    saturate(var(--grainient-saturation))
    contrast(var(--grainient-contrast));
  transform:
    translate3d(var(--grainient-pointer-x, 0), var(--grainient-pointer-y, 0), 0)
    scale(var(--grainient-scale));
  transform-origin: center;
  will-change: transform, background-position;
}

.grainient-surface__ribbon {
  position: absolute;
  z-index: 3;
  inset: -24%;
  opacity: 0;
  pointer-events: none;
  transform-origin: center;
  will-change: transform, opacity;
}

[data-site-grainient][data-grainient-style="horizon"] .grainient-surface__ribbon {
  inset: 38% -22%;
  opacity: .94;
  background: linear-gradient(90deg, transparent 0%, rgb(255 255 255 / 6%) 24%, rgb(255 255 255 / 92%) 49%, rgb(255 255 255 / 8%) 76%, transparent 100%);
  box-shadow: 0 0 22px rgb(130 218 255 / 65%), 0 0 80px rgb(62 118 255 / 34%);
  mix-blend-mode: screen;
}

[data-site-grainient][data-grainient-style="ribbons"] .grainient-surface__ribbon,
[data-site-grainient][data-grainient-style="silk"] .grainient-surface__ribbon {
  opacity: .78;
  background:
    repeating-linear-gradient(132deg, transparent 0 11%, rgb(255 255 255 / 3%) 12% 15%, rgb(255 255 255 / 46%) 16% 17%, transparent 19% 31%),
    var(--grainient-bg);
  background-size: 100% 100%, 180% 180%;
  filter: blur(7px) saturate(1.22);
  mix-blend-mode: screen;
  transform: rotate(-8deg) scale(1.14);
}

[data-site-grainient][data-grainient-style="silk"] .grainient-surface__ribbon {
  filter: blur(15px) saturate(1.28);
  opacity: .9;
  transform: rotate(10deg) scale(1.22);
}

[data-site-grainient][data-grainient-style="halo"] .grainient-surface__ribbon {
  opacity: .88;
  background:
    radial-gradient(ellipse 36% 50% at 50% 50%, transparent 34%, rgb(255 255 255 / 72%) 38%, rgb(188 247 255 / 22%) 47%, transparent 66%),
    radial-gradient(ellipse 74% 74% at 50% 50%, transparent 46%, rgb(87 190 255 / 28%) 57%, transparent 76%);
  filter: blur(3px);
  mix-blend-mode: screen;
}

[data-site-grainient][data-grainient-style="glass"] .grainient-surface__ribbon {
  opacity: .76;
  background:
    radial-gradient(ellipse 35% 70% at 12% 84%, rgb(255 255 255 / 68%) 0 2%, transparent 3% 34%, rgb(255 255 255 / 18%) 35% 39%, transparent 40%),
    radial-gradient(ellipse 45% 75% at 88% 15%, rgb(255 255 255 / 54%) 0 2%, transparent 3% 34%, rgb(255 255 255 / 16%) 35% 39%, transparent 40%);
  filter: blur(1px);
  mix-blend-mode: soft-light;
}

[data-site-grainient][data-grainient-style="rays"] .grainient-surface__ribbon {
  opacity: .67;
  background: repeating-conic-gradient(from 0deg at 66% 54%, rgb(255 255 255 / 0%) 0deg 7deg, rgb(255 255 255 / 38%) 8deg 10deg, rgb(255 255 255 / 0%) 11deg 19deg);
  filter: blur(2px);
  mix-blend-mode: soft-light;
}

[data-site-grainient][data-grainient-style="orbit"] .grainient-surface__ribbon {
  opacity: .82;
  border: 2px solid rgb(255 255 255 / 64%);
  border-radius: 48%;
  box-shadow: 0 0 0 28px rgb(255 255 255 / 6%), 0 0 64px rgb(170 70 255 / 52%);
  transform: rotate(31deg) scale(.68, 1.16);
  mix-blend-mode: screen;
}

[data-site-grainient][data-grainient-style="tunnel"] .grainient-surface__ribbon {
  opacity: .92;
  background: repeating-radial-gradient(ellipse at 50% 50%, transparent 0 5%, rgb(255 255 255 / 36%) 6% 7%, transparent 8% 14%);
  filter: blur(2px);
  mix-blend-mode: screen;
}

[data-site-grainient][data-grainient-style="prism"] .grainient-surface__ribbon {
  opacity: .58;
  background:
    conic-gradient(from 24deg at 32% 52%, transparent 0 15%, rgb(255 255 255 / 62%) 17% 20%, transparent 22% 39%, rgb(255 255 255 / 30%) 41% 44%, transparent 46% 100%),
    linear-gradient(118deg, transparent 30%, rgb(255 255 255 / 36%) 50%, transparent 70%);
  mix-blend-mode: soft-light;
}

[data-site-grainient][data-grainient-style="energyField"] .grainient-surface__ribbon {
  inset: -7% 15%;
  z-index: 6;
  opacity: 1;
  border: 2px solid rgb(210 252 255 / 92%);
  border-radius: 48%;
  background:
    radial-gradient(ellipse 28% 42% at 50% 50%, rgb(229 254 255 / 76%) 0 3%, rgb(49 229 255 / 26%) 14%, transparent 31%),
    radial-gradient(ellipse 38% 62% at 50% 50%, transparent 25%, rgb(69 219 255 / 62%) 32%, transparent 42%),
    radial-gradient(ellipse 44% 68% at 50% 50%, transparent 43%, rgb(102 223 255 / 66%) 48%, transparent 56%),
    radial-gradient(ellipse 50% 76% at 50% 50%, transparent 58%, rgb(21 140 255 / 48%) 64%, transparent 72%);
  box-shadow: inset 0 0 36px rgb(132 237 255 / 58%), 0 0 118px rgb(0 151 255 / 66%);
  filter: blur(.65px);
  mix-blend-mode: normal;
}

[data-site-grainient][data-grainient-style="energyField"] .grainient-surface__ribbon::before,
[data-site-grainient][data-grainient-style="energyField"] .grainient-surface__ribbon::after {
  content: "";
  position: absolute;
  inset: 16%;
  border: 1px solid rgb(197 250 255 / 62%);
  border-radius: inherit;
  box-shadow: 0 0 32px rgb(42 181 255 / 66%);
}

[data-site-grainient][data-grainient-style="energyField"] .grainient-surface__ribbon::after {
  inset: 30%;
  border-width: 2px;
  opacity: .82;
}

[data-site-grainient][data-grainient-style="nebulaCloud"] .grainient-surface__ribbon {
  z-index: 6;
  opacity: 1;
  background:
    radial-gradient(ellipse 16% 16% at 51% 48%, rgb(239 254 255 / 96%) 0%, rgb(92 229 255 / 86%) 9%, rgb(12 138 230 / 42%) 24%, transparent 44%),
    radial-gradient(ellipse 44% 36% at 52% 52%, transparent 12%, rgb(22 164 239 / 68%) 30%, rgb(4 48 123 / 36%) 46%, transparent 68%),
    radial-gradient(ellipse 44% 60% at 38% 58%, rgb(37 142 230 / 48%), transparent 63%),
    radial-gradient(ellipse 58% 42% at 64% 35%, rgb(5 204 255 / 36%), transparent 66%);
  box-shadow: 0 0 130px rgb(11 143 255 / 62%), inset 0 0 78px rgb(120 235 255 / 36%);
  filter: blur(8px) saturate(1.36);
  mix-blend-mode: normal;
}

[data-site-grainient][data-grainient-style="nebulaCloud"] .grainient-surface__ribbon::before {
  content: "";
  position: absolute;
  inset: 18%;
  border: 1px solid rgb(185 243 255 / 68%);
  border-radius: 48%;
  box-shadow: 0 0 78px rgb(0 157 255 / 82%), inset 0 0 52px rgb(47 192 255 / 42%);
}

[data-site-grainient][data-grainient-motion="true"] .grainient-surface__mesh {
  animation: grainient-mesh-drift var(--grainient-duration) ease-in-out infinite alternate;
}

[data-site-grainient][data-grainient-motion="true"] .grainient-surface__ribbon {
  animation: grainient-ribbon-drift calc(var(--grainient-duration) * 0.82) ease-in-out infinite alternate;
}

[data-site-grainient][data-grainient-motion="true"][data-grainient-style="horizon"] .grainient-surface__ribbon {
  animation: grainient-horizon-scan calc(var(--grainient-duration) * 0.55) ease-in-out infinite;
}

[data-site-grainient][data-grainient-motion="true"][data-grainient-style="halo"] .grainient-surface__ribbon,
[data-site-grainient][data-grainient-motion="true"][data-grainient-style="orbit"] .grainient-surface__ribbon {
  animation: grainient-orbit-turn var(--grainient-duration) linear infinite;
}

[data-site-grainient][data-grainient-motion="true"][data-grainient-style="tunnel"] .grainient-surface__ribbon {
  animation: grainient-tunnel-pulse calc(var(--grainient-duration) * 0.62) ease-in-out infinite alternate;
}

[data-site-grainient][data-grainient-motion="true"][data-grainient-style="energyField"] .grainient-surface__ribbon {
  animation: grainient-energy-field var(--grainient-duration) ease-in-out infinite alternate;
}

[data-site-grainient][data-grainient-motion="true"][data-grainient-style="nebulaCloud"] .grainient-surface__ribbon {
  animation: grainient-nebula-cloud calc(var(--grainient-duration) * 1.35) ease-in-out infinite alternate;
}

.grainient-surface__grain {
  position: absolute;
  z-index: 1;
  inset: -35%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' seed='17' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.74'/%3E%3C/svg%3E");
  background-size: 190px 190px;
  mix-blend-mode: soft-light;
  opacity: var(--grainient-grain);
  pointer-events: none;
}

[data-site-grainient][data-grainient-motion="true"] .grainient-surface__grain {
  animation: grainient-grain-shift 1.1s steps(2, end) infinite;
}

.grainient-surface__light {
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    radial-gradient(circle at 50% 12%, rgb(255 255 255 / 22%), transparent 38%),
    linear-gradient(180deg, rgb(255 255 255 / 5%), rgb(0 0 0 / 8%));
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.site-block-visual-background.site-block-visual-background--grainient::after {
  opacity: 0.12;
  mix-blend-mode: soft-light;
}

.page-layout-toolbar__preset-grid--grainient button {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto;
  min-height: 54px;
  column-gap: 8px;
  row-gap: 1px;
}

.page-layout-toolbar__preset-grid--grainient i.is-grainient {
  grid-row: 1 / 3;
  width: 42px;
  height: 38px;
  border: 1px solid rgb(255 255 255 / 46%);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 8%), 0 5px 13px rgb(10 24 38 / 14%);
}

.page-layout-toolbar__preset-grid--grainient span,
.page-layout-toolbar__preset-grid--grainient small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-layout-toolbar__preset-grid--grainient span {
  color: var(--heading);
  font-size: 0.74rem;
  font-weight: 820;
}

.page-layout-toolbar__preset-grid--grainient small {
  color: var(--muted);
  font-size: 0.64rem;
}

.site-block-visual-asset {
  --visual-asset-size: calc(58px * var(--visual-asset-scale, 1));
  display: inline-grid;
  flex: 0 0 auto;
  width: var(--visual-asset-size);
  height: var(--visual-asset-size);
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1;
  place-items: center;
  align-self: flex-start;
  overflow: hidden;
  background: linear-gradient(145deg, var(--visual-asset-a), var(--visual-asset-b));
  color: var(--visual-asset-foreground);
  line-height: 1;
  user-select: none;
}

.site-block-visual-asset svg {
  width: 54%;
  height: 54%;
  stroke-width: 1.8;
}

.site-block-visual-asset--avatar > span {
  font-size: calc(var(--visual-asset-size) * 0.34);
  font-weight: 850;
}

.site-block-visual-asset--circle {
  border-radius: 50%;
}

.site-block-visual-asset--rounded {
  border-radius: 14px;
}

.site-block-visual-asset--square {
  border-radius: 0;
}

.site-block-visual-asset--blob {
  border-radius: 62% 38% 66% 34% / 38% 58% 42% 62%;
}

.site-block-visual-asset.has-shadow {
  box-shadow:
    inset 0 1px 1px rgb(255 255 255 / 48%),
    0 12px 26px color-mix(in srgb, var(--visual-asset-a) 36%, transparent);
}

.site-block-visual-asset--animatedImage {
  padding: 0;
  background: #060912;
}

.site-block-visual-asset--animatedImage[data-image-mode="card"] {
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
  aspect-ratio: 1;
  align-self: center;
}

.layout-custom-card:has(.site-block-visual-asset--animatedImage[data-image-mode="card"]) .site-block-text-surface {
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: 0;
  overflow: hidden;
}

.animated-image-asset {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  background: #050811;
  opacity: var(--animated-image-opacity, 1);
  transform: translateZ(0);
}

.animated-image-asset__image,
.animated-image-asset__canvas,
.animated-image-asset__scan {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.animated-image-asset__image {
  z-index: 0;
  object-fit: var(--animated-image-fit, contain);
  animation: animated-image-breathe calc(7s * var(--animated-image-speed, 1)) ease-in-out infinite alternate;
  backface-visibility: hidden;
  transform-origin: 50% 50%;
  user-select: none;
  will-change: transform, filter;
}

.animated-image-asset__canvas {
  z-index: 1;
  pointer-events: none;
}

.animated-image-asset__scan {
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 36%, color-mix(in srgb, var(--animated-image-accent) 32%, transparent) 49%, transparent 62%);
  mix-blend-mode: screen;
  opacity: 0.34;
  animation: animated-image-scan calc(6.4s * var(--animated-image-speed, 1)) linear infinite;
}

.animated-image-asset--icon,
.animated-image-asset--card {
  border-radius: inherit;
}

.animated-image-asset--lightning .animated-image-asset__scan,
.animated-image-asset--bolt .animated-image-asset__scan {
  opacity: 0.5;
  animation-duration: calc(3.8s * var(--animated-image-speed, 1));
}

.animated-image-asset--dualPulse > .animated-image-asset__image,
.animated-image-asset--shadowPulse > .animated-image-asset__image {
  animation-name: animated-image-parallax;
}

@keyframes animated-image-breathe {
  0% { transform: scale(1.015) translate3d(-0.45%, -0.25%, 0); filter: saturate(1.02) brightness(0.98); }
  55% { transform: scale(1.045) translate3d(0.35%, 0.2%, 0); filter: saturate(1.16) brightness(1.06); }
  100% { transform: scale(1.025) translate3d(0.2%, -0.35%, 0); filter: saturate(1.08) brightness(1.02); }
}

@keyframes animated-image-parallax {
  0% { transform: scale(1.02) translate3d(-0.7%, 0, 0); filter: saturate(1.04) brightness(0.96); }
  50% { transform: scale(1.06) translate3d(0.6%, -0.45%, 0); filter: saturate(1.22) brightness(1.08); }
  100% { transform: scale(1.035) translate3d(0, 0.5%, 0); filter: saturate(1.1) brightness(1.01); }
}

@keyframes animated-image-scan {
  0% { transform: translate3d(0, -72%, 0); opacity: 0; }
  16% { opacity: 0.34; }
  68% { opacity: 0.22; }
  100% { transform: translate3d(0, 72%, 0); opacity: 0; }
}

.layout-custom-card--icon,
.layout-custom-card--avatar {
  place-items: center;
}

.layout-custom-card--icon .site-block-text-surface,
.layout-custom-card--avatar .site-block-text-surface {
  min-height: 100%;
  align-content: center;
  justify-items: center;
}

.site-block-text-surface > .layout-custom-card__title:empty,
.site-block-text-surface > .layout-custom-card__subtitle:empty {
  display: none;
}

.site-block-inspector__visual-editor {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--heading) 12%, transparent);
  border-radius: 10px;
}

.site-block-inspector__visual-editor > span {
  min-width: 0;
}

.site-block-inspector__visual-editor strong,
.site-block-inspector__visual-editor small {
  display: block;
}

.site-block-inspector__visual-editor strong {
  color: var(--heading);
  font-size: 0.79rem;
}

.site-block-inspector__visual-editor small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.35;
}

.site-block-inspector__visual-editor > button {
  grid-column: 1 / -1;
}

.site-block-inspector__asset-preview {
  display: grid;
  width: 58px;
  min-height: 58px;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-tint) 78%, transparent);
}

.site-block-inspector__asset-preview:empty::before {
  content: "Нет";
  color: var(--muted);
  font-size: 0.68rem;
}

.site-block-inspector__grainient-preview {
  width: 70px;
  height: 58px;
  border: 1px solid rgb(255 255 255 / 46%);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgb(4 18 27 / 15%);
}

.grainient-studio,
.visual-asset-studio {
  position: fixed;
  z-index: 520;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgb(3 11 18 / 58%);
  opacity: 0;
  transition: opacity 160ms ease;
  backdrop-filter: blur(10px);
}

.grainient-studio.is-visible,
.visual-asset-studio.is-visible {
  opacity: 1;
}

.grainient-studio__panel,
.visual-asset-studio__panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1060px, calc(100vw - 36px));
  height: min(850px, calc(100dvh - 36px));
  max-height: min(850px, calc(100dvh - 36px));
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 8px;
  background: #f7fafc;
  box-shadow: 0 34px 100px rgb(0 8 16 / 44%);
  color: #15202a;
}

.grainient-studio header,
.grainient-studio footer,
.visual-asset-studio header,
.visual-asset-studio footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid #dfe6ea;
}

.grainient-studio footer,
.visual-asset-studio footer {
  justify-content: flex-end;
  border-top: 1px solid #dfe6ea;
  border-bottom: 0;
}

.grainient-studio header span,
.visual-asset-studio header span {
  display: block;
  color: #697985;
  font-size: 0.67rem;
  font-weight: 800;
  text-transform: uppercase;
}

.grainient-studio header strong,
.visual-asset-studio header strong {
  display: block;
  margin-top: 2px;
  font-size: 1rem;
}

.grainient-studio button,
.visual-asset-studio button {
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid #cbd6dc;
  border-radius: 6px;
  background: #ffffff;
  color: #18232b;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 780;
  cursor: pointer;
}

.grainient-studio button.is-primary,
.visual-asset-studio button.is-primary {
  border-color: #0e645e;
  background: #0e645e;
  color: #ffffff;
}

.grainient-studio button.is-active,
.visual-asset-studio button.is-active {
  border-color: #267b78;
  box-shadow: 0 0 0 2px rgb(38 123 120 / 16%);
}

.grainient-studio header > button,
.visual-asset-studio header > button {
  width: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 1.35rem;
}

.grainient-studio__workspace,
.visual-asset-studio__workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.grainient-studio__catalog,
.visual-asset-studio__library,
.grainient-studio__editor,
.visual-asset-studio__settings {
  min-height: 0;
  overflow: auto;
  padding: 16px;
}

.grainient-studio__catalog,
.visual-asset-studio__library {
  border-right: 1px solid #dfe6ea;
}

.grainient-studio nav,
.visual-asset-studio nav {
  display: flex;
  gap: 6px;
  padding-bottom: 12px;
  overflow-x: auto;
}

.grainient-studio nav button,
.visual-asset-studio nav button {
  flex: 0 0 auto;
  min-height: 30px;
  padding-block: 4px;
}

.grainient-studio__presets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.grainient-studio__presets button {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 7px;
  text-align: left;
}

.grainient-studio__presets i {
  display: block;
  aspect-ratio: 1.42;
  border-radius: 5px;
}

.grainient-studio__presets span,
.grainient-studio__presets small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grainient-studio__presets small {
  color: #6b7a84;
  font-size: 0.66rem;
}

.grainient-studio__editor,
.visual-asset-studio__settings {
  display: grid;
  align-content: start;
  gap: 13px;
}

.grainient-studio__preview {
  position: relative;
  min-height: 210px;
  overflow: hidden;
  border-radius: 6px;
  background: #e8edf0;
}

.grainient-studio__preview .effect-studio-composition { border-radius: inherit; }

.grainient-studio__colors,
.visual-asset-studio__colors {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.visual-asset-studio__colors {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grainient-studio label,
.visual-asset-studio label {
  display: grid;
  gap: 5px;
  color: #52636e;
  font-size: 0.72rem;
  font-weight: 760;
}

.grainient-studio input,
.grainient-studio select,
.visual-asset-studio input,
.visual-asset-studio select {
  width: 100%;
  box-sizing: border-box;
  min-height: 36px;
  border: 1px solid #c9d4da;
  border-radius: 6px;
  background: #ffffff;
  color: #17222a;
  font: inherit;
}

.grainient-studio input[type="color"],
.visual-asset-studio input[type="color"] {
  padding: 3px;
}

.grainient-studio__controls {
  display: grid;
  gap: 9px;
}

.grainient-studio__controls label > span,
.visual-asset-studio__range > span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.grainient-studio__toggles,
.visual-asset-studio__check {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.grainient-studio__toggles label,
.visual-asset-studio__check {
  display: flex;
  align-items: center;
}

.grainient-studio__toggles input,
.visual-asset-studio__check input {
  width: auto;
  min-height: 0;
}

.visual-asset-studio__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.visual-asset-studio__icons {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.visual-asset-studio__icons button {
  display: grid;
  min-width: 0;
  min-height: 68px;
  place-items: center;
  gap: 4px;
  padding: 7px 4px;
}

.visual-asset-studio__icons span {
  width: 100%;
  overflow: hidden;
  color: #5d6c75;
  font-size: 0.63rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visual-asset-studio__avatar-title {
  display: block;
  margin: 18px 0 9px;
}

.visual-asset-studio__avatars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.visual-asset-studio__avatars button {
  display: grid;
  min-width: 0;
  place-items: center;
  gap: 5px;
}

.visual-asset-studio__avatars i {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--avatar-a), var(--avatar-b));
  color: var(--avatar-fg);
  font-style: normal;
  font-weight: 850;
}

.visual-asset-studio__avatars span {
  overflow: hidden;
  max-width: 100%;
  color: #5d6c75;
  font-size: 0.65rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visual-asset-studio__library-note {
  margin: -3px 0 9px;
  color: #64747e;
  font-size: 0.68rem;
  line-height: 1.4;
}

.visual-asset-studio__animated-images {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.visual-asset-studio__animated-images button {
  display: grid;
  min-width: 0;
  gap: 5px;
  padding: 6px;
  text-align: left;
}

.visual-asset-studio__animated-images img {
  width: 100%;
  aspect-ratio: 1.36;
  border-radius: 5px;
  background: #070a12;
  object-fit: cover;
}

.visual-asset-studio__animated-images span {
  min-width: 0;
  overflow: hidden;
  color: #53636d;
  font-size: 0.65rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visual-asset-studio__animation-settings {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 12px;
  border: 1px solid #d5dfe4;
  border-radius: 7px;
}

.visual-asset-studio__animation-settings legend {
  padding: 0 5px;
  color: #31444f;
  font-size: 0.72rem;
  font-weight: 820;
}

.visual-asset-studio__preview {
  display: grid;
  min-height: 210px;
  place-items: center;
  border-radius: 6px;
  background:
    linear-gradient(45deg, #edf1f3 25%, transparent 25%),
    linear-gradient(-45deg, #edf1f3 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #edf1f3 75%),
    linear-gradient(-45deg, transparent 75%, #edf1f3 75%),
    #ffffff;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}

.visual-asset-studio__preview .site-block-visual-asset {
  --visual-asset-size: calc(94px * var(--visual-asset-scale, 1));
}

.visual-asset-studio__preview .site-block-visual-asset--animatedImage {
  max-width: calc(100% - 18px);
  max-height: 194px;
}

@keyframes grainient-mesh-drift {
  0% {
    background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 50%;
  }
  50% {
    background-position: 7% 10%, 92% 7%, 86% 94%, 12% 88%, 50% 50%;
  }
  100% {
    background-position: 14% 4%, 84% 14%, 94% 86%, 5% 94%, 100% 50%;
  }
}

@keyframes grainient-ribbon-drift {
  0% { transform: translate3d(-5%, -3%, 0) rotate(-8deg) scale(1.1); }
  100% { transform: translate3d(5%, 4%, 0) rotate(8deg) scale(1.2); }
}

@keyframes grainient-horizon-scan {
  0%, 100% { transform: translate3d(-10%, -2px, 0) scaleX(.76); opacity: .36; }
  50% { transform: translate3d(10%, 2px, 0) scaleX(1.12); opacity: 1; }
}

@keyframes grainient-orbit-turn {
  0% { transform: rotate(0deg) scale(.72, 1.12); }
  100% { transform: rotate(360deg) scale(.72, 1.12); }
}

@keyframes grainient-tunnel-pulse {
  0% { transform: scale(.72); opacity: .38; }
  100% { transform: scale(1.22); opacity: .9; }
}

@keyframes grainient-energy-field {
  0% { transform: rotate(-5deg) scale(.88, .96); opacity: .52; filter: blur(2.6px) saturate(1.08); }
  52% { transform: rotate(3deg) scale(1.06, 1.02); opacity: 1; filter: blur(.7px) saturate(1.32); }
  100% { transform: rotate(8deg) scale(.96, 1.12); opacity: .72; filter: blur(2px) saturate(1.2); }
}

@keyframes grainient-nebula-cloud {
  0% { transform: translate3d(-3%, 4%, 0) rotate(-9deg) scale(.88); opacity: .44; }
  48% { transform: translate3d(4%, -3%, 0) rotate(5deg) scale(1.12); opacity: 1; }
  100% { transform: translate3d(-1%, -5%, 0) rotate(11deg) scale(.96); opacity: .62; }
}

@keyframes grainient-grain-shift {
  0% { transform: translate3d(-2%, -3%, 0); }
  25% { transform: translate3d(3%, 1%, 0); }
  50% { transform: translate3d(-1%, 4%, 0); }
  75% { transform: translate3d(4%, -2%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@media (max-width: 800px) {
  .grainient-studio,
  .visual-asset-studio {
    padding: 8px;
  }

  .grainient-studio__panel,
  .visual-asset-studio__panel {
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
  }

  .grainient-studio__workspace,
  .visual-asset-studio__workspace {
    display: block;
    overflow: auto;
  }

  .grainient-studio__catalog,
  .visual-asset-studio__library {
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid #dfe6ea;
  }

  .grainient-studio__editor,
  .visual-asset-studio__settings {
    overflow: visible;
  }

  .grainient-studio__presets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .visual-asset-studio__icons {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .visual-asset-studio__avatars {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .visual-asset-studio__animated-images {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-site-grainient] .grainient-surface__mesh,
  [data-site-grainient] .grainient-surface__ribbon,
  [data-site-grainient] .grainient-surface__grain {
    animation: none !important;
  }

  .animated-image-asset__image,
  .animated-image-asset__scan {
    animation: none !important;
  }
}

/* Theme catalogs and original animated material presets. */
html[data-theme="deep-ocean"],
html[data-theme="solar-plasma"],
html[data-theme="bio-lume"],
html[data-theme="crystal-nebula"] {
  color-scheme: dark;
}

html[data-theme="prism-glass"] .kiosk-app,
html[data-theme="medical-pearl"] .kiosk-app {
  background:
    radial-gradient(ellipse at 14% 10%, color-mix(in srgb, var(--aurora-1) 66%, white), transparent 42%),
    radial-gradient(ellipse at 86% 18%, color-mix(in srgb, var(--aurora-2) 48%, transparent), transparent 46%),
    radial-gradient(ellipse at 48% 100%, color-mix(in srgb, var(--aurora-3) 42%, transparent), transparent 48%),
    linear-gradient(135deg, #faffff, var(--surface-tint));
}

html[data-theme="liquid-chrome"] .kiosk-app {
  background:
    radial-gradient(ellipse at 18% 16%, #ffffff, transparent 35%),
    radial-gradient(ellipse at 78% 20%, color-mix(in srgb, var(--aurora-3) 54%, transparent), transparent 42%),
    linear-gradient(125deg, #f9fdff 0%, #a7b7c0 38%, #f7ffff 56%, #728893 76%, #e9f7fa 100%);
}

html[data-theme="deep-ocean"] .kiosk-app {
  background:
    radial-gradient(ellipse at 50% 112%, rgb(25 229 199 / 28%), transparent 42%),
    radial-gradient(ellipse at 16% 15%, rgb(32 163 197 / 28%), transparent 38%),
    linear-gradient(155deg, #021322, #052d48 52%, #021c32);
}

html[data-theme="solar-plasma"] .kiosk-app {
  background:
    radial-gradient(circle at 76% 18%, rgb(255 211 98 / 34%), transparent 22%),
    radial-gradient(ellipse at 16% 88%, rgb(255 89 42 / 34%), transparent 36%),
    linear-gradient(145deg, #1a0611, #4d1122 50%, #210817);
}

html[data-theme="bio-lume"] .kiosk-app {
  background:
    radial-gradient(ellipse at 18% 82%, rgb(81 255 189 / 28%), transparent 34%),
    radial-gradient(ellipse at 82% 14%, rgb(187 255 103 / 24%), transparent 32%),
    linear-gradient(145deg, #021a20, #073c3b 52%, #02252d);
}

html[data-theme="crystal-nebula"] .kiosk-app {
  background:
    radial-gradient(ellipse at 18% 16%, rgb(69 101 255 / 36%), transparent 34%),
    radial-gradient(ellipse at 80% 28%, rgb(199 72 221 / 31%), transparent 40%),
    radial-gradient(ellipse at 54% 92%, rgb(67 211 255 / 24%), transparent 34%),
    linear-gradient(145deg, #080923, #1c1454 52%, #14082e);
}

html:is(
  [data-theme="prism-glass"],
  [data-theme="medical-pearl"],
  [data-theme="liquid-chrome"],
  [data-theme="deep-ocean"],
  [data-theme="solar-plasma"],
  [data-theme="bio-lume"],
  [data-theme="crystal-nebula"]
) .kiosk-app::before {
  display: block;
  inset: -24%;
  background:
    conic-gradient(from 30deg at 50% 50%, transparent 0 14%, color-mix(in srgb, var(--aurora-1) 42%, transparent) 22%, transparent 35% 54%, color-mix(in srgb, var(--aurora-2) 36%, transparent) 65%, transparent 78%),
    radial-gradient(ellipse at 30% 42%, color-mix(in srgb, var(--aurora-3) 34%, transparent), transparent 46%);
  filter: blur(34px) saturate(1.18);
  opacity: 0.72;
  animation: living-theme-orbit 22s ease-in-out infinite alternate;
}

html:is(
  [data-theme="prism-glass"],
  [data-theme="medical-pearl"],
  [data-theme="liquid-chrome"],
  [data-theme="deep-ocean"],
  [data-theme="solar-plasma"],
  [data-theme="bio-lume"],
  [data-theme="crystal-nebula"]
) .kiosk-app::after {
  inset: -12%;
  background:
    repeating-radial-gradient(ellipse at 50% 120%, transparent 0 20px, color-mix(in srgb, var(--aurora-1) 8%, transparent) 22px 24px, transparent 26px 44px),
    linear-gradient(112deg, transparent 22%, rgb(255 255 255 / 16%) 43%, transparent 61%);
  opacity: 0.62;
  animation: living-theme-light 14s ease-in-out infinite alternate;
}

@keyframes living-theme-orbit {
  0% { transform: translate3d(-3%, -2%, 0) rotate(-5deg) scale(0.96); }
  48% { transform: translate3d(4%, 1%, 0) rotate(5deg) scale(1.08); }
  100% { transform: translate3d(-1%, 5%, 0) rotate(-2deg) scale(1.02); }
}

@keyframes living-theme-light {
  0% { transform: translate3d(-5%, 0, 0); filter: hue-rotate(0deg) saturate(1); }
  100% { transform: translate3d(6%, -2%, 0); filter: hue-rotate(18deg) saturate(1.18); }
}

/* A shaped card clips only its visual surface. Editor handles stay reachable. */
.layout-custom-card.has-card-shape:not(.menu-tile) {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.site-card-shape-surface {
  position: relative;
  isolation: isolate;
  display: grid;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: inherit;
  gap: 7px;
  align-content: center;
  padding: 18px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--gold) 36%, var(--card-border));
  border-radius: 16px;
  background:
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--aurora-1) 24%, transparent), transparent 44%),
    linear-gradient(135deg, color-mix(in srgb, var(--card-base-1) 90%, white), color-mix(in srgb, var(--card-base-2) 88%, white));
  box-shadow: 0 14px 30px color-mix(in srgb, var(--theme-glow) 17%, transparent);
  clip-path: var(--site-card-clip, none);
}

.layout-custom-card[data-card-shape="rectangle"] > .site-card-shape-surface {
  border-radius: 0;
}

.layout-custom-card[data-card-shape="circle"] > .site-card-shape-surface,
.layout-custom-card[data-card-shape="heart"] > .site-card-shape-surface,
.layout-custom-card[data-card-shape="tooth"] > .site-card-shape-surface,
.layout-custom-card[data-card-shape="cosmic"] > .site-card-shape-surface,
.layout-custom-card[data-card-shape="custom"] > .site-card-shape-surface {
  padding: clamp(24px, 10%, 72px);
}

.layout-custom-card[data-card-shape="circle"] > .site-card-shape-surface {
  place-content: center;
  text-align: center;
}

.site-card-shape-surface > .site-block-visual-background ~ :not(.site-block-anchor) {
  position: relative;
  z-index: 1;
}

.layout-custom-card--drawing {
  min-height: 56px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.site-block-drawing {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  overflow: visible;
}

.site-block-inspector__shape-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.site-block-inspector__shape-grid label {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  border-radius: 9px;
  cursor: pointer;
}

.site-block-inspector__shape-grid label.is-active {
  border-color: color-mix(in srgb, var(--gold) 74%, transparent);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
}

.site-block-inspector .site-block-inspector__shape-grid input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.site-block-inspector__shape-grid i {
  display: block;
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, var(--aurora-1), var(--aurora-2));
}

.site-block-inspector__shape-grid i[data-card-shape-preview="rounded"] { border-radius: 7px; }
.site-block-inspector__shape-grid i[data-card-shape-preview="circle"] { border-radius: 50%; }
.site-block-inspector__shape-grid i[data-card-shape-preview="rectangle"] { border-radius: 0; }
.site-block-inspector__shape-grid i[data-card-shape-preview="heart"] { clip-path: polygon(50% 94%, 8% 48%, 7% 24%, 24% 8%, 42% 12%, 50% 24%, 58% 12%, 76% 8%, 93% 24%, 92% 48%); }
.site-block-inspector__shape-grid i[data-card-shape-preview="tooth"] { clip-path: polygon(50% 4%, 78% 12%, 91% 38%, 78% 72%, 65% 98%, 50% 72%, 35% 98%, 22% 72%, 9% 38%, 22% 12%); }
.site-block-inspector__shape-grid i[data-card-shape-preview="cosmic"] { clip-path: polygon(50% 0, 61% 34%, 92% 8%, 69% 40%, 100% 50%, 69% 60%, 92% 92%, 61% 66%, 50% 100%, 39% 66%, 8% 92%, 31% 60%, 0 50%, 31% 40%, 8% 8%, 39% 34%); }
.site-block-inspector__shape-grid i[data-card-shape-preview="blob"] { border-radius: 62% 38% 67% 33% / 43% 59% 41% 57%; }
.site-block-inspector__shape-grid i[data-card-shape-preview="custom"] { clip-path: polygon(8% 24%, 48% 4%, 92% 28%, 78% 92%, 19% 82%); }

.site-shape-drawer {
  position: fixed;
  z-index: 4200;
  inset: 0;
  overflow: hidden;
  background: rgb(3 10 18 / 34%);
  cursor: crosshair;
  backdrop-filter: blur(2px);
}

.site-shape-drawer__canvas {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.site-shape-drawer__canvas path {
  fill: color-mix(in srgb, var(--gold) 13%, transparent);
  stroke: color-mix(in srgb, var(--gold) 86%, white);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--theme-glow) 76%, transparent));
}

.site-shape-drawer--signature .site-shape-drawer__canvas path {
  fill: none;
}

.site-shape-drawer__panel {
  position: absolute;
  z-index: 2;
  top: max(14px, env(safe-area-inset-top));
  left: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(920px, calc(100vw - 24px));
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--gold) 52%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--glass-strong) 94%, white);
  box-shadow: 0 18px 54px rgb(4 12 18 / 28%);
  transform: translateX(-50%);
  cursor: default;
}

.site-shape-drawer__panel > div {
  display: grid;
  min-width: min(250px, 42vw);
  margin-right: auto;
}

.site-shape-drawer__panel small,
.site-shape-drawer__panel > span {
  color: var(--muted);
  font-size: 0.72rem;
}

.site-shape-drawer__panel label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
}

.site-shape-drawer__panel input[type="range"] {
  width: 84px;
}

.site-shape-drawer__panel button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  border-radius: 9px;
  background: var(--glass-strong);
  color: var(--heading);
  font: 750 0.75rem/1 var(--site-font-family);
}

.site-shape-drawer__panel button.is-primary {
  border-color: color-mix(in srgb, var(--gold) 72%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 74%, white), var(--gold));
  color: #191611;
}

.site-shape-drawer__panel button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 760px) {
  .site-shape-drawer__panel {
    flex-wrap: wrap;
  }

  .site-shape-drawer__panel > div {
    width: 100%;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:is(
    [data-theme="prism-glass"],
    [data-theme="medical-pearl"],
    [data-theme="liquid-chrome"],
    [data-theme="deep-ocean"],
    [data-theme="solar-plasma"],
    [data-theme="bio-lume"],
    [data-theme="crystal-nebula"]
  ) .kiosk-app::before,
  html:is(
    [data-theme="prism-glass"],
    [data-theme="medical-pearl"],
    [data-theme="liquid-chrome"],
    [data-theme="deep-ocean"],
    [data-theme="solar-plasma"],
    [data-theme="bio-lume"],
    [data-theme="crystal-nebula"]
  ) .kiosk-app::after {
    animation: none;
  }
}

/* The editor temporarily expands the terminal canvas so every moved block remains reachable. */
.screen-layer.page-layout-editor-active {
  overflow: auto !important;
  overscroll-behavior: contain;
  scrollbar-color: color-mix(in srgb, var(--gold) 68%, transparent) transparent;
}

.screen-layer.page-layout-editor-active .screen-shell,
.screen-layer.page-layout-editor-active .splash-screen {
  height: 100dvh !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.screen-layer.page-layout-editor-active .screen-grid,
.screen-layer.page-layout-editor-active .screen-content {
  overflow: visible !important;
}

.page-layout-editor-active .page-layout-target {
  min-width: min-content;
  min-height: min-content;
}

.page-layout-handle {
  gap: 4px;
}

.page-layout-handle > .page-layout-handle__resize {
  font-size: 0.84rem;
}

.layout-custom-card--text {
  border-style: dashed;
}

.layout-custom-card--link {
  border-color: color-mix(in srgb, var(--gold) 72%, var(--card-border));
}

.layout-custom-card--video {
  align-content: start;
}

.layout-custom-card__video,
.layout-custom-card__media-placeholder {
  display: block;
  width: 100%;
  min-height: 116px;
  max-height: 240px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--icon-bg) 82%, black);
  object-fit: var(--site-block-media-fit, cover);
  object-position: var(--site-block-media-position, center);
}

.layout-custom-card__media-placeholder {
  display: grid;
  place-items: center;
  color: var(--gold);
  font-size: 0.88rem;
  font-weight: 800;
}

.layout-custom-card__link {
  justify-self: start;
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb, var(--gold) 54%, transparent);
  border-radius: 9px;
  color: var(--heading);
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
}

.layout-custom-card__url {
  display: block;
  max-width: 100%;
  color: var(--muted);
  font-size: 0.72rem;
  overflow-wrap: anywhere;
}

.page-layout-editor-active .layout-custom-card__url[contenteditable="true"] {
  min-width: 10ch;
}

/* Visual page composer. It is rendered only for an authenticated administrator. */
.page-layout-toolbar {
  position: fixed;
  z-index: 360;
  top: max(18px, env(safe-area-inset-top));
  right: clamp(16px, 3vw, 48px);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  max-width: min(560px, calc(100vw - 32px));
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--gold) 38%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--glass-strong) 90%, white);
  box-shadow: 0 14px 36px color-mix(in srgb, var(--theme-glow) 24%, transparent);
  backdrop-filter: blur(18px);
}

.page-layout-toolbar.is-positioned {
  right: auto !important;
  bottom: auto !important;
}

.page-layout-toolbar.is-dragging {
  user-select: none;
  opacity: 0.92;
  box-shadow: 0 18px 40px color-mix(in srgb, var(--theme-glow) 34%, transparent);
}

.page-layout-toolbar button,
.page-layout-toolbar__status {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid color-mix(in srgb, var(--heading) 13%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--glass) 78%, white);
  color: var(--heading);
  font-size: 0.76rem;
  font-weight: 800;
}

.page-layout-toolbar__status {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  border-color: transparent;
  background: transparent;
}

.page-layout-toolbar__drag {
  display: inline-grid;
  width: 28px;
  min-height: 34px;
  place-items: center;
  padding: 0 !important;
  border-color: color-mix(in srgb, var(--gold) 46%, transparent) !important;
  color: var(--gold) !important;
  cursor: grab;
  font-size: 1.05rem !important;
  line-height: 1;
  touch-action: none;
  user-select: none;
}

.page-layout-toolbar__drag:active {
  cursor: grabbing;
}

.page-layout-toolbar__start,
.page-layout-toolbar__save {
  border-color: color-mix(in srgb, var(--gold) 74%, transparent) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 74%, white), var(--gold)) !important;
  color: #191611 !important;
}

/* The composer stays available without covering the kiosk with a large button. */
.page-layout-toolbar.is-compact {
  width: 32px;
  max-width: none;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.page-layout-toolbar.is-compact .page-layout-toolbar__start {
  display: grid;
  width: 32px;
  min-height: 32px;
  place-items: center;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  color: var(--gold) !important;
  font-size: 1.45rem;
  line-height: 1;
  text-shadow: 0 0 13px color-mix(in srgb, var(--gold) 62%, transparent);
  transition: color 180ms ease, transform 180ms ease, text-shadow 180ms ease;
}

.page-layout-toolbar.is-compact .page-layout-toolbar__start:hover,
.page-layout-toolbar.is-compact .page-layout-toolbar__start:focus-visible {
  color: color-mix(in srgb, var(--gold) 72%, white) !important;
  outline: none;
  text-shadow: 0 0 19px color-mix(in srgb, var(--gold) 82%, transparent);
  transform: scale(1.12);
}

/* The full composer is a compact top menu. Its groups open below the bar,
   so the canvas stays visible instead of being covered by a long panel. */
.page-layout-toolbar.is-editing {
  top: max(10px, env(safe-area-inset-top));
  right: auto;
  bottom: auto;
  left: 50%;
  display: block;
  width: min(1180px, calc(100vw - 24px));
  max-width: none;
  padding: 8px 10px;
  border-radius: 13px;
  transform: translateX(-50%);
}

.page-layout-toolbar__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.page-layout-toolbar__theme-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  min-height: 48px;
  padding: 0 1px 7px;
  border-bottom: 1px solid color-mix(in srgb, var(--heading) 12%, transparent);
  overflow-x: auto;
  scrollbar-width: thin;
}

.page-layout-toolbar__theme-label {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.page-layout-toolbar__theme-options {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.page-layout-toolbar__theme-catalogs {
  display: inline-flex;
  align-items: flex-end;
  gap: 11px;
}

.page-layout-toolbar__theme-catalog {
  display: grid;
  flex: 0 0 auto;
  gap: 2px;
}

.page-layout-toolbar__theme-catalog > small {
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.page-layout-toolbar__theme-option {
  position: relative;
  display: inline-grid;
  place-items: center;
}

.page-layout-toolbar__theme-button,
.page-layout-toolbar__theme-create,
.page-layout-toolbar__theme-delete {
  display: grid;
  width: 28px;
  min-height: 28px !important;
  place-items: center;
  padding: 0 !important;
  border-radius: 50% !important;
}

.page-layout-toolbar__theme-button {
  border-color: transparent !important;
  background: transparent !important;
}

.page-layout-toolbar__theme-button i {
  display: block;
  width: 18px;
  height: 18px;
  border: 1px solid rgb(255 255 255 / 72%);
  border-radius: 50%;
  background: var(--theme-swatch);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%), 0 0 0 1px rgb(10 20 32 / 16%);
}

.page-layout-toolbar__theme-button:hover i,
.page-layout-toolbar__theme-button:focus-visible i,
.page-layout-toolbar__theme-button.is-active i {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 80%, white), 0 0 16px color-mix(in srgb, var(--theme-glow) 72%, transparent);
}

.page-layout-toolbar__theme-create {
  border-color: color-mix(in srgb, var(--gold) 64%, transparent) !important;
  background: transparent !important;
  color: var(--gold) !important;
  font-size: 1.1rem !important;
}

.page-layout-toolbar__theme-delete {
  position: absolute;
  top: -4px;
  right: -5px;
  display: none;
  width: 15px;
  min-height: 15px !important;
  border: 0 !important;
  background: #7d2d38 !important;
  color: #fff !important;
  font-size: 0.75rem !important;
  line-height: 1;
}

.page-layout-toolbar__theme-option:hover .page-layout-toolbar__theme-delete,
.page-layout-toolbar__theme-option:focus-within .page-layout-toolbar__theme-delete {
  display: grid;
}

.page-layout-toolbar__history {
  display: inline-flex;
  gap: 4px;
}

.page-layout-toolbar__history button,
.page-layout-toolbar__close {
  display: grid;
  width: 34px;
  min-height: 34px;
  place-items: center;
  padding: 0 !important;
}

.page-layout-toolbar__group {
  position: static;
}

.page-layout-toolbar__menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.page-layout-toolbar__menu-trigger span {
  color: var(--gold);
  font-size: 0.86rem;
  transition: transform 160ms ease;
}

.page-layout-toolbar__menu-trigger.is-open span {
  transform: rotate(180deg);
}

.page-layout-toolbar__popover {
  position: absolute;
  z-index: 120;
  top: calc(100% + 9px);
  left: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(132px, 1fr));
  gap: 6px;
  width: min(440px, calc(100vw - 24px));
  max-height: min(66dvh, 560px);
  overflow: auto;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--glass-strong) 95%, white);
  box-shadow: 0 20px 46px color-mix(in srgb, var(--theme-glow) 30%, transparent);
  backdrop-filter: blur(18px);
}

.page-layout-toolbar__popover[hidden] {
  display: none;
}

.page-layout-toolbar__popover button {
  min-height: 38px;
  text-align: left;
}

.page-layout-toolbar__popover-title {
  grid-column: 1 / -1;
  margin: 4px 2px 0;
  color: var(--muted);
  font-size: 0.71rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.page-layout-toolbar__preset-grid {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.page-layout-toolbar__preset-grid button {
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-layout-toolbar__preset-grid i {
  display: inline-block;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--smoke-a), var(--smoke-b));
  box-shadow: 0 0 11px color-mix(in srgb, var(--smoke-a) 72%, transparent);
}

.page-layout-toolbar__preset-grid i.is-three {
  --smoke-a: #a583ff;
  --smoke-b: #42d7e7;
}

.page-layout-toolbar__preset-grid i.is-photo {
  --smoke-a: #ffffff;
  --smoke-b: #72cfff;
  border-radius: 3px;
  box-shadow:
    inset 0 -3px 0 rgb(9 56 100 / 26%),
    0 0 11px color-mix(in srgb, #72cfff 72%, transparent);
}

.page-layout-toolbar__preset-grid i.is-motion--waves {
  --smoke-a: #70edff;
  --smoke-b: #8e76ff;
  border-radius: 70% 28% 64% 36%;
  transform: rotate(-18deg);
}

.page-layout-toolbar__preset-grid i.is-motion--fireworks {
  --smoke-a: #fff1ac;
  --smoke-b: #6ee8ff;
  border-radius: 50%;
  box-shadow:
    0 0 0 3px rgb(255 228 130 / 15%),
    0 0 12px rgb(112 229 255 / 82%);
}

.page-layout-toolbar__preset-grid i.is-opening {
  --smoke-a: #f5ffff;
  --smoke-b: #934cff;
  box-shadow: 0 0 12px rgb(112 205 255 / 74%);
}

.page-layout-toolbar__preset-grid i.is-opening.is-medical {
  --smoke-a: #ffffff;
  --smoke-b: #40d7c8;
  border-radius: 2px 50% 2px 50%;
  transform: rotate(45deg);
}

.page-layout-toolbar__preset-grid i.is-cursor {
  --smoke-a: #eefeff;
  --smoke-b: #55cddd;
}

.page-layout-toolbar__preset-grid i.is-cursor--wave {
  border-radius: 50% 50% 20% 80%;
  transform: rotate(-24deg);
}

.page-layout-toolbar__preset-grid i.is-cursor--crystal {
  border-radius: 2px;
  transform: rotate(45deg) scale(0.78);
}

.page-layout-toolbar__preset-grid i.is-cursor--shadow {
  --smoke-a: #67748c;
  --smoke-b: #1d2b44;
  filter: blur(1px);
}

.page-layout-toolbar__preset-grid i.is-cursor--dental {
  --smoke-a: #ffffff;
  --smoke-b: #74bee8;
}

.page-layout-toolbar__preset-grid i.is-cursor--storm {
  --smoke-a: #f4fbff;
  --smoke-b: #587dff;
  border-radius: 0;
  clip-path: polygon(47% 0, 88% 0, 63% 36%, 100% 36%, 35% 100%, 49% 55%, 15% 55%);
  filter: drop-shadow(0 0 5px rgb(112 161 255 / 74%));
  transform: rotate(7deg) scale(0.86);
}

.page-layout-toolbar__preset-grid i.is-cursor--none {
  --smoke-a: #aeb9c8;
  --smoke-b: #65748a;
  box-shadow: none;
  opacity: 0.62;
}

.page-layout-toolbar__preset-grid i.is-none {
  --smoke-a: #aeb9c8;
  --smoke-b: #65748a;
}

.page-layout-toolbar__preset-grid button.is-active {
  border-color: color-mix(in srgb, var(--gold) 72%, #85f0ff) !important;
  background: color-mix(in srgb, var(--gold) 18%, transparent) !important;
  box-shadow: 0 0 18px color-mix(in srgb, var(--gold) 28%, transparent);
}

.page-layout-animated-library {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.page-layout-animated-library article {
  display: grid;
  min-width: 0;
  gap: 6px;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--heading) 12%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.page-layout-animated-library article.is-active {
  border-color: color-mix(in srgb, var(--gold) 78%, #77e6ff);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 34%, transparent);
}

.page-layout-animated-library article > img {
  width: 100%;
  aspect-ratio: 1.55;
  border-radius: 5px;
  background: #070a12;
  object-fit: cover;
}

.page-layout-animated-library article > strong {
  min-width: 0;
  overflow: hidden;
  color: var(--heading);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-layout-animated-library article > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.page-layout-animated-library article button {
  min-height: 29px !important;
  padding: 4px 5px;
  justify-content: center;
  color: var(--heading);
  font-size: 0.64rem;
  text-align: center;
}

.page-layout-toolbar__clear-background {
  grid-column: 1 / -1;
  color: #9d443d !important;
}

.page-layout-grid-controls {
  display: grid;
  grid-column: 1 / -1;
  gap: 9px;
  min-width: 280px;
}

.page-layout-grid-controls__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.page-layout-grid-controls__row button {
  flex: 1 1 92px;
  min-width: 0;
}

.page-layout-grid-controls__row button.is-active {
  border-color: color-mix(in srgb, var(--gold) 72%, #7bdfff) !important;
  background: color-mix(in srgb, var(--gold) 18%, var(--glass)) !important;
  box-shadow: 0 0 15px color-mix(in srgb, var(--theme-glow) 24%, transparent);
}

.page-layout-grid-controls__range {
  display: grid;
  gap: 5px;
  color: var(--heading);
  font-size: 0.73rem;
  font-weight: 760;
}

.page-layout-grid-controls__range span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.page-layout-grid-controls__range output {
  color: var(--gold);
}

.page-layout-grid-controls__range input {
  width: 100%;
  accent-color: var(--gold);
}

.page-layout-grid-controls__label {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.page-layout-editor-active {
  isolation: isolate;
}

.page-layout-editor-active::after {
  position: absolute;
  z-index: 20;
  top: 0;
  right: 0;
  left: 0;
  height: var(--page-layout-editor-height, 100dvh);
  pointer-events: none;
  content: "";
  background-image:
    linear-gradient(color-mix(in srgb, var(--gold) 68%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--gold) 68%, transparent) 1px, transparent 1px);
  background-size: var(--page-layout-grid-step, 16px) var(--page-layout-grid-step, 16px);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.52), transparent 84%);
  opacity: var(--page-layout-grid-opacity, 0.22);
}

.page-layout-editor-active.page-layout-grid-dots::after {
  background-image: radial-gradient(circle, color-mix(in srgb, var(--gold) 82%, transparent) 1.1px, transparent 1.25px);
  background-position: calc(var(--page-layout-grid-step, 16px) / 2) calc(var(--page-layout-grid-step, 16px) / 2);
}

.page-layout-editor-active.page-layout-grid-blueprint::after {
  background-image:
    linear-gradient(color-mix(in srgb, #6ad8ff 72%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, #6ad8ff 72%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--gold) 86%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--gold) 86%, transparent) 1px, transparent 1px);
  background-size:
    var(--page-layout-grid-step, 16px) var(--page-layout-grid-step, 16px),
    var(--page-layout-grid-step, 16px) var(--page-layout-grid-step, 16px),
    var(--page-layout-grid-major-step, 64px) var(--page-layout-grid-major-step, 64px),
    var(--page-layout-grid-major-step, 64px) var(--page-layout-grid-major-step, 64px);
}

.page-layout-editor-active.page-layout-grid-hidden::after {
  display: none;
}

.page-layout-editor-active::before {
  position: absolute;
  z-index: 21;
  top: 0;
  right: 0;
  left: 0;
  height: var(--page-layout-editor-height, 100dvh);
  pointer-events: none;
  content: "";
  background-image:
    var(--page-layout-guide-vertical, linear-gradient(transparent, transparent)),
    var(--page-layout-guide-horizontal, linear-gradient(transparent, transparent));
}

.page-layout-editor-active.page-layout-guide-vertical {
  --page-layout-guide-vertical: linear-gradient(90deg, transparent calc(50% - 1px), color-mix(in srgb, var(--gold) 82%, #7ee9ff) calc(50% - 1px), color-mix(in srgb, var(--gold) 82%, #7ee9ff) calc(50% + 1px), transparent calc(50% + 1px));
}

.page-layout-editor-active.page-layout-guide-horizontal {
  --page-layout-guide-horizontal: linear-gradient(transparent calc(50% - 1px), color-mix(in srgb, var(--gold) 82%, #7ee9ff) calc(50% - 1px), color-mix(in srgb, var(--gold) 82%, #7ee9ff) calc(50% + 1px), transparent calc(50% + 1px));
}

.page-layout-target {
  position: relative;
  left: var(--page-layout-x, 0px);
  top: var(--page-layout-y, 0px);
  box-sizing: border-box;
  max-width: 100%;
}

.page-layout-target :is(h1, h2, h3, h4, p, strong, small, span, a, button, label) {
  min-width: 0;
  overflow-wrap: anywhere;
}

.page-layout-editor-active .page-layout-target {
  z-index: 30;
  overflow: visible !important;
  outline: 1px dashed color-mix(in srgb, var(--gold) 66%, transparent);
  outline-offset: 4px;
  cursor: default;
}

/* The persistent editor row replaces the page's visitor theme dots while
   composing. This avoids duplicate controls and keeps the canvas uncluttered. */
.page-layout-editor-active .theme-switcher {
  display: none !important;
}

.page-layout-editor-active .page-layout-target:hover,
.page-layout-editor-active .page-layout-target.is-layout-selected {
  outline: 2px solid var(--gold);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 14%, transparent), 0 15px 34px color-mix(in srgb, var(--theme-glow) 22%, transparent);
}

.page-layout-handle {
  position: absolute;
  z-index: 50;
  inset: -16px -16px auto auto;
  display: flex;
  gap: 3px;
  pointer-events: auto;
}

.page-layout-handle > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border: 1px solid color-mix(in srgb, var(--gold) 72%, transparent);
  border-radius: 8px;
  background: #151a1d;
  color: var(--gold);
  box-shadow: 0 8px 18px rgba(5, 18, 25, 0.26);
  cursor: grab;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  user-select: none;
  touch-action: none;
}

.page-layout-handle > span:active {
  cursor: grabbing;
}

.menu-tile__media--custom {
  display: grid;
  place-items: center;
  color: var(--gold);
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 300;
}

.layout-custom-card:not(.menu-tile) {
  display: grid;
  gap: 7px;
  align-content: center;
  min-height: 112px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--gold) 36%, var(--card-border));
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--card-base-1) 90%, white), color-mix(in srgb, var(--card-base-2) 88%, white));
  box-shadow: 0 14px 30px color-mix(in srgb, var(--theme-glow) 17%, transparent);
}

/* A configured surface controls the full card. It does not leave a default
   white panel above the card-level 3D or gradient background. */
.layout-custom-card:not(.menu-tile).has-custom-surface {
  border-color: color-mix(in srgb, var(--site-card-border) 72%, transparent);
  background: color-mix(in srgb, var(--site-card-surface) calc(var(--site-card-surface-opacity) * 100%), transparent);
}

.layout-custom-card:not(.menu-tile) strong {
  color: var(--heading);
  font-size: 1rem;
}

.layout-custom-card:not(.menu-tile) small {
  color: var(--muted);
  font-size: 0.84rem;
}

.page-layout-editor-active .layout-custom-card [contenteditable="true"] {
  position: relative;
  z-index: 3;
  display: inline-block;
  min-width: 4ch;
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--glass-strong) 82%, white);
}

.page-layout-context-menu {
  position: fixed;
  z-index: 170;
  display: grid;
  min-width: 196px;
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent);
  border-radius: 13px;
  background: color-mix(in srgb, var(--glass-strong) 94%, white);
  box-shadow: 0 20px 52px rgba(3, 13, 18, 0.3);
  backdrop-filter: blur(18px);
}

.page-layout-context-menu button {
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--heading);
  text-align: left;
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
}

.page-layout-context-menu button:hover {
  background: color-mix(in srgb, var(--gold) 15%, transparent);
}

.page-layout-context-menu .is-danger {
  color: #9a4538;
}

.page-layout-save-overlay {
  position: fixed;
  z-index: 190;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(7, 14, 19, 0.56);
  backdrop-filter: blur(12px);
}

.page-layout-save-overlay > div {
  display: grid;
  justify-items: center;
  gap: 10px;
  min-width: min(300px, calc(100vw - 36px));
  padding: 25px;
  border: 1px solid color-mix(in srgb, var(--gold) 48%, transparent);
  border-radius: 20px;
  background: color-mix(in srgb, var(--glass-strong) 92%, white);
  color: var(--heading);
  box-shadow: 0 24px 70px rgba(2, 13, 20, 0.38);
}

.page-layout-save-overlay span {
  width: 28px;
  height: 28px;
  border: 3px solid color-mix(in srgb, var(--gold) 25%, transparent);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: admin-upload-spin 850ms linear infinite;
}

.page-layout-save-overlay small {
  color: var(--muted);
}

@media (max-width: 680px) {
  .page-layout-toolbar {
    top: auto;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    justify-content: center;
    max-width: calc(100vw - 24px);
  }

  .page-layout-toolbar__status {
    display: none;
  }

  .page-layout-toolbar button {
    min-height: 32px;
    padding: 0 9px;
    font-size: 0.7rem;
  }

  .page-layout-toolbar.is-editing {
    top: max(4px, env(safe-area-inset-top));
    right: auto;
    bottom: auto;
    left: 0;
    width: 100%;
    max-width: 100%;
    padding: 6px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    transform: none;
  }

  .page-layout-toolbar.is-editing .page-layout-toolbar__top {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }

  .page-layout-toolbar.is-editing .page-layout-toolbar__status {
    display: none;
  }

  .page-layout-toolbar__theme-row {
    gap: 5px;
    padding-bottom: 5px;
  }

  .page-layout-toolbar__theme-label {
    display: none;
  }

  .page-layout-toolbar__theme-button,
  .page-layout-toolbar__theme-create {
    width: 25px;
    min-height: 25px !important;
  }

  .page-layout-toolbar__theme-button i {
    width: 16px;
    height: 16px;
  }

  body:has(.page-layout-toolbar.is-editing) .kiosk-app {
    height: calc(100dvh - 102px);
    margin-top: 102px;
  }

  body:has(.builder-editor-bar):has(.page-layout-toolbar.is-editing) #root {
    padding-top: 154px;
  }

  body:has(.builder-editor-bar):has(.page-layout-toolbar.is-editing) .kiosk-app {
    height: calc(100dvh - 154px);
    margin-top: 0;
  }

  body:has(.builder-editor-bar) .page-layout-toolbar.is-editing {
    top: 54px;
  }

  .page-layout-toolbar.is-editing .page-layout-toolbar__popover {
    position: fixed;
    top: 54px;
    right: 12px;
    left: 12px;
    width: auto;
    max-height: calc(100dvh - 72px);
  }

  .page-layout-handle {
    inset: -13px -7px auto auto;
  }
}

/* Cloud account forms keep secondary actions readable in the dark login view. */
.creator-account-gate__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
}

.creator-account-gate__links button,
.creator-account-gate__form > button + button {
  border: 0;
  background: transparent;
  color: #9fc7ff;
  font: inherit;
  cursor: pointer;
  padding: 4px 0;
}

.admin-sites-panel__quota {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--gold, #bd9443) 46%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--gold, #bd9443) 12%, transparent);
  color: var(--ink, #152229);
}

.admin-sites-panel__quota a { color: inherit; font-weight: 700; }

.creator-account-card__privacy {
  color: var(--muted, #677782);
  font-size: 12px;
  line-height: 1.35;
}

.creator-moderation-modal {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(7, 13, 18, .64);
}

.creator-moderation-panel {
  width: min(860px, 100%);
  max-height: min(780px, 92dvh);
  overflow: auto;
  padding: 22px;
  border: 1px solid rgba(159, 199, 255, .3);
  border-radius: 8px;
  background: #152029;
  color: #edf5fa;
}

.creator-moderation-panel > header,
.creator-moderation-account > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.creator-moderation-panel h2,
.creator-moderation-panel p { margin: 0; }
.creator-moderation-panel > p { margin-top: 12px; color: #c1d1db; line-height: 1.45; }
.creator-moderation-panel button { border: 1px solid rgba(159, 199, 255, .36); border-radius: 5px; background: transparent; color: inherit; padding: 7px 10px; }
.creator-moderation-list { display: grid; gap: 12px; margin-top: 18px; }
.creator-moderation-account { padding: 14px; border: 1px solid rgba(159, 199, 255, .2); border-radius: 6px; }
.creator-moderation-account ul { display: grid; gap: 8px; padding: 0; margin: 12px 0 0; list-style: none; }
.creator-moderation-account li { display: grid; gap: 3px; padding: 10px; border-radius: 5px; background: rgba(255, 255, 255, .05); }
.creator-moderation-account small,
.creator-moderation-account span { color: #b6c8d4; overflow-wrap: anywhere; }

/* Local media preparation stays visible until the administrator confirms the save. */
.admin-upload-overlay {
  position: fixed;
  z-index: 140;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(7, 15, 20, 0.58);
  backdrop-filter: blur(14px);
}

.admin-upload-dialog {
  display: grid;
  gap: 12px;
  width: min(450px, calc(100vw - 36px));
  padding: 26px;
  overflow: hidden;
  color: var(--heading);
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, rgba(255, 255, 255, 0.66));
  border-radius: 24px;
  background: color-mix(in srgb, var(--glass-strong) 92%, white);
  box-shadow: 0 28px 80px rgba(4, 17, 26, 0.36);
}

.admin-upload-dialog h2,
.admin-upload-dialog p {
  margin: 0;
}

.admin-upload-dialog h2 {
  font-size: clamp(1.2rem, 2.6vw, 1.55rem);
}

.admin-upload-dialog .eyebrow {
  color: var(--muted);
}

.admin-upload-dialog__loader {
  justify-self: center;
  width: 26px;
  height: 26px;
  border: 3px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: admin-upload-spin 850ms linear infinite;
}

.admin-upload-dialog__file,
.admin-upload-dialog__status {
  color: var(--muted);
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}

.admin-upload-dialog__preview-wrap {
  display: grid;
  place-items: center;
  min-height: 152px;
  max-height: 236px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: 17px;
  background: color-mix(in srgb, var(--glass) 74%, white);
}

.admin-upload-dialog__preview {
  display: block;
  max-width: 100%;
  max-height: 214px;
  object-fit: contain;
  border-radius: 11px;
}

.admin-upload-dialog__placeholder {
  max-width: 100%;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.admin-upload-dialog__progress {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--heading) 10%, transparent);
  box-shadow: inset 0 1px 2px rgba(12, 31, 44, 0.12);
}

.admin-upload-dialog__progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), var(--accent), var(--gold));
  transition: width 180ms ease;
}

.admin-upload-dialog__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.admin-upload-dialog__actions button {
  min-height: 44px;
  border-radius: 13px;
  font-weight: 800;
}

.admin-upload-dialog__save {
  border-color: color-mix(in srgb, var(--gold) 76%, #8d651d);
  background: linear-gradient(135deg, #c9a754, var(--gold));
  color: #1d1a12;
}

.admin-upload-dialog__cancel {
  border-color: color-mix(in srgb, var(--heading) 17%, transparent);
  background: color-mix(in srgb, var(--glass) 82%, white);
  color: var(--heading);
}

.admin-upload-dialog__actions button:disabled {
  cursor: wait;
  opacity: 0.5;
}

@keyframes admin-upload-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 480px) {
  .admin-upload-overlay {
    align-items: end;
    padding: 12px;
  }

  .admin-upload-dialog {
    width: min(100%, 450px);
    padding: 20px;
    border-radius: 20px;
  }

  .admin-upload-dialog__preview-wrap {
    min-height: 126px;
    max-height: 190px;
  }

  .admin-upload-dialog__preview {
    max-height: 168px;
  }
}

/* Dr. Osmanov kiosk refresh */
.kiosk-app {
  background:
    radial-gradient(ellipse at 16% 7%, color-mix(in srgb, var(--aurora-1) 42%, transparent), transparent 42%),
    radial-gradient(ellipse at 84% 11%, color-mix(in srgb, var(--aurora-2) 36%, transparent), transparent 46%),
    radial-gradient(ellipse at 48% 98%, color-mix(in srgb, var(--aurora-3) 28%, transparent), transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--glass-strong) 76%, transparent), color-mix(in srgb, var(--surface-tint) 62%, transparent) 48%, color-mix(in srgb, var(--aurora-2) 16%, transparent)),
    linear-gradient(90deg, color-mix(in srgb, var(--aurora-1) 18%, transparent), transparent 42%, color-mix(in srgb, var(--aurora-3) 17%, transparent)),
    var(--surface-tint);
}

.tooth-backdrop {
  position: absolute;
  z-index: 0;
  right: -5vw;
  top: 50%;
  width: min(70vw, 760px);
  height: auto;
  opacity: 0.18;
  filter: drop-shadow(0 30px 80px rgba(199, 169, 106, 0.32));
  transform: translateY(-50%) rotate(-8deg);
  pointer-events: none;
}

.splash-mark {
  background: rgba(255, 255, 255, 0.62);
}

.splash-mark img {
  width: 62px;
  height: 62px;
  object-fit: contain;
}

.splash-card--photo {
  grid-template-rows: minmax(0, 1fr) auto;
  padding: 18px;
}

.hero-photo {
  min-height: 0;
  overflow: hidden;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.6);
}

.hero-photo img,
.clinic-side-photo img,
.work-photo img,
.client-story img,
.map-panel--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-photo--reception img {
  object-position: center 40%;
}

.menu-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.menu-grid .menu-tile:nth-child(7) {
  grid-column: span 2;
}

.menu-aside--clinic {
  grid-template-rows: minmax(0, 1fr) auto auto;
}

.clinic-side-photo {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.clinic-side-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(10, 16, 19, 0.74));
}

.clinic-side-photo span {
  position: absolute;
  z-index: 1;
  left: 22px;
  bottom: 20px;
  color: white;
  font-size: 1.28rem;
  font-weight: 840;
}

.doctors-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.doctor-card__photo img,
.profile-photo img,
.doctor-picker img {
  object-position: center top;
}

.works-grid--photo {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.work-card--photo {
  min-width: 0;
}

.work-photo {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: #d9e6e9;
}

.work-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 54%, rgba(14, 20, 24, 0.62));
  pointer-events: none;
}

.work-photo img {
  filter: saturate(0.96) contrast(1.03);
}

.work-photo span {
  position: absolute;
  z-index: 1;
  left: 14px;
  top: 14px;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(16, 22, 25, 0.74);
  color: white;
  font-size: 0.72rem;
  font-weight: 840;
  text-transform: uppercase;
}

.work-card--photo .work-card__body {
  padding: 16px 17px 17px;
}

.work-card--photo .work-card__body h2 {
  margin: 6px 0 8px;
  font-size: 1.04rem;
  line-height: 1.12;
}

.work-card--photo .work-card__body p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #536269;
  font-size: 0.88rem;
  line-height: 1.28;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.work-carousel,
.client-viewer {
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 76px;
  align-items: center;
  gap: 18px;
  height: 100%;
  min-height: 0;
}

.work-media-filter {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-self: center;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--glass-strong) 82%, transparent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 13%, transparent);
}

.work-media-filter button {
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 780;
}

.work-media-filter button.is-active {
  background: color-mix(in srgb, var(--accent) 26%, var(--glass-strong));
  box-shadow: 0 4px 13px color-mix(in srgb, var(--accent) 24%, transparent);
}

.work-slide,
.client-viewer__card {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.66);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.68);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(26px);
}

.work-slide__photo,
.client-viewer__card {
  position: relative;
}

.work-slide__photo,
.client-viewer__card > img {
  min-height: 0;
  overflow: hidden;
  background: #dce9ef;
}

.work-slide__photo img,
.work-slide__photo video,
.client-viewer__card > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #11171b;
}

.work-slide__photo span {
  position: absolute;
  left: 22px;
  top: 22px;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(17, 23, 27, 0.78);
  color: white;
  font-size: 0.8rem;
  font-weight: 840;
  text-transform: uppercase;
}

.work-slide__photo > .admin-media-edit,
.client-viewer__card > .admin-media-edit,
.client-story > .admin-media-edit {
  z-index: 10;
  right: 12px;
  top: 12px;
  left: auto;
  display: inline-flex;
  width: 34px;
  height: 34px;
  min-height: 34px;
  margin: 0;
  padding: 0;
  color: #c7a96a;
  background: rgba(255, 255, 255, 0.92);
  font-size: 0;
  font-weight: inherit;
  text-transform: none;
}

.work-slide__info,
.client-viewer__card div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 18px;
  padding: 18px 22px;
}

.work-slide__info small,
.work-slide__info h2,
.work-slide__info p,
.client-viewer__card strong,
.client-viewer__card span {
  min-width: 0;
}

.work-slide__info small,
.client-viewer__card span {
  color: var(--muted);
  font-weight: 760;
}

.work-slide__info h2,
.client-viewer__card strong {
  margin: 0;
  font-size: 1.45rem;
  line-height: 1.08;
}

.work-slide__info p {
  grid-column: 1;
  margin: 0;
  color: #536269;
  line-height: 1.34;
}

.work-slide__info em,
.client-viewer__card em {
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: center;
  color: #11171b;
  font-style: normal;
  font-size: 1.18rem;
  font-weight: 860;
}

.work-nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: #11171b;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(22px);
}

.work-nav-button:disabled {
  cursor: default;
  opacity: 0.34;
  filter: grayscale(0.45);
  pointer-events: none;
}

.client-viewer__card > img {
  object-fit: contain;
}

.review-grid--six {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.review-card {
  min-width: 0;
}

.review-card small {
  margin-top: 8px;
  color: var(--muted);
  font-weight: 740;
}

.review-card p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.review-score .primary-action {
  width: 100%;
  margin-top: 18px;
}

.review-score .primary-action strong {
  margin-top: 0;
  font-size: 1.08rem;
  line-height: 1.1;
}

.review-score .primary-action span {
  margin-top: 0;
  color: inherit;
  font-weight: inherit;
}

.review-score .primary-action small {
  color: rgba(255, 255, 255, 0.68);
}

.clients-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 18px;
  height: 100%;
  min-height: 0;
}

.client-story {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.66);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.64);
  box-shadow: var(--shadow-soft);
  color: inherit;
  text-align: left;
  appearance: none;
}

.client-story::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 46%, rgba(13, 19, 23, 0.72));
}

.client-story div {
  position: absolute;
  z-index: 1;
  left: 20px;
  right: 20px;
  bottom: 18px;
  color: white;
}

.client-story strong,
.client-story span {
  display: block;
}

.client-story strong {
  font-size: 1.24rem;
  line-height: 1.08;
}

.client-story span {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.74);
  font-weight: 720;
}

.services-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.services-grid--four .service-panel {
  grid-template-rows: auto repeat(3, minmax(0, 1fr));
  padding: 20px;
}

.services-grid--four .service-row {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.services-grid--four .service-row em {
  font-size: 1.03rem;
}

.map-panel--photo {
  background: #dce9ef;
}

.map-panel--photo img {
  position: absolute;
  inset: 0;
  filter: saturate(0.95) contrast(1.02);
}

.map-panel--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 14, 18, 0.06), rgba(8, 14, 18, 0.74));
}

.map-panel--photo strong,
.map-panel--photo em,
.map-panel--photo .map-pin,
.map-panel--photo .map-panel__link-edit {
  z-index: 1;
}

.map-panel--photo strong,
.map-panel--photo em {
  color: white;
}

.map-panel--photo em {
  color: rgba(255, 255, 255, 0.76);
}

.map-panel__link-edit {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.75rem;
  font-weight: 820;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.documents-hub-card::before,
.document-card::before {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.52);
}

@media (max-width: 1180px) {
  .menu-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .doctors-grid--team {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }

  .doctors-grid--three,
  .clients-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .works-grid--photo {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .services-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .services-grid.services-grid--four .service-panel:nth-child(3),
  .services-grid.services-grid--four .service-panel:nth-child(4),
  .document-grid .document-card:nth-child(3) {
    display: grid;
  }

  .promo-grid .promo-card:nth-child(3) {
    display: flex;
  }
}

@media (max-height: 790px) {
  .works-grid--photo {
    gap: 10px;
  }

  .work-card--photo .work-card__body {
    padding: 12px;
  }

  .work-card--photo .work-card__body h2 {
    font-size: 0.94rem;
  }

  .work-card--photo .work-card__body p {
    -webkit-line-clamp: 1;
  }

  .review-card {
    padding: 18px;
  }

  .review-card p {
    margin-top: 8px;
    font-size: 0.92rem;
    -webkit-line-clamp: 2;
  }
}

@media (max-width: 820px) {
  .menu-grid,
  .works-grid--photo,
  .clients-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }

  .review-grid--six {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  .tooth-backdrop {
    width: 86vw;
    right: -22vw;
  }
}

@media (max-width: 640px) {
  :root {
    --radius-lg: 28px;
    --radius-md: 22px;
    --radius-sm: 16px;
  }

  html,
  body,
  #root {
    min-width: 320px;
  }

  .screen-shell {
    padding: max(16px, env(safe-area-inset-top)) 28px max(18px, env(safe-area-inset-bottom));
  }

  .topbar {
    height: 56px;
    margin-bottom: 20px;
  }

  .brand-chip {
    max-width: 188px;
    height: 52px;
    padding: 0 16px;
    gap: 10px;
    font-size: 0.98rem;
  }

  .brand-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar__actions {
    gap: 10px;
  }

  .icon-action {
    min-width: 52px;
    width: 52px;
    height: 52px;
    padding: 0;
  }

  .screen-grid,
  .screen-grid:has(.screen-aside) {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    height: calc(100% - 76px);
    gap: 18px;
  }

  .screen-heading h1,
  .splash-screen h1 {
    max-width: 10ch;
    font-size: clamp(3.05rem, 13vw, 4rem);
    line-height: 1.08;
  }

  .screen-heading h1 {
    text-wrap: balance;
  }

  .eyebrow {
    margin-bottom: 16px;
    font-size: 0.76rem;
    letter-spacing: 0.22em;
  }

  .screen-subtitle {
    max-width: 34ch;
    margin-top: 12px;
    font-size: 1.06rem;
    line-height: 1.38;
  }

  .screen-content {
    min-height: 0;
    overflow: hidden;
  }

  .screen-aside {
    display: none;
  }

  .splash-screen {
    grid-template-columns: 1fr;
    align-content: center;
    padding: 34px 28px;
  }

  .splash-mark {
    width: 72px;
    height: 72px;
    margin-bottom: 24px;
    border-radius: 24px;
  }

  .splash-mark img {
    width: 54px;
    height: 54px;
  }

  .splash-lead {
    max-width: 32ch;
    margin-top: 20px;
    font-size: 1.05rem;
    line-height: 1.4;
  }

  .splash-actions {
    gap: 12px;
    margin-top: 28px;
  }

  .start-button,
  .ghost-button {
    height: 58px;
    min-width: 0;
    padding: 0 20px;
  }

  .feature-strip {
    gap: 8px;
    margin-top: 24px;
  }

  .feature-strip span {
    min-height: 36px;
    padding: 0 11px;
    font-size: 0.76rem;
  }

  .menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  .menu-grid .menu-tile:nth-child(7) {
    grid-column: 1 / -1;
  }

  .menu-tile {
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 0;
    padding: 10px 8px;
    border-radius: 22px;
    text-align: center;
  }

  .menu-tile__icon {
    width: 42px;
    height: 42px;
    border-radius: 15px;
  }

  .menu-tile__icon svg {
    width: 24px;
    height: 24px;
  }

  .menu-tile strong {
    margin-top: 2px;
    font-size: clamp(0.78rem, 3vw, 0.95rem);
    line-height: 1.06;
    overflow-wrap: anywhere;
  }

  .menu-tile small {
    display: none;
  }

  .doctors-grid--team,
  .doctors-grid--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .doctors-grid--team {
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }

  .doctors-grid--three {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .doctors-grid--three .doctor-card:nth-child(3) {
    width: calc(50% - 5px);
    grid-column: 1 / -1;
    justify-self: center;
  }

  .doctor-card {
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 0;
    padding: 10px;
    border-radius: 26px;
  }

  .doctor-card::before {
    inset: auto 10px 10px;
    height: 38%;
    border-radius: 20px;
  }

  .doctor-card__photo {
    border-radius: 22px;
  }

  .doctor-card__photo img {
    object-position: center top;
  }

  .doctor-card__body {
    min-height: 0;
    padding: 0 2px 3px;
  }

  .doctor-card__body small {
    display: none;
  }

  .doctor-card__body strong {
    margin-top: 0;
    font-size: clamp(0.94rem, 3.9vw, 1.18rem);
    line-height: 1.05;
    overflow-wrap: anywhere;
  }

  .doctor-card__body em {
    margin-top: 5px;
    font-size: clamp(0.68rem, 2.55vw, 0.82rem);
    line-height: 1.12;
  }

  .doctor-card__arrow {
    display: none;
  }

  .profile-layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .profile-photo {
    display: none;
  }

  .profile-info {
    padding: 22px;
  }

  .profile-info p {
    font-size: 1rem;
    line-height: 1.42;
  }

  .competency-grid span {
    padding: 9px 11px;
    font-size: 0.82rem;
  }

  .profile-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .primary-action {
    min-height: 70px;
    padding: 12px;
    gap: 10px;
    border-radius: 18px;
  }

  .primary-action__icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 14px;
  }

  .primary-action strong {
    font-size: 0.96rem;
    line-height: 1.1;
  }

  .primary-action small {
    display: none;
  }

  .works-grid--photo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  .work-card--photo {
    grid-template-rows: minmax(0, 1fr);
    border-radius: 22px;
  }

  .work-card--photo .work-card__body {
    display: none;
  }

  .work-photo span {
    left: 10px;
    top: 10px;
    max-width: calc(100% - 20px);
    padding: 6px 8px;
    font-size: 0.6rem;
  }

  .review-layout,
  .contacts-layout,
  .appointment-layout {
    grid-template-columns: 1fr;
  }

  .review-score,
  .contact-card-grid {
    display: none;
  }

  .review-grid--six {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .review-card {
    padding: 18px;
    border-radius: 22px;
  }

  .review-card div {
    align-items: flex-start;
    gap: 8px;
  }

  .review-card div > strong {
    font-size: clamp(1rem, 4vw, 1.24rem);
    line-height: 1.05;
  }

  .review-card span {
    font-size: 0.92rem;
    white-space: nowrap;
  }

  .review-card p {
    display: none;
  }

  .review-card small {
    margin-top: 12px;
    font-size: 0.82rem;
  }

  .clients-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .client-story {
    border-radius: 28px;
  }

  .client-story div {
    left: 14px;
    right: 14px;
    bottom: 13px;
  }

  .client-story strong {
    font-size: clamp(0.94rem, 4.4vw, 1.18rem);
  }

  .client-story span {
    display: none;
  }

  .services-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .services-grid--four .service-panel {
    grid-template-rows: auto repeat(3, minmax(0, 1fr));
    padding: 14px;
    border-radius: 22px;
  }

  .service-panel h2 {
    margin-bottom: 10px;
    font-size: 1rem;
    line-height: 1.1;
  }

  .services-grid--four .service-row {
    padding: 10px;
    border-radius: 16px;
    overflow: hidden;
  }

  .service-row strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.78rem;
    line-height: 1.14;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .service-row small {
    display: none;
  }

  .services-grid--four .service-row em {
    margin-top: 7px;
    max-width: 100%;
    font-size: 0.76rem;
    line-height: 1.08;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .appointment-layout {
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
  }

  .appointment-panel {
    padding: 16px;
    border-radius: 22px;
  }

  .appointment-panel h2 {
    margin-bottom: 12px;
    font-size: 1rem;
  }

  .doctor-picker {
    gap: 9px;
    height: calc(100% - 36px);
  }

  .doctor-picker button {
    border-radius: 18px;
  }

  .doctor-picker span {
    min-height: 64px;
    padding: 9px;
  }

  .doctor-picker strong {
    font-size: 0.76rem;
    line-height: 1.05;
  }

  .doctor-picker small {
    margin-top: 4px;
    font-size: 0.66rem;
    line-height: 1.05;
  }

  .appointment-panel--time {
    gap: 10px;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
  }

  .time-grid {
    gap: 8px;
  }

  .time-grid button {
    border-radius: 16px;
    font-size: 0.94rem;
  }

  .visit-summary {
    min-height: 48px;
    padding: 0 12px;
    border-radius: 16px;
  }

  .visit-summary span {
    max-width: 18ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .visit-summary strong {
    font-size: 1.1rem;
  }

  .confirm-button {
    height: 54px;
    border-radius: 17px;
  }

  .map-panel {
    min-height: 0;
    padding: 26px;
    border-radius: 0;
  }

  .map-pin {
    width: 76px;
    height: 76px;
    border-radius: 26px;
  }

  .map-panel strong {
    font-size: clamp(2rem, 8vw, 2.65rem);
    line-height: 1.08;
  }

  .map-panel em {
    font-size: 1rem;
  }

  .document-grid,
  .documents-hub-grid,
  .promo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .work-carousel,
  .client-viewer {
    display: block;
    height: 100%;
  }

  .work-slide,
  .client-viewer__card {
    height: 100%;
    border-radius: 26px;
  }

  .work-slide__photo img,
  .client-viewer__card > img {
    object-fit: contain;
  }

  .work-slide__photo span {
    left: 14px;
    top: 14px;
    padding: 7px 10px;
    font-size: 0.68rem;
  }

  .work-slide__info,
  .client-viewer__card div {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 12px 14px;
  }

  .work-slide__info h2,
  .client-viewer__card strong {
    font-size: 1rem;
    line-height: 1.08;
  }

  .work-slide__info p {
    display: none;
  }

  .work-slide__info small,
  .client-viewer__card span {
    font-size: 0.78rem;
  }

  .work-slide__info em,
  .client-viewer__card em {
    font-size: 0.94rem;
  }

  .work-nav-button {
    position: absolute;
    z-index: 5;
    top: 43%;
    width: 50px;
    height: 50px;
  }

  .work-nav-button--prev {
    left: 8px;
  }

  .work-nav-button--next {
    right: 8px;
  }

  .documents-screen .screen-heading h1 {
    max-width: 11ch;
    font-size: clamp(2.2rem, 10vw, 3rem);
  }

  .documents-hub-card,
  .document-card {
    justify-content: flex-start;
    gap: 8px;
    padding: 16px;
    border-radius: 22px;
  }

  .documents-hub-card::before,
  .document-card::before {
    display: none;
  }

  .documents-hub-card span,
  .document-card__icon {
    position: static;
    width: 42px;
    height: 42px;
    min-height: 42px;
    border-radius: 15px;
  }

  .documents-hub-card span svg,
  .document-card__icon svg {
    width: 23px;
    height: 23px;
  }

  .documents-hub-card strong,
  .document-card h3 {
    font-size: 1.04rem;
    line-height: 1.06;
    overflow-wrap: anywhere;
  }

  .documents-hub-card small,
  .document-card p,
  .document-card strong {
    margin-top: 0;
    font-size: 0.78rem;
    line-height: 1.14;
  }

  .promotions-screen .screen-subtitle {
    display: none;
  }

  .promo-grid .promo-card:nth-child(3) {
    display: flex;
    grid-column: 1 / -1;
  }

  .promotions-screen .promo-grid {
    align-content: start;
    height: auto;
    grid-auto-rows: minmax(170px, auto);
  }

  .promo-card {
    min-height: 0;
    padding: 18px;
    overflow: hidden;
    border-radius: 22px;
  }

  .promo-card span {
    font-size: 0.76rem;
    line-height: 1.12;
  }

  .promo-card h2 {
    margin: 12px 0 10px;
    font-size: 1.18rem;
    line-height: 1.08;
    overflow-wrap: anywhere;
  }

  .promo-card p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.9rem;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
  }

  .promo-card strong {
    margin-top: 14px;
    font-size: 1rem;
    line-height: 1.08;
  }

  .services-screen .screen-subtitle {
    display: none;
  }

  .services-grid--four .service-panel {
    grid-template-rows: auto repeat(3, minmax(0, 1fr));
    padding: 16px;
  }

  .service-panel h2 {
    font-size: 1.06rem;
  }

  .services-grid--four .service-row {
    display: block;
    padding: 10px 11px;
    border-radius: 14px;
  }

  .services-grid--four .service-row span {
    display: block;
    width: 100%;
  }

  .service-row strong {
    display: block;
    overflow: hidden;
    font-size: 0.82rem;
    line-height: 1.12;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-wrap: normal;
    -webkit-line-clamp: unset;
  }

  .services-grid--four .service-row em {
    display: block;
    margin-top: 6px;
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .appointment-screen .screen-subtitle {
    display: none;
  }

  .appointment-screen .screen-heading h1 {
    font-size: clamp(2.75rem, 12vw, 3.5rem);
  }

  .appointment-layout {
    grid-template-rows: 43% 57%;
  }

  .appointment-panel {
    padding: 14px;
  }

  .doctor-picker button {
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .doctor-picker span {
    min-height: 58px;
    padding: 8px;
  }

  .time-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .time-grid button {
    min-height: 38px;
    font-size: 0.86rem;
  }

  .visit-summary {
    display: none;
  }

  .confirm-button {
    height: 50px;
  }
}

@media (max-width: 390px) {
  .screen-shell {
    padding-left: 20px;
    padding-right: 20px;
  }

  .screen-heading h1,
  .splash-screen h1 {
    font-size: clamp(2.55rem, 12.4vw, 3.4rem);
  }

  .screen-subtitle {
    font-size: 0.96rem;
  }

  .menu-tile__icon,
  .primary-action__icon {
    width: 38px;
    height: 38px;
  }

  .menu-tile strong,
  .doctor-card__body strong {
    font-size: 0.78rem;
  }

  .review-card,
  .appointment-panel {
    padding: 14px;
  }
}

.admin-launcher,
.admin-bar,
.admin-panel,
.admin-modal {
  position: fixed;
  z-index: 50;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.admin-launcher {
  right: 22px;
  bottom: 22px;
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  background: #11171b;
  color: white;
  font-size: 1.7rem;
  box-shadow: 0 18px 45px rgba(17, 23, 27, 0.26);
}

.admin-modal {
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(10, 16, 19, 0.38);
  backdrop-filter: blur(16px);
}

.admin-login {
  display: grid;
  gap: 14px;
  width: min(360px, calc(100vw - 36px));
  padding: 24px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow);
}

.admin-login h2,
.admin-panel h3 {
  margin: 0;
}

.admin-login label,
.admin-panel label {
  display: grid;
  gap: 7px;
  color: #4d5c64;
  font-size: 0.82rem;
  font-weight: 760;
}

.admin-login input,
.admin-panel input,
.admin-panel textarea,
.admin-panel select {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(17, 23, 27, 0.14);
  border-radius: 12px;
  background: white;
  color: #11171b;
  font: inherit;
  font-size: 0.9rem;
}

.admin-login input,
.admin-panel input,
.admin-panel select {
  height: 42px;
  padding: 0 12px;
}

.admin-panel textarea {
  min-height: 88px;
  padding: 11px 12px;
  resize: vertical;
}

.admin-login div,
.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-login button,
.admin-bar button,
.admin-panel button {
  min-height: 38px;
  border: 0;
  border-radius: 12px;
  background: #11171b;
  color: white;
  padding: 0 14px;
  font-weight: 760;
}

.admin-login button[type="button"],
.admin-bar button + button,
.admin-panel summary button,
.admin-panel nav button {
  background: rgba(17, 23, 27, 0.08);
  color: #11171b;
}

.admin-message,
.admin-hint {
  margin: 0;
  color: #607078;
  font-size: 0.84rem;
  line-height: 1.35;
}

.admin-bar {
  right: 18px;
  bottom: 18px;
  display: flex;
  gap: 8px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.admin-bar--inline {
  z-index: 89;
  top: max(18px, env(safe-area-inset-top));
  right: calc(clamp(16px, 3vw, 48px) + 42px);
  bottom: auto;
  align-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.admin-bar--inline .admin-bar__icon {
  display: grid;
  width: 30px;
  min-height: 30px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  color: var(--gold) !important;
  font-size: 1.25rem;
  line-height: 1;
  text-shadow: 0 0 13px color-mix(in srgb, var(--gold) 58%, transparent);
  transition: color 180ms ease, transform 180ms ease, text-shadow 180ms ease;
}

.admin-bar--inline .admin-bar__icon:hover,
.admin-bar--inline .admin-bar__icon:focus-visible {
  color: color-mix(in srgb, var(--gold) 72%, white) !important;
  outline: none;
  text-shadow: 0 0 19px color-mix(in srgb, var(--gold) 82%, transparent);
  transform: scale(1.12);
}

body:has(.page-layout-toolbar.is-editing) .admin-bar--inline {
  display: none;
}

@media (max-width: 680px) {
  .admin-bar--inline {
    top: auto;
    right: 54px;
    bottom: max(12px, env(safe-area-inset-bottom));
  }
}

/* Keep this final because the kiosk historically has several mobile variants.
   The active screen is the sole vertical scroll container on a handset. */
@media (max-width: 820px) {
  .screen-layer--enter {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .screen-layer--enter .screen-shell {
    height: auto !important;
    min-height: 100dvh;
    overflow: visible !important;
  }

  .screen-layer--enter .screen-grid,
  .screen-layer--enter .screen-grid:has(.screen-aside) {
    height: auto !important;
    min-height: calc(100dvh - 96px);
    grid-template-rows: auto auto !important;
    overflow: visible !important;
  }

  .screen-layer--enter .screen-content {
    overflow: visible !important;
  }

  .screen-layer--enter .review-layout,
  .screen-layer--enter .contacts-layout,
  .screen-layer--enter .document-grid,
  .screen-layer--enter .documents-hub-grid,
  .screen-layer--enter .review-grid {
    height: auto !important;
    min-height: 0;
  }

  .screen-layer--enter .review-grid,
  .screen-layer--enter .review-grid--six {
    grid-template-rows: none !important;
    grid-auto-rows: auto;
  }

  .screen-layer--enter .contacts-layout .contact-card-grid {
    display: grid !important;
  }

  .screen-layer--enter .document-grid--sheets .document-sheet,
  .screen-layer--enter .document-viewer .document-sheet {
    height: auto !important;
    min-height: 250px;
  }
}

/* Mobile terminal screens must retain the kiosk layout while allowing long real
   content to be reached.  Cards grow vertically instead of clipping text. */
@media (max-width: 820px) {
  .screen-layer--enter {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  .screen-layer--enter .screen-shell {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .screen-layer--enter .screen-grid,
  .screen-layer--enter .screen-grid:has(.screen-aside) {
    height: auto;
    min-height: calc(100dvh - 96px);
    grid-template-rows: auto auto;
    overflow: visible;
  }

  .screen-layer--enter .screen-content {
    min-height: 0;
    overflow: visible;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }

  .screen-layer--enter .review-layout,
  .screen-layer--enter .contacts-layout,
  .screen-layer--enter .document-grid,
  .screen-layer--enter .documents-hub-grid {
    height: auto;
    min-height: 0;
    align-content: start;
  }

  .screen-layer--enter .review-grid,
  .screen-layer--enter .review-grid--six {
    grid-template-rows: none;
    grid-auto-rows: auto;
  }

  .screen-layer--enter .review-card {
    min-height: 154px;
  }

  .screen-layer--enter .review-card p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
  }

  .screen-layer--enter .contacts-layout .contact-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    gap: 10px;
  }

  .screen-layer--enter .contacts-layout .contact-card {
    min-height: 116px;
    padding: 16px;
  }

  .screen-layer--enter .map-panel {
    min-height: clamp(260px, 66vw, 380px);
  }

  .screen-layer--enter .document-grid--sheets {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: minmax(250px, auto);
  }

  .screen-layer--enter .document-grid--sheets .document-sheet {
    height: auto;
    min-height: 250px;
  }

  .screen-layer--enter .document-viewer {
    display: block;
    height: auto;
    min-height: 0;
    padding: 8px;
    overflow: visible;
  }

  .screen-layer--enter .document-viewer .document-sheet {
    width: 100%;
    height: auto;
    min-height: 0;
    max-width: 100%;
    padding: clamp(22px, 6vw, 36px);
  }

  .screen-layer--enter .document-sheet h2,
  .screen-layer--enter .document-sheet p,
  .screen-layer--enter .document-sheet span,
  .screen-layer--enter .document-sheet strong,
  .screen-layer--enter .document-sheet__details {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .screen-layer--enter .document-sheet h2 {
    font-size: clamp(1.15rem, 6vw, 1.8rem);
    line-height: 1.08;
  }

  .screen-layer--enter .document-sheet p,
  .screen-layer--enter .document-sheet span,
  .screen-layer--enter .document-sheet strong {
    font-size: clamp(0.78rem, 3.5vw, 1rem);
    line-height: 1.25;
  }

  .screen-layer--enter .document-sheet__details {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }
}

/* Browser-native media and camera blocks. They avoid high-resolution canvas
   work until the visitor explicitly starts a camera or playback action. */
.site-block-media-player,
.site-block-iptv,
.site-block-device-check,
.site-block-local-camera,
.site-block-camera-gateway {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.site-block-media-player__stage,
.site-block-iptv__player,
.site-block-camera-gateway__preview,
.site-block-local-camera > video {
  min-height: 180px;
  overflow: hidden;
  background: #07131c;
  border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent);
  border-radius: 8px;
}

.site-block-media-player video,
.site-block-iptv video,
.site-block-camera-gateway video,
.site-block-camera-gateway img,
.site-block-camera-gateway iframe,
.site-block-local-camera > video {
  display: block;
  width: 100%;
  min-height: 180px;
  max-height: 520px;
  object-fit: contain;
  background: #07131c;
  border: 0;
}

.site-block-media-player__actions,
.site-block-local-camera__actions,
.site-block-camera-gateway__actions,
.site-block-iptv__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.site-block-media-player__actions label,
.site-block-iptv__filters label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.site-block-media-player__actions button,
.site-block-local-camera__actions button,
.site-block-camera-gateway__actions button,
.site-block-device-check button,
.site-block-iptv button {
  min-height: 36px;
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  border-radius: 6px;
  padding: 7px 10px;
  color: var(--text);
  background: color-mix(in srgb, var(--glass-strong) 86%, #0a1821);
  cursor: pointer;
}

.site-block-media-player__actions button:hover,
.site-block-local-camera__actions button:hover,
.site-block-camera-gateway__actions button:hover,
.site-block-device-check button:hover,
.site-block-iptv button:hover,
.site-block-iptv li.is-active > button:first-child {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 15%, var(--glass-strong));
}

.site-block-media-player small[data-media-status],
.site-block-iptv small[data-media-status],
.site-block-device-check small[data-media-status],
.site-block-local-camera small[data-media-status],
.site-block-camera-gateway small[data-media-status] {
  color: var(--muted);
  line-height: 1.42;
}

small[data-media-status][data-state="success"] { color: #58ca9a; }
small[data-media-status][data-state="warning"] { color: #e9b85e; }
small[data-media-status][data-state="error"] { color: #eb7a82; }

.site-block-iptv__filters input,
.site-block-iptv__filters select,
.site-block-media-player__actions select {
  max-width: 100%;
  min-height: 36px;
}

.site-block-iptv ul,
.site-block-device-check ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-block-iptv li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

.site-block-iptv li > button:first-child {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  text-align: left;
}

.site-block-iptv li img,
.site-block-iptv li i {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  object-fit: cover;
  font-style: normal;
  text-align: center;
  line-height: 28px;
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
}

.site-block-iptv li span,
.site-block-iptv li strong,
.site-block-iptv li small { min-width: 0; overflow-wrap: anywhere; }
.site-block-iptv li small { display: block; color: var(--muted); }
.site-block-iptv [data-iptv-favorite].is-active { color: var(--gold); }
.site-block-iptv [data-iptv-now] { min-height: 1.4em; overflow-wrap: anywhere; }

.site-block-device-check li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 6px;
}

.site-block-device-check li span { color: var(--muted); text-align: right; }

@media (max-width: 620px) {
  .site-block-media-player__actions,
  .site-block-local-camera__actions,
  .site-block-camera-gateway__actions,
  .site-block-iptv__filters { display: grid; grid-template-columns: 1fr; }

  .site-block-media-player__actions label,
  .site-block-iptv__filters label { justify-content: space-between; }

  .site-block-media-player video,
  .site-block-iptv video,
  .site-block-camera-gateway video,
  .site-block-camera-gateway img,
  .site-block-camera-gateway iframe,
  .site-block-local-camera > video { min-height: 156px; }
}

/* Studio workspace: the editing controls are application chrome, while the
   site remains a live canvas underneath. Panels mirror the authoring flow
   without becoming part of the published page. */
.page-layout-studio {
  position: fixed;
  z-index: 940;
  inset: 32px 0 0;
  display: grid;
  grid-template-columns: 266px minmax(0, 1fr) 294px;
  gap: 12px;
  padding: 12px;
  pointer-events: none;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.page-layout-studio__left,
.page-layout-studio__right {
  min-width: 0;
  pointer-events: auto;
}

.page-layout-studio__left,
.page-layout-studio__right {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  min-height: 0;
  border: 1px solid rgba(190, 207, 217, 0.2);
  border-radius: 7px;
  background: rgba(20, 30, 36, 0.96);
  box-shadow: 0 16px 38px rgba(2, 8, 12, 0.34);
  color: #eef5f8;
  overflow: hidden;
}

.page-layout-studio__right {
  grid-template-rows: auto minmax(0, 1fr);
}

.page-layout-studio__left > header,
.page-layout-studio__right > header {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(190, 207, 217, 0.13);
}

.page-layout-studio__left > header strong,
.page-layout-studio__right > header strong {
  color: #fff;
  font-size: 0.76rem;
  font-weight: 760;
}

.page-layout-studio__left > header > div {
  display: grid;
  gap: 2px;
}

.page-layout-studio__left > header small {
  color: #8fa7b4;
  font-size: 0.59rem;
}

.page-layout-studio__right > header span {
  color: #98abb7;
  font-size: 0.64rem;
}

.page-layout-studio__left > header button {
  display: grid;
  width: 26px;
  height: 26px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #b9cbd4;
  cursor: pointer;
}

.page-layout-studio__left > header button:hover {
  background: rgba(255, 255, 255, 0.11);
  color: #fff;
}

.page-layout-studio__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 7px 8px;
  gap: 4px;
  border-bottom: 1px solid rgba(190, 207, 217, 0.13);
}

.page-layout-studio__tabs button,
.page-layout-studio__stage-bar button {
  min-height: 28px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #b7c7cf;
  font: 650 0.68rem/1 Inter, ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}

.page-layout-studio__tabs button:hover,
.page-layout-studio__tabs button.is-active,
.page-layout-studio__stage-bar button:hover,
.page-layout-studio__stage-bar button.is-active {
  background: #306b9b;
  color: #fff;
}

.page-layout-studio__workflow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  padding: 8px;
  border-bottom: 1px solid rgba(190, 207, 217, 0.13);
}

.page-layout-studio__workflow button {
  display: grid;
  min-width: 0;
  min-height: 42px;
  padding: 5px 4px;
  place-items: center;
  gap: 2px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.035);
  color: #9db1bc;
  cursor: pointer;
}

.page-layout-studio__workflow button span {
  color: #6f8793;
  font-size: 0.54rem;
  font-weight: 760;
}

.page-layout-studio__workflow button strong {
  max-width: 100%;
  overflow: hidden;
  color: inherit;
  font-size: 0.56rem;
  font-weight: 720;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-layout-studio__workflow button:hover,
.page-layout-studio__workflow button.is-active {
  border-color: rgba(102, 194, 255, 0.52);
  background: rgba(47, 114, 158, 0.34);
  color: #f4fbff;
}

.page-layout-studio__workflow button.is-active span {
  color: #88d7ff;
}

.page-layout-studio__step-intro {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 9px 10px;
  border-bottom: 1px solid rgba(190, 207, 217, 0.13);
  background: rgba(7, 16, 22, 0.38);
}

.page-layout-studio__step-intro > span {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  background: #28658e;
  color: #e8f9ff;
  font-size: 0.58rem;
  font-weight: 780;
}

.page-layout-studio__step-intro div {
  min-width: 0;
}

.page-layout-studio__step-intro strong {
  color: #f5fbff;
  font-size: 0.7rem;
}

.page-layout-studio__step-intro p {
  margin: 3px 0 0;
  color: #96aeba;
  font-size: 0.6rem;
  line-height: 1.35;
}

.page-layout-studio__scroll {
  min-height: 0;
  padding: 10px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: #527286 transparent;
}

.page-layout-studio__library-group {
  margin: 0 0 16px;
}

.page-layout-studio__library-group h3 {
  margin: 0 0 6px;
  color: #97aeb9;
  font-size: 0.63rem;
  font-weight: 760;
  text-transform: uppercase;
}

.page-layout-studio__library-group > div {
  display: grid;
  gap: 4px;
}

.page-layout-studio__library-group > .page-layout-studio__starter-kits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.page-layout-studio__starter-kits button {
  min-height: 92px;
  align-content: start;
  gap: 5px;
  text-align: left;
}

.page-layout-studio__starter-kits button strong,
.page-layout-studio__starter-kits button small,
.page-layout-studio__starter-kits button span {
  display: block;
  min-width: 0;
}

.page-layout-studio__starter-kits button strong { color: #f5fbff; }
.page-layout-studio__starter-kits button small { min-height: 2.5em; }
.page-layout-studio__starter-kits button span { color: #82b9d6; font-size: 0.59rem; font-weight: 700; }

.page-layout-studio__starter-note {
  margin: 0;
  color: #9eb2bc;
  font-size: 0.64rem;
  line-height: 1.4;
}

.page-layout-studio__library-group button,
.page-layout-studio__tree button,
.page-layout-studio__inspector-actions button {
  display: grid;
  width: 100%;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.045);
  color: #edf4f7;
  font: 650 0.7rem/1.2 Inter, ui-sans-serif, system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}

.page-layout-studio__library-group button:hover,
.page-layout-studio__tree button:hover,
.page-layout-studio__tree button.is-selected,
.page-layout-studio__inspector-actions button:hover {
  border-color: rgba(107, 195, 255, 0.6);
  background: rgba(55, 132, 183, 0.28);
}

.page-layout-studio__library-group button small {
  margin-top: 2px;
  color: #9bb1bd;
  font-size: 0.61rem;
  font-weight: 500;
}

.page-layout-studio__device-guide,
.page-layout-studio__review {
  padding: 9px;
  border: 1px solid rgba(123, 194, 236, 0.24);
  border-radius: 5px;
  background: rgba(29, 68, 91, 0.2);
}

.page-layout-studio__device-guide strong,
.page-layout-studio__review strong {
  color: #eaf8ff;
  font-size: 0.69rem;
}

.page-layout-studio__device-guide p,
.page-layout-studio__review p {
  margin: 5px 0 0;
  color: #a8bec9;
  font-size: 0.62rem;
  line-height: 1.4;
}

.page-layout-studio__review button {
  margin-top: 9px;
}

.page-layout-studio__readiness {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 5px;
  list-style: none;
}

.page-layout-studio__readiness li {
  display: grid;
  gap: 3px;
  padding: 7px 8px;
  border-left: 2px solid #5b8ea9;
  background: rgba(255, 255, 255, 0.035);
}

.page-layout-studio__readiness li[data-level="ready"] { border-left-color: #57c88d; }
.page-layout-studio__readiness li[data-level="warning"] { border-left-color: #e3b85b; }
.page-layout-studio__readiness li[data-level="info"] { border-left-color: #6ea9d0; }

.page-layout-studio__readiness strong {
  color: #eff8fb;
  font-size: 0.64rem;
}

.page-layout-studio__readiness span {
  color: #9eb5c0;
  font-size: 0.59rem;
  line-height: 1.32;
}

.page-layout-studio__tree {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 3px;
  list-style: none;
}

.page-layout-studio__tree button {
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: center;
  min-height: 32px;
  padding: 6px 7px;
}

.page-layout-studio__tree button span {
  color: #75cbff;
  font-size: 0.7rem;
}

.page-layout-studio__tree button strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-layout-studio__stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  pointer-events: none;
}

.page-layout-studio__stage-bar {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 36px;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border: 1px solid rgba(190, 207, 217, 0.22);
  border-radius: 6px;
  background: rgba(20, 30, 36, 0.96);
  box-shadow: 0 10px 24px rgba(2, 8, 12, 0.24);
  color: #dce8ed;
  pointer-events: auto;
}

.page-layout-studio__stage-bar > span,
.page-layout-studio__stage-bar output {
  color: #a6bcc6;
  font-size: 0.62rem;
  font-weight: 650;
  white-space: nowrap;
}

.page-layout-studio__stage-bar > div {
  display: flex;
  max-width: min(58vw, 620px);
  gap: 2px;
  overflow: auto;
  scrollbar-width: none;
}

.page-layout-studio__stage-bar > div::-webkit-scrollbar {
  display: none;
}

.page-layout-studio__stage-bar button {
  flex: 0 0 auto;
  padding: 0 7px;
  font-size: 0.62rem;
}

.page-layout-studio__selected-title {
  display: grid;
  gap: 3px;
  margin-bottom: 14px;
}

.page-layout-studio__selected-title small {
  color: #8eabb9;
  font-size: 0.62rem;
}

.page-layout-studio__selected-title strong {
  color: #fff;
  overflow-wrap: anywhere;
  font-size: 0.82rem;
}

.page-layout-studio__properties {
  display: grid;
  gap: 10px;
}

.page-layout-studio__properties label {
  display: grid;
  gap: 5px;
  color: #b6c7d0;
  font-size: 0.66rem;
  font-weight: 650;
}

.page-layout-studio__properties :is(input:not([type="checkbox"]), select) {
  width: 100%;
  min-height: 32px;
  box-sizing: border-box;
  border: 1px solid rgba(178, 205, 218, 0.25);
  border-radius: 4px;
  background: #111a20;
  color: #f2f7f9;
  font: 600 0.72rem/1 Inter, ui-sans-serif, system-ui, sans-serif;
}

.page-layout-studio__properties input[type="number"],
.page-layout-studio__properties select {
  padding: 0 8px;
}

.page-layout-studio__properties input[type="range"] {
  min-height: 20px;
  accent-color: #64baff;
}

.page-layout-studio__properties output {
  color: #75cbff;
  font-size: 0.65rem;
  text-align: right;
}

.page-layout-studio__toggle {
  grid-template-columns: auto 1fr;
  align-items: center;
}

.page-layout-studio__toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #64baff;
}

.page-layout-studio__inspector-actions {
  display: grid;
  gap: 6px;
  margin-top: 18px;
}

.page-layout-studio__inspector-actions .is-danger {
  border-color: rgba(219, 97, 111, 0.44);
  color: #ffb8c1;
}

.page-layout-studio__empty {
  margin: 0;
  color: #9fb2bc;
  font-size: 0.72rem;
  line-height: 1.45;
}

.page-layout-studio__empty strong {
  display: block;
  margin-bottom: 5px;
  color: #e6f1f5;
}

.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__studio {
  color: #80ccff !important;
}

.screen-layer.page-layout-editor-active.is-studio-preview {
  background: #121a1f;
  overflow: hidden;
}

.screen-layer.page-layout-editor-active.is-studio-preview .screen-shell,
.screen-layer.page-layout-editor-active.is-studio-preview .splash-screen {
  position: absolute !important;
  top: 54px !important;
  left: var(--studio-preview-center-x, 50%) !important;
  width: var(--studio-preview-width) !important;
  min-width: var(--studio-preview-width) !important;
  max-width: var(--studio-preview-width) !important;
  height: var(--studio-preview-height) !important;
  min-height: var(--studio-preview-height) !important;
  margin: 0 !important;
  border: 1px solid rgba(134, 197, 231, 0.5);
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.56);
  overflow: auto !important;
  transform: translateX(-50%) scale(var(--studio-preview-scale, 1));
  transform-origin: top center;
}

.screen-layer.page-layout-editor-active.is-studio-device-phone .screen-grid,
.screen-layer.page-layout-editor-active.is-studio-device-phone .screen-content,
.screen-layer.page-layout-editor-active.is-studio-device-phone .menu-grid,
.screen-layer.page-layout-editor-active.is-studio-device-phone .doctors-grid,
.screen-layer.page-layout-editor-active.is-studio-device-phone .works-grid,
.screen-layer.page-layout-editor-active.is-studio-device-phone .promo-grid,
.screen-layer.page-layout-editor-active.is-studio-device-phone .services-grid,
.screen-layer.page-layout-editor-active.is-studio-device-phone .reviews-grid,
.screen-layer.page-layout-editor-active.is-studio-device-phone .clients-grid,
.screen-layer.page-layout-editor-active.is-studio-device-phone .documents-grid,
.screen-layer.page-layout-editor-active.is-studio-device-phone .contacts-grid {
  grid-template-columns: 1fr !important;
  grid-template-rows: none !important;
}

.screen-layer.page-layout-editor-active.is-studio-device-phone .page-layout-free-canvas {
  min-width: var(--studio-preview-width);
}

.screen-layer.page-layout-editor-active.is-studio-device-tablet .screen-grid,
.screen-layer.page-layout-editor-active.is-studio-device-tablet .screen-content,
.screen-layer.page-layout-editor-active.is-studio-device-tablet .menu-grid,
.screen-layer.page-layout-editor-active.is-studio-device-tablet .doctors-grid,
.screen-layer.page-layout-editor-active.is-studio-device-tablet .works-grid,
.screen-layer.page-layout-editor-active.is-studio-device-tablet .promo-grid,
.screen-layer.page-layout-editor-active.is-studio-device-tablet .services-grid,
.screen-layer.page-layout-editor-active.is-studio-device-tablet .reviews-grid,
.screen-layer.page-layout-editor-active.is-studio-device-tablet .clients-grid,
.screen-layer.page-layout-editor-active.is-studio-device-tablet .documents-grid,
.screen-layer.page-layout-editor-active.is-studio-device-tablet .contacts-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

@media (max-width: 1140px) {
  .page-layout-studio {
    grid-template-columns: 220px minmax(0, 1fr) 246px;
    gap: 8px;
    padding: 8px;
  }

  .page-layout-studio__stage-bar > span,
  .page-layout-studio__stage-bar output {
    display: none;
  }
}

@media (max-width: 820px) {
  .page-layout-studio {
    grid-template-columns: minmax(196px, 68vw) minmax(0, 1fr);
  }

  .page-layout-studio__right {
    display: none;
  }

  .page-layout-studio__stage {
    justify-self: start;
  }

  .page-layout-studio__stage-bar > div {
    max-width: 28vw;
  }
}

/* Final editor overrides belong after every theme and responsive rule. */
.site-theme-studio__panel {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__popover {
  color-scheme: light;
  border: 1px solid #cbd4da !important;
  background: #f6f8f9 !important;
  color: #17242b !important;
  box-shadow: 0 18px 44px rgba(7, 18, 24, 0.28) !important;
}

.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__popover :is(p, strong, span, label, output, h2, h3, legend) {
  color: #17242b !important;
  text-shadow: none !important;
}

.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__popover :is(small, .page-layout-toolbar__popover-title, .page-layout-visual-layers__empty) {
  color: #62727b !important;
  text-shadow: none !important;
}

.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__popover button:not(.page-layout-toolbar__theme-button):not(.page-layout-toolbar__theme-delete) {
  border: 1px solid #d5dde1 !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #17242b !important;
  box-shadow: none !important;
}

.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__popover button:not(.page-layout-toolbar__theme-button):not(.page-layout-toolbar__theme-delete):hover:not(:disabled),
.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__popover button:not(.page-layout-toolbar__theme-button):not(.page-layout-toolbar__theme-delete).is-active {
  border-color: #3979bf !important;
  background: #e9f3ff !important;
  color: #0b4f98 !important;
}

.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__popover :is(input, select, textarea, option) {
  border-color: #c9d3d9 !important;
  background: #fff !important;
  color: #17242b !important;
}

.page-layout-editor-active .page-layout-target > .page-layout-handle {
  position: absolute;
  z-index: 100;
  inset: -7px !important;
  display: block;
  width: auto;
  height: auto;
  border: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}

.page-layout-editor-active .page-layout-handle > .page-layout-handle__actions {
  position: absolute;
  top: -32px;
  right: 0;
  display: flex;
  width: auto;
  height: 27px;
  gap: 4px;
  border: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: auto;
}

.page-layout-editor-active .page-layout-handle__actions > span {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid #4d6571;
  border-radius: 6px;
  background: #17242b;
  color: #fff;
  box-shadow: 0 6px 16px rgba(4, 16, 22, 0.26);
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
}

.page-layout-editor-active .page-layout-handle__actions > .page-layout-handle__move { cursor: grab; color: #f1c86f; }
.page-layout-editor-active .page-layout-handle__actions > .page-layout-handle__delete { border-color: #a73d4b; background: #8f2635; }

.page-layout-editor-active .page-layout-handle > .page-layout-handle__edge {
  position: absolute;
  display: block;
  width: 11px;
  height: 11px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 2px;
  background: #1769c2;
  box-shadow: 0 0 0 1px #174b82, 0 2px 8px rgba(6, 31, 54, 0.24);
  pointer-events: auto;
  touch-action: none;
}

.page-layout-handle__edge--n { top: -5px; left: calc(50% - 5px); cursor: ns-resize; }
.page-layout-handle__edge--ne { top: -5px; right: -5px; cursor: nesw-resize; }
.page-layout-handle__edge--e { top: calc(50% - 5px); right: -5px; cursor: ew-resize; }
.page-layout-handle__edge--se { right: -5px; bottom: -5px; cursor: nwse-resize; }
.page-layout-handle__edge--s { bottom: -5px; left: calc(50% - 5px); cursor: ns-resize; }
.page-layout-handle__edge--sw { bottom: -5px; left: -5px; cursor: nesw-resize; }
.page-layout-handle__edge--w { top: calc(50% - 5px); left: -5px; cursor: ew-resize; }
.page-layout-handle__edge--nw { top: -5px; left: -5px; cursor: nwse-resize; }

/* Animated assets keep their intended icon/card distinction on narrow screens,
   even when the free-layout percentage width was authored on a desktop. */
@media (max-width: 600px) {
  .page-layout-editor-active .layout-custom-card--icon:has(.site-block-visual-asset--animatedImage[data-image-mode="icon"]) {
    min-width: min(156px, calc(100vw - 64px)) !important;
  }

  .page-layout-editor-active .layout-custom-card--card:has(.site-block-visual-asset--animatedImage[data-image-mode="card"]) {
    min-width: min(280px, calc(100vw - 64px)) !important;
  }
}

/* Keep the complete creator interface in Electron's top application strip.
   This must remain last because the kiosk styles above also style toolbars. */
body:has(.creator-window-chrome) .builder-editor-bar {
  display: none !important;
}

body:has(.creator-window-chrome) #root,
body:has(.creator-window-chrome):has(.builder-editor-bar) #root,
body:has(.creator-window-chrome):has(.builder-editor-bar):has(.page-layout-toolbar.is-editing) #root {
  padding-top: 32px !important;
}

body:has(.creator-window-chrome) .kiosk-app,
body:has(.creator-window-chrome):has(.page-layout-toolbar.is-editing) .kiosk-app,
body:has(.creator-window-chrome):has(.builder-editor-bar):has(.page-layout-toolbar.is-editing) .kiosk-app {
  height: calc(100dvh - 32px) !important;
  margin-top: 0 !important;
}

.creator-window-chrome {
  gap: 3px;
  padding: 0 8px;
  overflow: visible;
}

.creator-window-chrome .creator-menu {
  display: flex;
  flex: 0 0 auto;
  gap: 0;
}

.creator-window-chrome .creator-menu__trigger {
  min-height: 28px;
  padding: 0 5px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.67rem;
  font-weight: 400;
  letter-spacing: 0;
}

.creator-window-chrome .creator-menu__trigger:hover,
.creator-window-chrome .creator-menu__trigger[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.creator-window-chrome > .page-layout-toolbar.is-editing {
  position: static;
  z-index: auto;
  display: block;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__top {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 1px;
  flex-wrap: nowrap;
}

.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__group,
.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__history {
  position: relative;
  flex: 0 0 auto;
}

.creator-window-chrome > .page-layout-toolbar.is-editing button {
  min-height: 28px;
  padding: 0 5px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.65rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.creator-window-chrome > .page-layout-toolbar.is-editing button:hover:not(:disabled),
.creator-window-chrome > .page-layout-toolbar.is-editing button.is-open,
.creator-window-chrome > .page-layout-toolbar.is-editing button.is-active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.creator-window-chrome > .page-layout-toolbar.is-editing button:disabled {
  color: rgba(255, 255, 255, 0.34);
}

.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__menu-trigger span {
  display: none;
}

.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__popover {
  position: fixed;
  z-index: 1100;
  top: 36px;
  left: 8px;
  width: min(520px, calc(100vw - 16px));
  max-height: min(74vh, 760px);
  overflow: auto;
  border-radius: 0 0 8px 8px;
}

@media (max-width: 1180px) {
  .creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__top {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__top::-webkit-scrollbar {
    display: none;
  }
}

/* One authoring header: the canvas never carries a floating editor panel. */
body:has(.builder-editor-bar) .builder-editor-bar {
  flex-wrap: wrap;
  align-content: flex-start;
}

body:has(.builder-editor-bar) .page-layout-toolbar.is-compact {
  display: none;
}

/* The layout menu shares the creator header even though it is mounted in the
   canvas root for delegated editor events. Visually it is one fixed header. */
body:has(.builder-editor-bar) .page-layout-toolbar.is-editing {
  top: 56px !important;
  right: 0;
  left: 0;
  width: 100%;
  max-width: none;
  padding: 6px clamp(12px, 2vw, 28px);
  border: 0;
  border-top: 1px solid rgb(18 28 34 / 10%);
  border-bottom: 1px solid rgb(18 28 34 / 12%);
  border-radius: 0;
  background: rgb(255 255 255 / 94%);
  box-shadow: 0 8px 18px rgb(18 28 34 / 8%);
  backdrop-filter: blur(16px);
  transform: none;
}

.creator-account-gate {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 20% 15%, rgb(76 205 196 / 22%), transparent 34%),
    radial-gradient(circle at 82% 84%, rgb(232 185 91 / 20%), transparent 38%),
    rgb(12 17 22 / 88%);
  backdrop-filter: blur(16px);
}

.creator-account-gate__form {
  width: min(100%, 420px);
  display: grid;
  gap: 14px;
  padding: 30px;
  color: #f4f7f8;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 8px;
  background: rgb(17 26 34 / 94%);
  box-shadow: 0 30px 90px rgb(0 0 0 / 48%);
}

.creator-account-gate__mark { color: #e8bb5b; font-size: 24px; }
.creator-account-gate__form p { margin: 0; color: #e8bb5b; font-size: 13px; font-weight: 700; text-transform: uppercase; }
.creator-account-gate__form h1 { margin: -4px 0 0; color: #fff; font-size: 26px; line-height: 1.12; }
.creator-account-gate__form small { color: rgb(232 239 242 / 78%); font-size: 14px; line-height: 1.45; }
.creator-account-gate__form label,
.creator-account-create label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; }
.creator-account-gate__form input,
.creator-account-create input { min-width: 0; min-height: 42px; padding: 0 12px; color: inherit; border: 1px solid rgb(255 255 255 / 18%); border-radius: 5px; background: rgb(255 255 255 / 7%); }
.creator-account-gate__form button,
.creator-account-create button { min-height: 44px; border: 0; border-radius: 5px; color: #162129; background: #e8bb5b; font-weight: 800; cursor: pointer; }
.creator-account-gate__form button:disabled { cursor: wait; opacity: .7; }
.creator-account-gate__message { padding: 10px 12px; color: #ffd8d8; border: 1px solid rgb(255 123 123 / 35%); border-radius: 5px; background: rgb(151 47 47 / 22%); font-size: 13px; line-height: 1.4; }

.creator-accounts-modal { position: fixed; inset: 0; z-index: 10020; overflow: auto; padding: 64px 20px 28px; background: rgb(11 17 21 / 54%); backdrop-filter: blur(8px); }
.creator-accounts-panel { width: min(100%, 1020px); margin: 0 auto; padding: 24px; color: var(--ink, #172028); border: 1px solid var(--line, rgb(12 31 42 / 15%)); border-radius: 8px; background: var(--glass-strong, #fff); box-shadow: 0 30px 100px rgb(0 0 0 / 28%); }
.creator-accounts-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line, rgb(12 31 42 / 15%)); }
.creator-accounts-panel__head p { margin: 0 0 4px; color: var(--gold, #b48625); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.creator-accounts-panel__head h2 { margin: 0; font-size: 24px; }
.creator-accounts-panel__head button { width: 34px; height: 34px; border: 0; color: inherit; background: transparent; font-size: 26px; cursor: pointer; }
.creator-accounts-panel__lead { max-width: 750px; margin: 16px 0; color: var(--muted, #627078); line-height: 1.5; }
.creator-account-create { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 10px; align-items: end; padding: 14px; border: 1px solid var(--line, rgb(12 31 42 / 15%)); border-radius: 6px; background: color-mix(in srgb, var(--glass, #fff), transparent 14%); }
.creator-account-create input { color: var(--ink, #172028); background: rgb(255 255 255 / 70%); }
.creator-account-create button { padding: 0 16px; white-space: nowrap; }
.creator-accounts-panel__error { margin: 12px 0 0; color: #b33232; font-weight: 700; }
.access-scope-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.access-scope-switch button { display: grid; gap: 5px; min-height: 78px; padding: 13px 14px; border: 1px solid var(--line, rgb(12 31 42 / 16%)); border-radius: 6px; color: var(--ink, #172028); background: rgb(255 255 255 / 42%); text-align: left; cursor: pointer; }
.access-scope-switch button:hover { border-color: color-mix(in srgb, var(--gold, #b48625) 48%, transparent); }
.access-scope-switch button.is-active { border-color: var(--gold, #b48625); background: color-mix(in srgb, var(--gold, #b48625) 11%, white); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold, #b48625) 25%, transparent); }
.access-scope-switch strong { font-size: 14px; }
.access-scope-switch span { color: var(--muted, #627078); font-size: 12px; line-height: 1.4; }
.access-scope-panel { display: grid; gap: 14px; }
.access-scope-panel__intro { padding: 13px 14px; border-left: 3px solid var(--gold, #b48625); background: color-mix(in srgb, var(--gold, #b48625) 7%, transparent); }
.access-scope-panel__intro strong { display: block; font-size: 14px; }
.access-scope-panel__intro p { margin: 5px 0 0; color: var(--muted, #627078); font-size: 13px; line-height: 1.5; }
.access-list-title { margin: 6px 0 -5px; font-size: 16px; }
.project-access-create { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; padding: 14px; border: 1px solid var(--line, rgb(12 31 42 / 15%)); border-radius: 6px; background: color-mix(in srgb, var(--glass, #fff), transparent 14%); }
.project-access-create label { display: grid; gap: 6px; min-width: 0; color: var(--ink, #172028); font-size: 13px; font-weight: 700; }
.project-access-create__site { grid-column: 1 / -1; }
.project-access-create input,
.project-access-create select { width: 100%; min-width: 0; min-height: 42px; padding: 0 11px; border: 1px solid var(--line, rgb(12 31 42 / 18%)); border-radius: 5px; color: var(--ink, #172028); background: rgb(255 255 255 / 82%); }
.project-access-create > button { min-height: 42px; padding: 0 14px; border: 0; border-radius: 5px; color: #162129; background: #e8bb5b; font-weight: 800; cursor: pointer; }
.project-access-list { display: grid; gap: 10px; }
.project-access-card { display: grid; gap: 11px; padding: 14px; border: 1px solid var(--line, rgb(12 31 42 / 15%)); border-radius: 6px; background: rgb(255 255 255 / 42%); }
.project-access-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.project-access-card > header strong,
.project-access-card > header small { display: block; }
.project-access-card > header small { margin-top: 4px; color: var(--muted, #627078); font-size: 12px; }
.project-access-card button { min-height: 34px; padding: 0 10px; border: 1px solid var(--line, rgb(12 31 42 / 18%)); border-radius: 4px; color: var(--ink, #172028); background: transparent; font-weight: 700; cursor: pointer; }
.project-access-card button.is-danger { color: #b33232; border-color: rgb(179 50 50 / 35%); }
.project-access-members { display: grid; gap: 7px; }
.project-access-members > p { margin: 0; padding: 10px 0; color: var(--muted, #627078); font-size: 13px; }
.project-access-member { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 9px; border-top: 1px solid rgb(12 31 42 / 9%); }
.project-access-member strong,
.project-access-member small { display: block; }
.project-access-member small { margin-top: 3px; color: var(--muted, #627078); font-size: 12px; }
.creator-accounts-list { display: grid; gap: 10px; margin-top: 16px; }
.creator-accounts-list__empty { margin: 0; padding: 18px; color: var(--muted, #627078); border: 1px dashed var(--line, rgb(12 31 42 / 18%)); border-radius: 6px; text-align: center; }
.creator-account-card { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(220px, 1fr) auto; gap: 14px; align-items: center; padding: 14px; border: 1px solid var(--line, rgb(12 31 42 / 15%)); border-radius: 6px; background: rgb(255 255 255 / 42%); }
.creator-account-card.is-blocked { opacity: .72; filter: grayscale(.45); }
.creator-account-card strong, .creator-account-card small { display: block; }
.creator-account-card small { margin-top: 4px; color: var(--muted, #627078); }
.creator-account-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.creator-account-card dt { color: var(--muted, #627078); font-size: 11px; }
.creator-account-card dd { margin: 3px 0 0; font-size: 12px; font-weight: 700; }
.creator-account-card__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.creator-account-card__actions button,
.creator-accounts-back { min-height: 34px; padding: 0 10px; border: 1px solid var(--line, rgb(12 31 42 / 18%)); border-radius: 4px; color: var(--ink, #172028); background: transparent; font-weight: 700; cursor: pointer; }
.creator-account-card__actions button.is-danger { color: #b33232; border-color: rgb(179 50 50 / 35%); }
.creator-accounts-back { margin-top: 14px; }
.creator-accounts-audit { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line, rgb(12 31 42 / 15%)); }
.creator-accounts-audit h3 { margin: 0 0 10px; font-size: 16px; }
.creator-accounts-audit ol { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.creator-accounts-audit li { display: grid; gap: 2px; padding: 9px 0; border-bottom: 1px solid rgb(12 31 42 / 9%); }
.creator-accounts-audit li span { color: var(--muted, #627078); font-size: 12px; }

@media (max-width: 760px) {
  .access-scope-switch,
  .project-access-create { grid-template-columns: 1fr; }
  .project-access-create__site { grid-column: auto; }
  .project-access-card > header,
  .project-access-member { align-items: flex-start; flex-direction: column; }
  .creator-account-create { grid-template-columns: 1fr; }
  .creator-account-card { grid-template-columns: 1fr; }
  .creator-account-card__actions { justify-content: flex-start; }
  .creator-accounts-modal { padding: 54px 10px 20px; }
  .creator-accounts-panel { padding: 16px; }
}

body:has(.builder-editor-bar):has(.page-layout-toolbar.is-editing) .builder-editor-bar__history {
  display: none;
}

body:has(.builder-editor-bar) .builder-editor-bar > .page-layout-toolbar.is-editing {
  position: relative;
  z-index: 1;
  top: auto !important;
  right: auto;
  bottom: auto;
  left: auto;
  display: block;
  flex: 1 0 100%;
  width: 100%;
  max-width: none;
  margin: 3px 0 0;
  padding: 6px 0 0;
  border: 0;
  border-top: 1px solid rgb(18 28 34 / 12%);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transform: none;
}

body:has(.builder-editor-bar) .page-layout-toolbar.is-editing .page-layout-toolbar__top {
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 0 2px 2px;
  scrollbar-width: thin;
}

body:has(.builder-editor-bar) .page-layout-toolbar.is-editing .page-layout-toolbar__popover {
  position: fixed;
  z-index: 420;
  top: 116px;
  left: clamp(12px, 3vw, 56px);
  width: min(520px, calc(100vw - 24px));
  max-height: calc(100dvh - 132px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

body:has(.builder-editor-bar) .page-layout-toolbar__popover .page-layout-toolbar__theme-row {
  grid-column: 1 / -1;
  align-items: flex-start;
  min-height: 0;
  padding: 3px;
  border-bottom: 0;
}

body:has(.builder-editor-bar):has(.page-layout-toolbar.is-editing) #root {
  padding-top: 116px !important;
}

body:has(.builder-editor-bar):has(.page-layout-toolbar.is-editing) .kiosk-app {
  height: calc(100dvh - 116px) !important;
  margin-top: 0 !important;
}

body:has(.builder-editor-bar):has(.page-layout-toolbar.is-editing) .blank-builder-canvas {
  min-height: calc(100dvh - 116px) !important;
}

/* The blank canvas stays empty, but must not paint over selected visual
   layers. Grid lines remain available whenever the grid is enabled. */
.screen-layer.has-page-layout-visual-background .blank-builder-canvas,
.screen-layer.has-page-layout-visual-background.page-layout-grid-hidden .blank-builder-canvas {
  background-color: transparent;
}

@media (max-width: 680px) {
  body:has(.builder-editor-bar) .page-layout-toolbar.is-editing {
    top: 52px !important;
    padding-inline: 8px;
  }

  body:has(.builder-editor-bar) .builder-editor-bar > .page-layout-toolbar.is-editing {
    margin-top: 2px;
    padding-top: 5px;
  }

  body:has(.builder-editor-bar) .page-layout-toolbar.is-editing .page-layout-toolbar__top {
    overflow-x: auto;
  }

  body:has(.builder-editor-bar):has(.page-layout-toolbar.is-editing) #root {
    padding-top: 108px !important;
  }

  body:has(.builder-editor-bar):has(.page-layout-toolbar.is-editing) .kiosk-app {
    height: calc(100dvh - 108px) !important;
  }

  body:has(.builder-editor-bar):has(.page-layout-toolbar.is-editing) .blank-builder-canvas {
    min-height: calc(100dvh - 108px) !important;
  }
}

/* Desktop pages may also contain more content than one kiosk viewport. Keep
   the main content scrollable, while the full editor scrolls its whole canvas. */
@media (min-width: 821px) {
  .screen-layer--enter:not(.page-layout-editor-active) .screen-content {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: color-mix(in srgb, var(--gold) 62%, transparent) transparent;
    scrollbar-width: thin;
  }

  .screen-layer--enter:not(.page-layout-editor-active):has(> .page-layout-free-canvas) {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: color-mix(in srgb, var(--gold) 62%, transparent) transparent;
    scrollbar-width: thin;
  }
}

/* The existing reception image is the start screen's full-bleed hero media. */
.splash-screen {
  grid-template-columns: minmax(0, 1fr);
}

.splash-screen__content {
  z-index: 3;
  width: min(720px, 100%);
}

.splash-screen > .tooth-backdrop {
  display: none;
}

.splash-card--photo {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.splash-card--photo .hero-photo {
  position: absolute;
  inset: 0;
  border-radius: 0;
  background: #192229;
}

.splash-card--photo .hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  filter: saturate(0.92) contrast(1.04);
}

.splash-card--photo::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, rgba(8, 15, 20, 0.84) 0%, rgba(8, 15, 20, 0.67) 46%, rgba(8, 15, 20, 0.2) 78%, rgba(8, 15, 20, 0.1) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--aurora-2) 18%, transparent), rgba(7, 12, 16, 0.2));
  pointer-events: none;
}

.splash-card--photo .stat-row {
  position: absolute;
  z-index: 2;
  right: clamp(30px, 5vw, 72px);
  bottom: clamp(30px, 5vw, 64px);
  width: min(500px, 40vw);
  margin: 0;
}

.splash-card--photo .stat-row div {
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(10, 17, 22, 0.56);
  color: #fff;
  box-shadow: 0 18px 48px rgba(3, 9, 13, 0.24);
  backdrop-filter: blur(18px);
}

.splash-card--photo .stat-row span {
  color: rgba(255, 255, 255, 0.78);
}

.splash-screen__content h1,
.splash-screen__content .eyebrow,
.splash-screen__content .splash-lead {
  color: #fff;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
}

.splash-screen__content .feature-strip > span {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(8, 15, 20, 0.46);
  color: rgba(255, 255, 255, 0.92);
}

@media (max-width: 1180px) {
  .splash-card--photo {
    display: block;
  }
}

@media (max-width: 820px) {
  .splash-screen {
    min-height: 100dvh;
  }

  .splash-card--photo .hero-photo img {
    object-position: 52% center;
  }

  .splash-card--photo::after {
    background:
      linear-gradient(90deg, rgba(8, 15, 20, 0.78), rgba(8, 15, 20, 0.48)),
      linear-gradient(180deg, rgba(8, 15, 20, 0.2), rgba(8, 15, 20, 0.52));
  }

  .splash-card--photo .stat-row {
    display: none;
  }

  .doctors-screen .screen-subtitle,
  .documents-screen .screen-subtitle {
    display: none;
  }

  .screen-layer--enter:has(.doctors-screen),
  .screen-layer--enter:has(.services-screen),
  .screen-layer--enter:has(.documents-screen) {
    scroll-snap-type: y proximity;
    scroll-padding-top: 18px;
  }

  .screen-layer--enter .doctors-screen .doctors-grid--team,
  .screen-layer--enter .services-screen .services-grid--four,
  .screen-layer--enter .documents-screen .documents-hub-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  .screen-layer--enter .doctors-screen .doctors-grid--team {
    grid-auto-rows: minmax(clamp(440px, 68dvh, 620px), auto);
    gap: 18px;
  }

  .screen-layer--enter .doctors-screen .doctor-card {
    grid-template-rows: minmax(320px, 1fr) auto;
    min-height: clamp(440px, 68dvh, 620px);
    padding: 14px;
    border-radius: 28px;
    scroll-snap-align: start;
  }

  .screen-layer--enter .doctors-screen .doctor-card__body {
    min-height: 88px;
    padding: 8px 8px 10px;
  }

  .screen-layer--enter .doctors-screen .doctor-card__body small {
    display: block;
    font-size: clamp(0.82rem, 3.5vw, 0.98rem);
    line-height: 1.22;
  }

  .screen-layer--enter .doctors-screen .doctor-card__body strong {
    margin-top: 7px;
    font-size: clamp(1.16rem, 5vw, 1.5rem);
    line-height: 1.08;
  }

  .screen-layer--enter .services-screen .services-grid--four {
    grid-auto-rows: minmax(clamp(470px, 68dvh, 620px), auto);
    gap: 18px;
  }

  .screen-layer--enter .services-screen .service-panel {
    min-height: clamp(470px, 68dvh, 620px);
    padding: 20px;
    gap: 12px;
    border-radius: 26px;
    scroll-snap-align: start;
  }

  .screen-layer--enter .services-screen .service-panel h2 {
    font-size: clamp(1.28rem, 5.4vw, 1.65rem);
  }

  .screen-layer--enter .services-screen .service-row {
    display: flex;
    min-height: 112px;
    padding: 15px;
  }

  .screen-layer--enter .services-screen .service-row strong,
  .screen-layer--enter .services-screen .service-row em {
    overflow: visible;
    font-size: clamp(0.94rem, 3.8vw, 1.08rem);
    line-height: 1.18;
    text-overflow: clip;
    white-space: normal;
  }

  .screen-layer--enter .services-screen .service-row small {
    display: block;
    font-size: 0.78rem;
  }

  .screen-layer--enter .documents-screen .documents-hub-grid {
    grid-auto-rows: minmax(clamp(400px, 58dvh, 540px), auto);
    gap: 18px;
  }

  .screen-layer--enter .documents-screen .documents-hub-card {
    min-height: clamp(400px, 58dvh, 540px);
    padding: 24px;
    gap: 12px;
    border-radius: 28px;
    scroll-snap-align: start;
  }

  .screen-layer--enter .documents-screen .documents-hub-card::before {
    display: block;
    inset: 24px 24px auto;
    height: 54%;
  }

  .screen-layer--enter .documents-screen .documents-hub-card__visual {
    position: absolute;
    right: 28px;
    top: 28px;
    width: 58px;
    height: 58px;
    min-height: 58px;
  }

  .screen-layer--enter .documents-screen .documents-hub-card strong {
    font-size: clamp(1.45rem, 6vw, 1.9rem);
  }

  .screen-layer--enter .documents-screen .documents-hub-card small {
    font-size: clamp(0.88rem, 3.6vw, 1.04rem);
    line-height: 1.24;
  }

  .screen-layer--enter .documents-screen .documents-hub-card:not(.documents-hub-card--has-image) strong {
    color: #11171b;
    text-shadow: 0 1px 12px rgba(255, 255, 255, 0.72);
  }

  .screen-layer--enter .documents-screen .documents-hub-card:not(.documents-hub-card--has-image) small {
    color: #4f5f67;
    text-shadow: 0 1px 10px rgba(255, 255, 255, 0.66);
  }

  .screen-layer--enter .works-screen .work-carousel,
  .screen-layer--enter .works-screen .work-slide {
    min-height: clamp(500px, 72dvh, 720px);
  }

  .screen-layer--enter .works-screen .work-slide__photo {
    min-height: clamp(430px, 64dvh, 650px);
    background: rgba(7, 12, 16, 0.9);
  }

  .screen-layer--enter .works-screen .work-slide__photo img,
  .screen-layer--enter .works-screen .work-slide__photo video {
    object-fit: contain;
  }
}

@media (max-width: 430px) {
  .splash-screen {
    align-content: center;
    padding: max(88px, env(safe-area-inset-top)) 28px max(76px, env(safe-area-inset-bottom));
  }

  .splash-screen__content {
    width: 100%;
  }

  .splash-screen__content .feature-strip {
    max-width: 100%;
  }

  .screen-layer--enter .doctors-screen .doctor-card {
    grid-template-rows: minmax(300px, 1fr) auto;
  }
}

/* Google-Sites-style local building blocks. All are local project data and do
   not depend on a Google account, Drive, or third-party editor. */
.layout-custom-card--accordion,
.layout-custom-card--table,
.layout-custom-card--columns,
.layout-custom-card--contentLayout,
.layout-custom-card--mediaGrid,
.layout-custom-card--button,
.layout-custom-card--placeholder,
.layout-custom-card--embed,
.layout-custom-card--social,
.layout-custom-card--toc,
.layout-custom-card--form,
.layout-custom-card--spacer {
  position: relative;
  isolation: isolate;
  overflow: auto;
}

.layout-custom-card:not(.menu-tile) {
  position: relative;
}

.site-block-accordion,
.site-block-table-wrap,
.site-block-columns,
.site-block-social,
.site-block-toc,
.site-block-form {
  width: 100%;
  min-width: 0;
}

.site-block-accordion {
  display: grid;
  gap: 8px;
}

.site-block-accordion details {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--card-border) 76%, transparent);
  border-radius: calc(10px * var(--site-radius));
  background: color-mix(in srgb, var(--glass) 66%, transparent);
}

.site-block-accordion summary {
  padding: 11px 13px;
  cursor: pointer;
  color: var(--heading);
  font-weight: 760;
  overflow-wrap: anywhere;
}

.site-block-accordion p {
  margin: 0;
  padding: 0 13px 13px;
  color: var(--muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.site-block-table-wrap {
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--card-border) 78%, transparent);
  border-radius: calc(10px * var(--site-radius));
}

.site-block-table {
  width: 100%;
  min-width: 360px;
  border-collapse: collapse;
  color: var(--heading);
  font-size: 0.82rem;
}

.site-block-table th,
.site-block-table td {
  padding: 10px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--card-border) 62%, transparent);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.site-block-table th {
  background: color-mix(in srgb, var(--gold) 14%, var(--glass-strong));
  font-weight: 820;
}

.site-block-table tr:last-child td {
  border-bottom: 0;
}

.site-block-columns {
  display: grid;
  grid-template-columns: repeat(var(--site-block-columns, 3), minmax(0, 1fr));
  gap: 10px;
}

.site-block-columns--2 { --site-block-columns: 2; }
.site-block-columns--3 { --site-block-columns: 3; }
.site-block-columns--4 { --site-block-columns: 4; }

.site-block-columns > div {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
}

.site-block-columns section {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--card-border) 74%, transparent);
  border-radius: calc(10px * var(--site-radius));
  background: color-mix(in srgb, var(--glass) 68%, transparent);
}

.site-block-columns strong {
  color: var(--heading);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.site-block-columns span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.site-block-content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--card-border) 76%, transparent);
  border-radius: calc(11px * var(--site-radius));
}

.site-block-content-layout--media-right .site-block-content-layout__media {
  order: 2;
}

.site-block-content-layout__media {
  min-height: 180px;
  background: color-mix(in srgb, var(--glass) 66%, transparent);
}

.site-block-content-layout__media img,
.site-block-content-layout__media .layout-custom-card__media-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 180px;
  max-height: none;
  border-radius: 0;
  object-fit: var(--site-block-media-fit, cover);
  object-position: var(--site-block-media-position, center);
}

.site-block-content-layout__copy {
  display: grid;
  align-content: center;
  gap: 12px;
  min-width: 0;
  padding: 18px;
}

.site-block-media-grid {
  display: grid;
  grid-template-columns: repeat(var(--site-block-grid-columns, 3), minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.site-block-media-grid--2 { --site-block-grid-columns: 2; }
.site-block-media-grid--3 { --site-block-grid-columns: 3; }
.site-block-media-grid--4 { --site-block-grid-columns: 4; }

.site-block-media-grid img,
.site-block-media-grid video {
  display: block;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1 / 1;
  border: 1px solid color-mix(in srgb, var(--card-border) 70%, transparent);
  border-radius: calc(8px * var(--site-radius));
  object-fit: cover;
}

.site-block-media-grid__placeholder {
  display: grid;
  min-height: 150px;
  grid-column: 1 / -1;
  place-items: center;
  border: 1px dashed color-mix(in srgb, var(--gold) 54%, transparent);
  border-radius: calc(10px * var(--site-radius));
  color: var(--muted);
  font-size: 0.78rem;
  text-align: center;
}

.layout-custom-card--button {
  place-items: start;
  align-content: center;
}

.site-block-button {
  display: inline-flex;
  min-height: 42px;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--gold) 72%, transparent);
  border-radius: calc(9px * var(--site-radius));
  background: color-mix(in srgb, var(--gold) 20%, var(--glass-strong));
  color: var(--heading);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 860;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.site-block-button.is-disabled {
  opacity: 0.58;
}

.site-block-button__hint {
  color: var(--muted);
  font-size: 0.76rem;
  overflow-wrap: anywhere;
}

.layout-custom-card--placeholder {
  place-items: center;
  align-content: center;
  border-style: dashed;
}

.layout-custom-card--placeholder .site-block-text-surface {
  text-align: center;
}

.site-block-placeholder {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px dashed color-mix(in srgb, var(--gold) 62%, transparent);
  border-radius: 50%;
  color: var(--gold);
  font-size: 1.25rem;
}

.site-block-embed {
  display: block;
  width: 100%;
  min-height: 160px;
  border: 1px solid color-mix(in srgb, var(--card-border) 80%, transparent);
  border-radius: calc(10px * var(--site-radius));
  background: color-mix(in srgb, var(--glass) 66%, transparent);
}

.site-block-embed__placeholder,
.site-block-spacer {
  display: grid;
  width: 100%;
  place-items: center;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
  text-align: center;
  overflow-wrap: anywhere;
}

.site-block-embed__placeholder {
  min-height: 160px;
  padding: 16px;
  border: 1px dashed color-mix(in srgb, var(--gold) 54%, transparent);
  border-radius: calc(10px * var(--site-radius));
}

.site-block-social,
.site-block-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.site-block-social a,
.site-block-toc a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  max-width: 100%;
  padding: 0 11px;
  border: 1px solid color-mix(in srgb, var(--gold) 44%, transparent);
  border-radius: calc(8px * var(--site-radius));
  color: var(--heading);
  font-size: 0.78rem;
  font-weight: 760;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.site-block-social a:hover,
.site-block-toc a:hover {
  border-color: var(--gold);
  box-shadow: 0 0 22px color-mix(in srgb, var(--theme-glow) 28%, transparent);
}

.site-block-form {
  display: grid;
  gap: 10px;
}

.site-block-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 760;
}

.site-block-form input,
.site-block-form textarea {
  width: 100%;
  min-height: 38px;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--card-border) 82%, transparent);
  border-radius: calc(8px * var(--site-radius));
  background: color-mix(in srgb, var(--glass-strong) 78%, transparent);
  color: var(--heading);
  font: inherit;
}

.site-block-form textarea {
  min-height: 92px;
  resize: vertical;
}

.site-block-form button {
  justify-self: start;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--gold) 64%, transparent);
  border-radius: calc(8px * var(--site-radius));
  background: color-mix(in srgb, var(--gold) 18%, var(--glass-strong));
  color: var(--heading);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 820;
}

.site-block-form small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.site-block-anchor {
  position: absolute;
  z-index: 3;
  top: 8px;
  right: 8px;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--gold) 48%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--glass-strong) 86%, transparent);
  color: var(--gold);
  font-size: 0.9rem;
  font-weight: 900;
  text-decoration: none;
}

.site-presentation-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.site-presentation-form > label,
.site-presentation-form__announcement > label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 760;
}

.site-presentation-form input,
.site-presentation-form select {
  width: 100%;
  min-height: 36px;
  box-sizing: border-box;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--card-border) 74%, transparent);
  border-radius: calc(8px * var(--site-radius));
  background: color-mix(in srgb, var(--glass) 72%, transparent);
  color: var(--heading);
  font: inherit;
}

.site-presentation-form small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
}

.site-presentation-form__check {
  display: flex !important;
  align-items: center;
  gap: 7px;
}

.site-presentation-form__check input {
  width: auto;
  min-height: auto;
}

.site-presentation-form__announcement {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--card-border) 70%, transparent);
  border-radius: calc(10px * var(--site-radius));
}

.site-presentation-form__announcement legend {
  padding: 0 5px;
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 820;
}

.site-presentation-form > button {
  grid-column: 1 / -1;
  justify-self: start;
}

.builder-site-announcement {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 38px;
  padding: 7px 16px;
  background: var(--builder-announcement, #f2f2f2);
  color: #111820;
  font-size: 0.78rem;
  font-weight: 740;
  text-align: center;
}

.builder-site-announcement span {
  overflow-wrap: anywhere;
}

.builder-site-announcement a {
  color: inherit;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.builder-site-chrome {
  position: relative;
  z-index: 16;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 12px clamp(16px, 4vw, 48px);
  border-bottom: 1px solid color-mix(in srgb, var(--card-border) 70%, transparent);
  color: var(--heading);
}

.builder-site-chrome--white {
  background: rgba(255, 255, 255, 0.92);
  color: #111820;
}

.builder-site-chrome--black {
  background: rgba(10, 14, 18, 0.94);
  color: #fff;
}

.builder-site-chrome--black .builder-site-chrome__brand,
.builder-site-chrome--black .builder-site-chrome__nav button,
.builder-site-chrome--black .builder-site-chrome__updated {
  color: inherit;
}

.builder-site-chrome__brand,
.builder-site-chrome__nav button {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

.builder-site-chrome__brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 0;
  font-size: 0.94rem;
  font-weight: 900;
  text-align: left;
}

.builder-site-chrome__brand img {
  display: block;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 5px;
  object-fit: contain;
}

.builder-site-chrome__brand span,
.builder-site-chrome__updated {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.builder-site-chrome__nav {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 4px;
}

.builder-site-chrome__nav button {
  min-height: 32px;
  padding: 0 8px;
  border-radius: 5px;
  font-size: 0.78rem;
  font-weight: 730;
}

.builder-site-chrome__nav button:hover {
  background: color-mix(in srgb, currentColor 11%, transparent);
}

.builder-site-chrome__updated {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 680;
}

.builder-site-chrome--side {
  position: absolute;
  top: 14px;
  left: 14px;
  width: min(230px, 26vw);
  min-height: 0;
  align-items: stretch;
  flex-direction: column;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--card-border) 76%, transparent);
  border-radius: calc(12px * var(--site-radius));
  background: color-mix(in srgb, var(--glass-strong) 86%, transparent);
  box-shadow: 0 16px 44px color-mix(in srgb, var(--theme-glow) 18%, transparent);
}

.builder-site-chrome--side .builder-site-chrome__nav {
  align-items: stretch;
  flex-direction: column;
  flex-wrap: nowrap;
}

.builder-site-chrome--side .builder-site-chrome__nav button {
  width: 100%;
  text-align: left;
}

html[data-site-navigation="side"] .blank-builder-canvas__content {
  padding-left: min(270px, 29vw);
}

@media (max-width: 720px) {
  .site-block-columns {
    grid-template-columns: 1fr;
  }

  .site-block-content-layout {
    grid-template-columns: 1fr;
  }

  .site-block-content-layout--media-right .site-block-content-layout__media {
    order: 0;
  }

  .site-block-media-grid--4 {
    --site-block-grid-columns: 2;
  }

  .site-block-media-grid--3 {
    --site-block-grid-columns: 2;
  }

  .site-presentation-form,
  .site-presentation-form__announcement {
    grid-template-columns: 1fr;
  }

  .builder-site-chrome {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px 12px;
    min-height: 0;
    padding: 10px 14px;
  }

  .builder-site-chrome__nav {
    order: 3;
    width: 100%;
    flex: 0 0 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .builder-site-chrome__nav button {
    flex: 0 0 auto;
  }

  .builder-site-chrome__updated {
    margin-left: auto;
  }

  .builder-site-chrome--side {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    margin: 10px;
  }

  .builder-site-chrome--side .builder-site-chrome__nav {
    flex-direction: row;
  }

  html[data-site-navigation="side"] .blank-builder-canvas__content {
    padding-left: 0;
  }

  .builder-site-announcement {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    text-align: left;
  }
}

/* Local-only publisher controls. They are mounted only for an authenticated admin. */
.publisher-modal {
  position: fixed;
  z-index: 145;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(12px, 2.5vw, 32px);
  background: rgba(14, 26, 36, 0.42);
  backdrop-filter: blur(12px);
}

.publisher-panel {
  width: min(1180px, 100%);
  max-height: min(92dvh, 920px);
  overflow: auto;
  padding: clamp(18px, 3vw, 34px);
  border: 1px solid color-mix(in srgb, var(--text, #101820) 16%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface, #f7fbfd) 92%, white);
  box-shadow: 0 28px 80px rgba(4, 14, 24, 0.28);
  color: var(--text, #101820);
}

.publisher-panel__head,
.publisher-section__head,
.publisher-profile,
.publisher-action-row,
.publisher-terminal__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.publisher-panel__head,
.publisher-section__head { justify-content: space-between; }

.publisher-panel__head {
  position: sticky;
  z-index: 8;
  top: calc(clamp(18px, 3vw, 34px) * -1);
  margin: calc(clamp(18px, 3vw, 34px) * -1) calc(clamp(18px, 3vw, 34px) * -1) 16px;
  padding: clamp(14px, 2vw, 22px) clamp(18px, 3vw, 34px);
  border-bottom: 1px solid color-mix(in srgb, var(--text, #101820) 12%, transparent);
  background: color-mix(in srgb, var(--surface, #f7fbfd) 94%, white);
  box-shadow: 0 10px 24px rgba(4, 14, 24, 0.08);
}

.publisher-panel__close {
  flex: 0 0 auto;
  width: 42px !important;
  min-height: 42px !important;
  border: 1px solid color-mix(in srgb, var(--text, #101820) 22%, transparent) !important;
  border-radius: 50% !important;
  background: color-mix(in srgb, var(--surface, #f7fbfd) 82%, white) !important;
  color: var(--text, #101820) !important;
  font-size: 1.65rem !important;
  line-height: 1 !important;
  box-shadow: 0 8px 22px rgba(4, 14, 24, 0.14);
}

.publisher-panel__head h2,
.publisher-section__head h3,
.publisher-profile h4,
.publisher-profile p,
.publisher-panel__notice,
.publisher-panel__hint,
.publisher-panel__error,
.publisher-empty,
.publisher-terminal__empty { margin: 0; }

.publisher-panel__notice,
.publisher-panel__hint,
.publisher-empty,
.publisher-terminal__empty {
  margin-top: 10px;
  color: color-mix(in srgb, var(--muted, #60717d) 88%, var(--text, #101820));
  line-height: 1.45;
}

.publisher-panel__error {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(175, 35, 49, 0.12);
  color: #982432;
}

.publisher-readiness {
  margin-top: 14px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--gold, #bd9443) 30%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--gold, #bd9443) 7%, var(--surface, #f7fbfd));
}

.publisher-readiness > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.publisher-readiness header div {
  display: grid;
  gap: 2px;
}

.publisher-readiness header span,
.publisher-readiness p {
  color: color-mix(in srgb, var(--muted, #60717d) 88%, var(--text, #101820));
  font-size: 0.74rem;
}

.publisher-readiness header strong { font-size: 0.86rem; }

.publisher-readiness output {
  display: grid;
  min-width: 46px;
  min-height: 32px;
  place-items: center;
  border-radius: 7px;
  background: color-mix(in srgb, var(--gold, #bd9443) 18%, white);
  color: var(--text, #101820);
  font-size: 0.78rem;
  font-weight: 760;
}

.publisher-readiness ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 12px 0 0;
  padding: 0;
  gap: 6px;
  list-style: none;
}

.publisher-readiness li {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px;
  border-left: 3px solid #6a9db9;
  border-radius: 5px;
  background: color-mix(in srgb, var(--surface, #f7fbfd) 82%, transparent);
}

.publisher-readiness li[data-level="ready"] { border-left-color: #4aa376; }
.publisher-readiness li[data-level="warning"] { border-left-color: #c9903f; }

.publisher-readiness li strong { font-size: 0.69rem; }
.publisher-readiness li span { color: var(--muted, #60717d); font-size: 0.65rem; line-height: 1.35; }
.publisher-readiness p { margin: 10px 0 0; line-height: 1.4; }

.publisher-layout {
  display: grid;
  grid-template-columns: minmax(270px, 0.8fr) minmax(0, 1.4fr);
  gap: 16px;
  margin-top: 18px;
}

.publisher-section {
  min-width: 0;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--text, #101820) 12%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface, #f7fbfd) 76%, transparent);
}

.publisher-profiles {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.publisher-profile {
  justify-content: space-between;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--text, #101820) 10%, transparent);
  border-radius: 10px;
}

.publisher-profile.is-active {
  border-color: color-mix(in srgb, var(--gold, #bd9443) 74%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold, #bd9443) 38%, transparent);
}

.publisher-profile > button:first-child {
  min-width: 0;
  flex: 1;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.publisher-profile h4,
.publisher-profile p,
.publisher-terminal,
.publisher-field-grid input,
.publisher-field-grid select { overflow-wrap: anywhere; }

.publisher-profile p {
  margin-top: 3px;
  color: var(--muted, #60717d);
  font-size: 0.8rem;
}

.publisher-profile__delete,
.publisher-terminal__actions button,
.publisher-action-row button,
.publisher-profile-form__submit {
  border: 1px solid color-mix(in srgb, var(--text, #101820) 16%, transparent);
  border-radius: 9px;
  padding: 9px 11px;
  background: color-mix(in srgb, var(--surface, #f7fbfd) 82%, white);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.publisher-profile__delete { flex: 0 0 auto; color: #a72032; }

.publisher-profile-form {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.publisher-profile-form__help,
.publisher-profile-form__notice {
  margin: 0;
  color: var(--muted, #60717d);
  font-size: 0.82rem;
  line-height: 1.45;
}

.publisher-profile-form__notice {
  padding: 10px 12px;
  border-left: 3px solid var(--gold, #bd9443);
  border-radius: 8px;
  background: color-mix(in srgb, var(--gold, #bd9443) 10%, transparent);
}

.publisher-profile-form__facts {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 10px 12px 10px 28px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--text, #101820) 5%, transparent);
  color: var(--muted, #60717d);
  font-size: 0.78rem;
  line-height: 1.4;
}

.publisher-profile-form__facts strong,
.publisher-profile-form__facts code {
  color: var(--text, #101820);
}

.publisher-profile-form__facts code {
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.75rem;
}

.publisher-profile-form > label {
  display: grid;
  min-width: 0;
  gap: 5px;
  color: var(--muted, #60717d);
  font-size: 0.78rem;
}

.publisher-profile-form > label > input,
.publisher-profile-form > label > select,
.publisher-credentials label > input,
.publisher-credentials label > textarea {
  min-width: 0;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--text, #101820) 16%, transparent);
  border-radius: 8px;
  padding: 0 9px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--text, #101820);
  font: inherit;
}

.publisher-credentials {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--gold, #bd9443) 38%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--gold, #bd9443) 7%, transparent);
}

.publisher-credentials label {
  display: grid;
  min-width: 0;
  gap: 5px;
  color: var(--muted, #60717d);
  font-size: 0.78rem;
}

.publisher-credentials label > textarea {
  min-height: 106px;
  height: auto;
  padding: 9px;
  resize: vertical;
  line-height: 1.35;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.74rem;
}

.publisher-credentials__note {
  margin: 0;
  color: var(--muted, #60717d);
  font-size: 0.76rem;
  line-height: 1.45;
}

.publisher-credentials__memory {
  margin: 0;
  color: var(--text, #101820);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.publisher-credentials__note strong,
.publisher-credentials__note code {
  color: var(--text, #101820);
}

.publisher-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.publisher-field-grid label {
  display: grid;
  min-width: 0;
  gap: 5px;
  color: var(--muted, #60717d);
  font-size: 0.78rem;
}

.publisher-field-grid input,
.publisher-field-grid select {
  min-width: 0;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--text, #101820) 16%, transparent);
  border-radius: 8px;
  padding: 0 9px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--text, #101820);
  font: inherit;
}

.publisher-preflight {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.publisher-preflight__item {
  min-width: 0;
  padding: 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--text, #101820) 5%, transparent);
}

.publisher-preflight__item strong,
.publisher-preflight__item span { display: block; overflow-wrap: anywhere; }

.publisher-preflight__item span {
  margin-top: 3px;
  color: var(--muted, #60717d);
  font-size: 0.82rem;
}

.publisher-project-choice {
  margin-top: 16px;
  padding: 10px;
  border-left: 3px solid var(--gold, #bd9443);
  background: color-mix(in srgb, var(--gold, #bd9443) 8%, transparent);
}

.publisher-action-row { flex-wrap: wrap; margin-top: 16px; }
.publisher-dry-run { border-color: color-mix(in srgb, var(--gold, #bd9443) 70%, transparent) !important; }

.publisher-live-action[disabled],
.publisher-action-row button[disabled],
.publisher-terminal__actions button[disabled],
.publisher-profile-form__submit[disabled] { opacity: 0.48; cursor: not-allowed; }

.publisher-terminal {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 230px;
  margin-top: 12px;
  padding: 14px;
  border-radius: 12px;
  background: #0d161d;
  color: #d9ebef;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.8rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-x: hidden;
}

.publisher-terminal > pre {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.publisher-terminal__status { color: #f2c96d; }
.publisher-terminal__plan { margin: 14px 0 0; color: #b4d9c1; white-space: pre-wrap; }
.publisher-terminal__actions { flex-wrap: wrap; margin-top: 12px; }

.publisher-terminal__actions button {
  border-color: rgba(242, 201, 109, 0.82);
  background: #17313a;
  color: #fff7d8;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}

.publisher-terminal__open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.45rem;
  padding: 0.52rem 0.8rem;
  border: 1px solid rgba(230, 191, 99, 0.68);
  border-radius: 0.65rem;
  color: #fff4cc;
  background: rgba(24, 53, 63, 0.92);
  font: inherit;
  text-decoration: none;
}

.publisher-terminal__open:hover,
.publisher-terminal__open:focus-visible {
  background: rgba(42, 85, 95, 0.98);
  outline: none;
}

.publisher-terminal__actions button:not([disabled]):hover,
.publisher-terminal__actions button:not([disabled]):focus-visible {
  border-color: #ffdc7c;
  background: #24505b;
  color: #ffffff;
  outline: none;
}

.publisher-terminal__actions button[disabled] {
  border-color: rgba(242, 201, 109, 0.45);
  background: #17303a;
  color: rgba(255, 247, 216, 0.86);
  opacity: 1;
}

@media (max-width: 760px) {
  .publisher-modal { align-items: end; padding: 8px; }
  .publisher-panel { max-height: 94dvh; border-radius: 14px; }
  .publisher-layout, .publisher-field-grid, .publisher-preflight, .publisher-readiness ul { grid-template-columns: 1fr; }
  .publisher-terminal { min-height: 185px; }
}

.admin-panel {
  top: 16px;
  right: 16px;
  bottom: 16px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: min(480px, calc(100vw - 24px));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 26px;
  background: rgba(246, 251, 252, 0.96);
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px);
}

.admin-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 10px;
}

.admin-panel header strong {
  font-size: 1rem;
}

.admin-panel nav {
  display: flex;
  gap: 7px;
  padding: 0 16px 12px;
  overflow-x: auto;
}

.admin-panel nav button {
  white-space: nowrap;
}

.admin-panel nav button.is-active {
  background: #11171b;
  color: white;
}

.admin-panel > .admin-message {
  margin: 0 16px 12px;
  padding: 10px 12px;
  border: 1px solid rgba(197, 167, 100, 0.34);
  border-radius: 14px;
  background: rgba(197, 167, 100, 0.14);
  color: #354148;
  font-weight: 820;
}

.admin-panel__body {
  min-height: 0;
  overflow: auto;
  padding: 0 16px 18px;
}

.admin-panel form,
.admin-card {
  display: grid;
  gap: 12px;
}

.admin-card {
  margin-top: 10px;
  padding: 13px;
  border: 1px solid rgba(17, 23, 27, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
}

.admin-card summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #11171b;
  font-weight: 820;
  cursor: pointer;
}

.admin-preview {
  width: 100%;
  max-height: 180px;
  object-fit: contain;
  border-radius: 14px;
  background: #dce9ef;
}

.admin-screen-tools {
  position: absolute;
  z-index: 12;
  right: clamp(18px, 3vw, 52px);
  top: clamp(84px, 8vh, 116px);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  pointer-events: auto;
}

.admin-screen-tools button,
.admin-add-chip,
.admin-inline-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  border: 1px solid rgba(17, 23, 27, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: #11171b;
  box-shadow: 0 12px 28px rgba(33, 49, 57, 0.12);
  backdrop-filter: blur(16px);
  font-size: 0.78rem;
  font-weight: 840;
}

.admin-screen-tools button,
.admin-add-chip {
  padding: 0 13px;
}

.admin-content-tools {
  position: absolute;
  z-index: 8;
  right: 14px;
  top: 14px;
  display: flex;
  gap: 8px;
}

.admin-inline-edit {
  width: 31px;
  height: 31px;
  padding: 0;
  color: var(--gold);
  vertical-align: middle;
}

.admin-inline-editor {
  display: inline-grid;
  align-items: flex-start;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--gold) 72%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--glass-strong) 90%, white);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--theme-glow) 26%, transparent);
  vertical-align: middle;
}

.admin-inline-editor__field {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--gold) 42%, var(--line));
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  color: #11171b;
  font: inherit;
  font-size: inherit;
  line-height: 1.3;
  resize: vertical;
}

.admin-inline-editor__save {
  grid-column: 1;
  justify-self: start;
}

.admin-inline-editor__cancel {
  grid-column: 2;
  justify-self: end;
}

.admin-inline-editor__field:focus {
  outline: 2px solid color-mix(in srgb, var(--gold) 68%, transparent);
  outline-offset: 1px;
}

.admin-inline-editor__save,
.admin-inline-editor__cancel {
  min-height: 32px;
  padding: 0 9px;
  border: 0;
  border-radius: 8px;
  background: var(--gold);
  color: #11171b;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 820;
}

.admin-inline-editor__cancel {
  background: color-mix(in srgb, var(--ink) 12%, white);
}

/* Direct editing always expands inside its original text node. Responsive text clamps
   are disabled only while that one field is being edited. */
.is-admin-inline-editing {
  display: block !important;
  overflow: visible !important;
  max-height: none !important;
  min-width: 0 !important;
  height: auto !important;
  white-space: normal !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
}

.menu-tile:has(.is-admin-inline-editing),
.doctor-card:has(.is-admin-inline-editing),
.primary-action:has(.is-admin-inline-editing),
.documents-hub-card:has(.is-admin-inline-editing),
.document-sheet:has(.is-admin-inline-editing),
.review-card:has(.is-admin-inline-editing),
.review-score:has(.is-admin-inline-editing),
.client-story:has(.is-admin-inline-editing),
.contact-card:has(.is-admin-inline-editing) {
  z-index: 40;
  overflow: visible !important;
}

.review-score {
  position: relative;
}

.review-score__icon {
  position: relative;
  display: inline-grid;
  width: 52px;
  height: 52px;
  place-items: center;
}

.review-score__custom-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.review-score__icon > .admin-media-edit,
.review-score__icon > .admin-media-delete {
  position: absolute;
  z-index: 3;
  top: -10px;
}

.review-score__icon > .admin-media-edit {
  right: -18px;
}

.review-score__icon > .admin-media-delete {
  left: -18px;
}

.review-score__label {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}

.client-strip em > span {
  min-width: 0;
  text-align: right;
}

.client-strip em:has(.is-admin-inline-editing) {
  align-items: stretch;
  flex-wrap: wrap;
}

@media (max-width: 520px) {
  .admin-inline-editor {
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    padding: 4px;
  }

  .admin-inline-editor__save,
  .admin-inline-editor__cancel {
    width: 100%;
    padding: 0 6px;
  }
}

.contacts-layout .contact-card,
.contacts-layout .route-card {
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.map-panel--photo > .admin-media-edit {
  position: absolute;
  z-index: 6;
  top: 12px;
  right: 12px;
}

.doctor-admin-tools {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 0;
}

.doctor-admin-tools:empty {
  display: none;
}

.doctor-admin-tools {
  display: none;
}

.doctor-edit-list {
  display: grid;
  gap: 9px;
}

.doctor-edit-list span {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 9px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
  color: #2d3940;
  font-weight: 760;
}

.doctor-edit-list strong {
  min-width: 132px;
  color: #68767d;
  font-size: 0.78rem;
  text-transform: uppercase;
}

.empty-state {
  display: grid;
  place-items: center;
  gap: 16px;
  height: 100%;
  min-height: 220px;
  padding: 28px;
  border: 1px dashed rgba(17, 23, 27, 0.18);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.52);
  color: #53636b;
  text-align: center;
}

.empty-state strong {
  color: #15191d;
  font-size: 1.2rem;
}

.work-placeholder,
.client-story__placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: rgba(17, 23, 27, 0.38);
  font-size: clamp(4rem, 12vw, 8rem);
  font-weight: 900;
}

.work-slide__photo .work-placeholder {
  position: static;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(17, 23, 27, 0.38);
  text-transform: none;
}

.document-grid--sheets {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.document-grid--sheets .document-sheet {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 26px;
  border-radius: 28px;
}

.document-sheet--preview .document-sheet__seal {
  width: 68px;
  height: 68px;
}

.document-sheet--preview h2 {
  max-width: 100%;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
}

.document-sheet--preview p {
  margin-top: 15px;
}

.document-sheet__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 20px;
  background: white;
}

.admin-image-field {
  gap: 9px;
}

.admin-upload-status {
  color: #68767d;
  font-size: 0.78rem;
  font-weight: 760;
}

.admin-upload-meter {
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(17, 23, 27, 0.08);
}

.admin-upload-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--gold);
  transition: width 160ms ease;
}

.admin-preview-box {
  display: grid;
  place-items: center;
  min-height: 160px;
  overflow: hidden;
  border-radius: 14px;
  background: #dce9ef;
}

.admin-preview-placeholder {
  color: rgba(17, 23, 27, 0.38);
  font-size: 3.4rem;
  font-weight: 900;
}

.admin-doc-section {
  display: grid;
  gap: 10px;
}

.admin-doc-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}

.menu-tile strong,
.menu-tile small,
.doctor-card__body strong,
.doctor-card__body em,
.primary-action strong,
.primary-action small,
.documents-hub-card strong,
.documents-hub-card small,
.document-card h3,
.document-card p,
.review-card strong,
.review-card p,
.client-story strong,
.client-story span,
.service-row strong,
.service-row em,
.doctor-edit-list span {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

.primary-action > span:last-child,
.menu-tile,
.doctor-card__body,
.documents-hub-card,
.review-card,
.client-story div,
.service-row span {
  min-width: 0;
}

.screen-content > .theme-switcher + .menu-grid {
  padding-top: 48px;
}

.primary-action strong,
.documents-hub-card strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.documents-hub-card small,
.primary-action small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.admin-json {
  min-height: 430px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.78rem;
  line-height: 1.4;
}

@media (max-width: 640px) {
  .theme-switcher {
    top: 82px;
    gap: 8px;
  }

  .theme-dot {
    width: 21px;
    height: 21px;
  }

  .screen-content > .theme-switcher + .menu-grid {
    padding-top: 38px;
  }

  .doctor-edit-list {
    gap: 7px;
  }

  .doctor-edit-list span {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 5px 8px;
    min-height: 0;
  }

  .doctor-edit-list strong {
    grid-column: 1 / -1;
  }

  .profile-actions {
    align-content: end;
  }

  .primary-action {
    min-width: 0;
  }

  .primary-action strong {
    font-size: clamp(0.78rem, 3.55vw, 0.96rem);
  }

  .documents-hub-card strong {
    font-size: clamp(0.9rem, 4.2vw, 1.12rem);
    line-height: 1.05;
  }

  .review-public-tools {
    left: 14px;
    right: 14px;
    justify-content: flex-end;
  }

  .review-compose-button span {
    display: none;
  }

  .review-form {
    gap: 12px;
    padding: 18px;
    border-radius: 24px;
  }

  .review-form input {
    height: 48px;
  }

  .review-form textarea {
    min-height: 116px;
  }

  .review-form__rating button {
    width: 44px;
    height: 44px;
    border-radius: 15px;
  }

  .admin-screen-tools {
    left: 30px;
    right: 30px;
    top: 136px;
    justify-content: flex-start;
  }

  .admin-screen-tools button span {
    display: none;
  }

  .doctor-edit-list strong {
    min-width: 92px;
  }

  .document-grid--sheets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-panel {
    inset: 8px;
    width: auto;
    border-radius: 20px;
  }

.admin-bar {
    right: 12px;
    bottom: 12px;
  }
}

/* Final mobile safety net: these rules intentionally sit at the end of the file
   so earlier kiosk/admin responsive blocks cannot let labels spill out. */
@media (max-width: 820px) {
  .menu-tile,
  .doctor-card,
  .primary-action,
  .documents-hub-card,
  .document-card,
  .review-card,
  .client-story,
  .service-row,
  .doctor-picker button {
    min-width: 0;
    overflow: hidden;
  }

  .menu-tile strong,
  .menu-tile small,
  .doctor-card__body strong,
  .doctor-card__body em,
  .primary-action strong,
  .primary-action small,
  .documents-hub-card strong,
  .documents-hub-card small,
  .document-card h3,
  .document-card p,
  .review-card strong,
  .review-card p,
  .client-story strong,
  .client-story span,
  .service-row strong,
  .service-row small,
  .service-row em,
  .doctor-picker strong,
  .doctor-picker small {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .primary-action strong,
  .documents-hub-card strong,
  .document-card h3,
  .doctor-picker strong {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.06;
  }

  .primary-action small,
  .documents-hub-card small,
  .document-card p,
  .doctor-picker small {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.14;
  }

  .primary-action strong {
    font-size: clamp(0.82rem, 3.2vw, 1.05rem);
  }

  .primary-action small {
    font-size: clamp(0.68rem, 2.65vw, 0.82rem);
  }

  .documents-hub-card strong,
  .document-card h3 {
    font-size: clamp(0.9rem, 3.8vw, 1.14rem);
  }

  .documents-hub-card small,
  .document-card p {
    font-size: clamp(0.68rem, 2.7vw, 0.82rem);
  }

  .service-row {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
  }

  .service-row em {
    justify-self: stretch;
    text-align: left;
  }

  .profile-actions {
    gap: 10px;
  }

  .profile-card__copy,
  .profile-card__copy h1,
  .profile-card__copy p {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 420px) {
  .screen-heading h1,
  .splash-screen h1 {
    letter-spacing: 0;
  }

  .profile-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .primary-action {
    min-height: 82px;
    padding: 12px;
    gap: 9px;
  }

  .primary-action__icon,
  .documents-hub-card span,
  .document-card__icon {
    width: 38px;
    height: 38px;
    min-height: 38px;
  }

  .documents-hub-card {
    padding: 14px;
    gap: 7px;
  }

  .client-viewer__card div,
  .work-slide__info {
    left: 14px;
    right: 14px;
    bottom: 14px;
    max-width: calc(100% - 28px);
  }
}

.brand-chip svg {
  color: #c7a96a;
  stroke-width: 2.35;
  filter: drop-shadow(0 0 8px rgba(199, 169, 106, 0.42));
}

.menu-tile--image {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: stretch;
  justify-content: stretch;
  gap: 12px;
  padding: 12px;
  overflow: hidden;
  text-align: left;
}

.menu-tile--image .menu-tile__icon {
  display: none;
}

.menu-tile__media {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: clamp(16px, 2vw, 26px);
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.9), rgba(212, 235, 255, 0.62) 62%, rgba(255, 255, 255, 0.42)),
    color-mix(in srgb, var(--aurora-1) 12%, white);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 14px 30px color-mix(in srgb, var(--theme-glow) 22%, transparent);
}

.menu-tile__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: scale(0.98);
  transition: transform 210ms ease, filter 210ms ease;
}

.menu-tile--image:hover .menu-tile__media img {
  transform: scale(1.015);
  filter: saturate(1.08) contrast(1.03);
}

.menu-tile__text {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 0 4px 4px;
}

.menu-tile--image strong,
.menu-tile--image small {
  margin: 0;
}

.menu-tile--image small {
  display: block;
}

@media (max-width: 820px) {
  .menu-tile--image {
    gap: 9px;
    padding: 10px;
    text-align: left;
  }
}

@media (max-width: 640px) {
  .menu-grid .menu-tile:nth-child(7) {
    grid-column: auto;
  }

  .menu-tile--image {
    gap: 7px;
    padding: 8px;
  }

  .menu-tile__media {
    border-radius: 17px;
  }

  .menu-tile--image strong {
    font-size: clamp(0.82rem, 3.25vw, 1rem);
    line-height: 1.02;
  }

  .menu-tile--image small {
    display: none;
  }
}

.profile-info p {
  white-space: pre-line;
}

.training-card {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 22px;
  height: 100%;
  min-height: 0;
  padding: clamp(22px, 3vw, 42px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(232, 245, 247, 0.68)),
    radial-gradient(circle at 18% 14%, color-mix(in srgb, var(--aurora-1) 28%, transparent), transparent 42%),
    radial-gradient(circle at 86% 84%, color-mix(in srgb, var(--aurora-3) 24%, transparent), transparent 48%);
  box-shadow:
    var(--shadow-soft),
    0 0 36px color-mix(in srgb, var(--theme-glow) 46%, transparent);
  overflow: hidden;
}

.training-card > div:first-child {
  display: grid;
  align-content: center;
  gap: 18px;
  min-width: 0;
}

.training-card svg {
  color: var(--gold);
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--gold) 45%, transparent));
}

.training-card h2 {
  margin: 0;
  color: #101417;
  font-size: clamp(2rem, 4vw, 4.3rem);
  line-height: 0.96;
}

.training-card p {
  margin: 0;
  color: #3a4850;
  font-size: clamp(1rem, 1.5vw, 1.28rem);
  line-height: 1.48;
}

.training-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-content: center;
  min-width: 0;
}

.training-list span {
  min-width: 0;
  padding: clamp(14px, 1.7vw, 22px);
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.64);
  color: #12191d;
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  font-weight: 820;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 14px 28px color-mix(in srgb, var(--theme-glow) 18%, transparent);
  overflow-wrap: normal;
  word-break: normal;
}

.training-list__heading {
  grid-column: 1 / -1;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--aurora-1) 22%, white), rgba(255, 255, 255, 0.72));
  color: #53636b;
  font-size: clamp(0.82rem, 1.15vw, 1rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.menu-tile--image {
  border: 2px solid color-mix(in srgb, var(--aurora-1) 58%, rgba(255, 255, 255, 0.92));
  box-shadow:
    var(--shadow-soft),
    0 0 0 1px rgba(255, 255, 255, 0.72) inset,
    0 0 34px color-mix(in srgb, var(--theme-glow) 54%, transparent),
    0 14px 38px color-mix(in srgb, var(--aurora-2) 17%, transparent);
}

.menu-tile--image:hover {
  border-color: color-mix(in srgb, var(--aurora-1) 82%, white);
  box-shadow:
    0 28px 70px color-mix(in srgb, var(--theme-glow) 82%, transparent),
    0 0 0 1px rgba(255, 255, 255, 0.9) inset,
    0 0 54px color-mix(in srgb, var(--aurora-1) 58%, transparent);
}

.review-card div > strong {
  min-width: 0;
  overflow: hidden;
  overflow-wrap: normal;
  word-break: normal;
  white-space: normal;
}

@media (max-width: 820px) {
  .training-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .training-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .review-card div {
  gap: 8px;
}

.admin-bar--inline {
  align-items: center;
  padding: 5px 6px 5px 12px;
  border: 1px solid color-mix(in srgb, var(--gold) 38%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--glass-strong) 86%, transparent);
  color: var(--ink);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--theme-glow) 30%, transparent);
  font-size: 0.74rem;
  font-weight: 800;
}

.admin-toast {
  position: fixed;
  z-index: 51;
  right: 18px;
  bottom: 72px;
  max-width: min(360px, calc(100vw - 36px));
  padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--glass-strong) 92%, white);
  color: var(--ink);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--theme-glow) 28%, transparent);
  font-size: 0.82rem;
  font-weight: 760;
}

  .review-card div > strong {
    display: block;
    flex: 1 1 auto;
    min-width: 6.5em;
    max-width: calc(100% - 78px);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 460px) {
  .training-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Admin-editable premium controls and kiosk chrome refinements. */
.topbar .brand-chip,
.topbar .icon-action {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.topbar .brand-chip {
  height: 54px;
  padding: 0;
  color: #11171b;
  font-weight: 880;
}

.topbar .brand-chip svg,
.topbar .icon-action svg {
  width: 29px;
  height: 29px;
  color: #c7a96a;
  stroke-width: 2.7;
  filter:
    drop-shadow(0 0 8px rgba(199, 169, 106, 0.52))
    drop-shadow(0 7px 12px rgba(112, 82, 28, 0.18));
}

.topbar .icon-action {
  width: 58px;
  min-width: 58px;
  height: 58px;
  padding: 0;
}

.topbar .icon-action span {
  display: none;
}

.splash-mark {
  position: relative;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.splash-mark img {
  filter:
    drop-shadow(0 0 14px rgba(199, 169, 106, 0.44))
    drop-shadow(0 22px 30px rgba(24, 32, 36, 0.14));
}

.splash-actions {
  align-items: center;
}

.start-button {
  position: relative;
  min-width: clamp(270px, 25vw, 390px);
  height: 86px;
  padding: 0 44px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(252, 229, 154, 0.92) 32%, rgba(190, 142, 52, 0.86) 68%, rgba(255, 246, 203, 0.94)),
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.9), transparent 38%);
  color: #21190b;
  box-shadow:
    0 28px 72px rgba(158, 111, 30, 0.28),
    0 0 44px color-mix(in srgb, var(--theme-glow) 64%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 0 -12px 24px rgba(90, 57, 8, 0.1);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.64);
}

.start-button::before {
  content: "";
  position: absolute;
  inset: -70% -24%;
  background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, 0.78) 48%, transparent 62%);
  transform: translateX(-44%) rotate(8deg);
  animation: start-button-shine 2.7s ease-in-out infinite;
  pointer-events: none;
}

.start-button span,
.start-button small {
  position: relative;
  z-index: 1;
}

.start-button span {
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  font-weight: 950;
}

.start-button small {
  margin-left: 4px;
  color: rgba(33, 25, 11, 0.44);
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@keyframes start-button-shine {
  0%,
  38% {
    transform: translateX(-58%) rotate(8deg);
  }
  78%,
  100% {
    transform: translateX(58%) rotate(8deg);
  }
}

.screen-layer--enter.screen-layer--forward .menu-aside {
  animation: clinic-enter-pass 240ms cubic-bezier(0.2, 0.82, 0.22, 1) both;
}

.screen-layer--enter.screen-layer--forward .menu-tile {
  animation: tile-open-pass 250ms cubic-bezier(0.2, 0.82, 0.22, 1) both;
}

@keyframes clinic-enter-pass {
  from {
    opacity: 0;
    filter: blur(10px) saturate(1.2);
    transform: scale(1.045) translateY(18px);
  }
  to {
    opacity: 1;
    filter: blur(0) saturate(1);
    transform: scale(1) translateY(0);
  }
}

@keyframes tile-open-pass {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.965);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.admin-media-edit {
  position: absolute;
  z-index: 8;
  right: 10px;
  top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  min-height: 31px;
  padding: 0;
  border: 1px solid rgba(199, 169, 106, 0.42);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #c7a96a;
  box-shadow: 0 12px 28px rgba(33, 49, 57, 0.14);
  backdrop-filter: blur(16px);
  cursor: pointer;
}

.admin-inline-edit {
  cursor: pointer;
}

.admin-media-edit.is-uploading {
  animation: theme-breathe 700ms ease-in-out infinite alternate;
}

.screen-heading .admin-inline-edit,
.splash-screen__content .admin-inline-edit,
.feature-strip .admin-inline-edit,
.feature-stack .admin-inline-edit,
.menu-tile .admin-inline-edit,
.documents-hub-card .admin-inline-edit {
  margin-left: 7px;
  vertical-align: middle;
}

.feature-strip .admin-inline-edit,
.feature-stack .admin-inline-edit,
.menu-tile .admin-inline-edit,
.documents-hub-card .admin-inline-edit {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  border-radius: 999px;
}

.documents-hub-card__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.documents-hub-card__visual .admin-media-edit {
  right: -8px;
  top: -8px;
}

.hero-photo,
.clinic-side-photo,
.menu-tile__media {
  position: relative;
}

@media (max-width: 640px) {
  .topbar .brand-chip svg,
  .topbar .icon-action svg {
    width: 25px;
    height: 25px;
  }

  .topbar .icon-action {
    width: 48px;
    min-width: 48px;
    height: 48px;
  }

  .start-button {
    min-width: min(100%, 300px);
    height: 68px;
    padding: 0 28px;
  }

  .start-button span {
    font-size: 1.38rem;
  }

  .start-button small {
    font-size: 0.76rem;
  }
}

/* Profile mobile fit and theme-blended entrance controls. */
.start-button {
  isolation: isolate;
  border-color: transparent;
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.96), transparent 34%),
    radial-gradient(circle at 88% 80%, color-mix(in srgb, var(--aurora-1) 34%, transparent), transparent 42%),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--glass-strong) 72%, transparent),
      color-mix(in srgb, var(--aurora-3) 48%, var(--glass) 52%) 34%,
      color-mix(in srgb, var(--gold) 54%, var(--aurora-1) 30%) 66%,
      color-mix(in srgb, #fff7d4 76%, var(--aurora-2) 24%)
    );
  box-shadow:
    0 0 0 1px color-mix(in srgb, rgba(255, 255, 255, 0.62) 72%, transparent),
    0 30px 82px color-mix(in srgb, var(--theme-glow) 82%, transparent),
    0 16px 46px rgba(135, 91, 22, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -18px 34px rgba(116, 78, 15, 0.08);
}

.start-button::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -22px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 35% 20%, color-mix(in srgb, var(--aurora-3) 48%, transparent), transparent 48%),
    radial-gradient(circle at 75% 76%, color-mix(in srgb, var(--aurora-1) 38%, transparent), transparent 50%);
  filter: blur(18px);
  opacity: 0.68;
  pointer-events: none;
}

.start-button::before {
  z-index: 1;
}

.start-button span,
.start-button small {
  z-index: 2;
}

.splash-mark::after {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--theme-glow) 62%, transparent), transparent 62%);
  filter: blur(20px);
  opacity: 0.72;
}

.splash-mark img {
  mix-blend-mode: multiply;
  background: transparent;
}

@media (max-width: 820px) {
  .screen-grid:has(.profile-layout) {
    gap: clamp(8px, 1.8vh, 14px);
  }

  .screen-grid:has(.profile-layout) .eyebrow {
    margin-bottom: 5px;
    font-size: clamp(0.58rem, 2.1vw, 0.72rem);
    line-height: 1.05;
  }

  .screen-grid:has(.profile-layout) .screen-heading h1 {
    font-size: clamp(1.45rem, 6.6vw, 2.3rem);
    line-height: 0.98;
    overflow-wrap: normal;
    word-break: normal;
    text-wrap: balance;
  }

  .screen-grid:has(.profile-layout) .screen-subtitle {
    margin-top: 5px;
    font-size: clamp(0.72rem, 2.55vw, 0.88rem);
    line-height: 1.12;
  }

  .profile-layout {
    position: relative;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) min-content;
    gap: clamp(7px, 1.4vh, 10px);
  }

  .doctor-admin-tools {
    position: absolute;
    z-index: 9;
    top: 0;
    right: 0;
    justify-content: flex-end;
    max-width: min(100%, 330px);
    pointer-events: none;
  }

  .doctor-admin-tools .admin-add-chip {
    pointer-events: auto;
  }

  .doctor-admin-tools .admin-add-chip span {
    display: none;
  }

  .profile-info {
    gap: clamp(5px, 1vh, 9px);
    padding: clamp(11px, 3.2vw, 17px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--accent) 60%, transparent) transparent;
  }

  .doctor-edit-list {
    gap: clamp(3px, 0.7vh, 6px);
  }

  .doctor-edit-list span {
    gap: 3px 7px;
    font-size: clamp(0.66rem, 2.55vw, 0.84rem);
    line-height: 1.08;
  }

  .doctor-edit-list strong {
    min-width: 0;
    font-size: clamp(0.56rem, 2vw, 0.68rem);
    line-height: 1;
  }

  .profile-info p {
    font-size: clamp(0.66rem, 2.45vw, 0.86rem);
    line-height: 1.15;
  }

  .competency-grid {
    gap: 4px;
  }

  .competency-grid span {
    padding: 5px 7px;
    font-size: clamp(0.56rem, 2.05vw, 0.7rem);
    line-height: 1.05;
  }

  .profile-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(5px, 1.2vh, 8px);
    align-content: end;
  }

  .primary-action {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: clamp(52px, 10vh, 66px);
    padding: 7px;
    gap: 5px;
    border-radius: 15px;
  }

  .primary-action__icon {
    width: clamp(28px, 7.2vw, 34px);
    height: clamp(28px, 7.2vw, 34px);
    min-width: clamp(28px, 7.2vw, 34px);
    border-radius: 11px;
  }

  .primary-action strong {
    font-size: clamp(0.62rem, 2.55vw, 0.82rem);
    line-height: 1.04;
    -webkit-line-clamp: 2;
  }

  .primary-action small {
    display: none;
  }
}

@media (max-width: 430px), (max-height: 740px) {
  .screen-grid:has(.profile-layout) .screen-heading h1 {
    font-size: clamp(1.28rem, 6vw, 1.75rem);
  }

  .profile-info {
    border-radius: 20px;
    padding: clamp(9px, 2.7vw, 13px);
  }

  .doctor-edit-list span {
    font-size: clamp(0.6rem, 2.32vw, 0.74rem);
  }

  .profile-info p {
    font-size: clamp(0.58rem, 2.22vw, 0.72rem);
    line-height: 1.12;
  }

  .competency-grid span {
    padding: 4px 6px;
    font-size: clamp(0.5rem, 1.9vw, 0.62rem);
  }

  .primary-action {
    min-height: clamp(48px, 9.2vh, 58px);
    padding: 6px;
  }

  .primary-action strong {
    font-size: clamp(0.56rem, 2.35vw, 0.72rem);
  }
}

/* Documents: uploaded images are real full-card previews, not tiny corner marks. */
.documents-hub-card--has-image {
  position: relative;
  isolation: isolate;
  justify-content: flex-end;
  overflow: hidden;
  color: #ffffff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.42);
}

.documents-hub-card__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.75);
}

.documents-hub-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.documents-hub-card--has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(12, 17, 20, 0.08), rgba(12, 17, 20, 0.62)),
    radial-gradient(circle at 70% 15%, rgba(255, 255, 255, 0.28), transparent 42%);
  pointer-events: none;
}

.documents-hub-card--has-image .documents-hub-card__visual {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 2;
  width: 42px;
  height: 42px;
  min-height: 42px;
  background: rgba(255, 255, 255, 0.72);
  color: #c7a96a;
  backdrop-filter: blur(16px);
}

.documents-hub-card--has-image strong,
.documents-hub-card--has-image small {
  position: relative;
  z-index: 2;
  color: #ffffff;
}

.document-sheet {
  position: relative;
}

.document-sheet--image {
  padding: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.86);
}

.document-sheet--image .document-sheet__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), color-mix(in srgb, var(--aurora-1) 10%, white));
}

.document-sheet--image .document-sheet__details {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  z-index: 2;
  display: grid;
  gap: 3px;
  max-height: 46%;
  padding: 10px 12px;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 12px;
  background: rgba(11, 18, 22, 0.68);
  color: white;
  backdrop-filter: blur(12px);
}

.document-sheet__details h2,
.document-sheet__details span,
.document-sheet__details strong {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.document-sheet__details h2 {
  font-size: clamp(0.9rem, 1.5vw, 1.25rem);
}

.document-sheet__details span {
  font-size: 0.75rem;
  opacity: 0.86;
}

.document-sheet__details strong {
  font-size: 0.78rem;
}

.document-grid--sheets .document-sheet--image {
  padding: 0;
}

.document-sheet__media-edit {
  right: 14px;
  top: 14px;
}

/* Reviews: mobile-safe name/rating layout and a cleaner public add-review control. */
.review-public-tools {
  top: 0;
  right: 0;
  left: auto;
}

.review-public-tools + .review-layout {
  height: calc(100% - 52px);
  margin-top: 52px;
}

.review-compose-button {
  min-height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gold);
  box-shadow: none;
  text-shadow: 0 0 18px color-mix(in srgb, var(--gold) 50%, transparent);
}

.review-compose-button svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.8;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--gold) 55%, transparent));
}

.review-compose-button span {
  display: inline;
  font-weight: 900;
}

.review-card {
  overflow: hidden;
}

.review-card div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  justify-content: start;
  gap: 7px;
}

.review-card div > strong {
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: normal;
}

.review-card div > span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  max-width: 100%;
  min-width: 0;
  white-space: normal;
}

.review-card .rating-stars {
  flex: 0 1 auto;
  max-width: 100%;
}

.review-card p {
  max-width: 100%;
  overflow-wrap: anywhere;
}

@media (max-width: 820px) {
  .review-public-tools {
    top: -4px;
    right: 0;
    left: 0;
    justify-content: flex-start;
  }

  .review-public-tools + .review-layout {
    height: calc(100% - 42px);
    margin-top: 42px;
  }

  .review-compose-button span {
    display: inline;
    font-size: clamp(0.82rem, 3vw, 0.95rem);
  }

  .review-grid--six {
    gap: 10px;
  }

  .review-card {
    justify-content: start;
    gap: 6px;
    padding: clamp(12px, 3.1vw, 16px);
  }

  .review-card div > strong {
    display: block;
    min-width: 0;
    max-width: 100%;
    font-size: clamp(0.82rem, 3.55vw, 1.04rem);
    line-height: 1.05;
    text-overflow: clip;
    white-space: normal;
    -webkit-line-clamp: unset;
  }

  .review-card div > span {
    gap: 4px;
    font-size: clamp(0.72rem, 2.8vw, 0.86rem);
    line-height: 1;
  }

  .rating-stars {
    gap: 1px;
  }

  .rating-stars svg {
    width: clamp(12px, 3.4vw, 15px);
    height: clamp(12px, 3.4vw, 15px);
  }

  .review-card small {
    margin-top: 2px;
    font-size: clamp(0.64rem, 2.55vw, 0.78rem);
    line-height: 1.08;
  }

  .review-card p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: clamp(0.62rem, 2.45vw, 0.78rem);
    line-height: 1.16;
  }
}

@media (max-width: 420px) {
  .review-grid--six {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  .review-card {
    border-radius: 18px;
  }
}

/* Admin media controls: every image/icon surface has a real upload/add target. */
.primary-action {
  position: relative;
  overflow: hidden;
  min-width: 0;
}

.primary-action > span:not(.primary-action__icon):not(.admin-media-edit) {
  min-width: 0;
}

.primary-action strong,
.primary-action small,
.doctor-card__body strong,
.doctor-card__body small,
.doctor-edit-list span,
.profile-info p {
  overflow-wrap: anywhere;
}

.doctor-card__photo .admin-media-edit,
.profile-photo > .admin-media-edit,
.primary-action__media-edit {
  right: 12px;
  top: 12px;
  width: 34px;
  height: 34px;
  min-height: 34px;
  color: #c7a96a;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.72)),
    color-mix(in srgb, var(--aurora-3) 18%, transparent);
  box-shadow:
    0 12px 26px rgba(24, 32, 36, 0.2),
    0 0 18px color-mix(in srgb, var(--gold) 38%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.primary-action__media-edit {
  z-index: 9;
  pointer-events: auto;
}

.doctor-card__photo .admin-media-edit,
.profile-photo > .admin-media-edit {
  z-index: 6;
}

.profile-info,
.doctor-edit-list,
.doctor-edit-list span,
.competency-grid,
.profile-actions {
  min-width: 0;
}

@media (min-width: 821px) and (max-width: 1280px) {
  .screen-grid:has(.profile-layout) {
    gap: 16px;
  }

  .screen-grid:has(.profile-layout) .screen-heading h1 {
    font-size: clamp(2.4rem, 4.8vw, 3.8rem);
    line-height: 0.98;
  }

  .screen-grid:has(.profile-layout) .screen-subtitle {
    margin-top: 10px;
    font-size: clamp(0.96rem, 1.45vw, 1.08rem);
    line-height: 1.24;
  }

  .profile-layout {
    grid-template-columns: minmax(250px, 34%) minmax(0, 1fr);
    gap: 14px;
  }

  .profile-info {
    gap: 8px;
    padding: 18px;
  }

  .doctor-edit-list {
    gap: 6px;
  }

  .doctor-edit-list span {
    font-size: clamp(0.78rem, 1.18vw, 0.98rem);
    line-height: 1.14;
    min-height: 0;
    padding: 7px 10px;
  }

  .doctor-edit-list strong {
    min-width: 108px;
  }

  .profile-info p {
    font-size: clamp(0.82rem, 1.22vw, 1.05rem);
    line-height: 1.22;
  }

  .competency-grid {
    gap: 6px;
  }

  .competency-grid span {
    padding: 7px 9px;
    font-size: clamp(0.72rem, 1vw, 0.88rem);
    line-height: 1.08;
  }

  .profile-actions {
    gap: 10px;
  }

  .primary-action {
    min-height: 76px;
    padding: 12px;
    gap: 10px;
  }

  .primary-action__icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 16px;
  }

  .primary-action strong {
    font-size: clamp(0.86rem, 1.2vw, 1.02rem);
    line-height: 1.08;
  }

  .primary-action small {
    font-size: clamp(0.7rem, 0.95vw, 0.82rem);
    line-height: 1.12;
  }
}

@media (max-width: 820px) {
  .doctor-card__photo .admin-media-edit,
  .profile-photo > .admin-media-edit,
  .primary-action__media-edit {
    right: 8px;
    top: 8px;
    width: 29px;
    height: 29px;
    min-height: 29px;
  }
}

/* Final responsive overrides for direct editing and uploaded covers. */
.primary-action__cover {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.54;
  pointer-events: none;
}

.primary-action:has(.primary-action__cover)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.22));
  pointer-events: none;
}

.primary-action > .primary-action__icon,
.primary-action > span:last-child {
  position: relative;
  z-index: 1;
}

.primary-action:has(.primary-action__cover) .primary-action__icon {
  background: transparent;
  color: var(--gold);
  box-shadow: none;
}

.primary-action:has(.primary-action__cover) strong,
.primary-action:has(.primary-action__cover) small {
  color: #101417;
  text-shadow: 0 1px 14px rgba(255, 255, 255, 0.72);
}

.icon-action--back {
  position: relative;
  overflow: visible;
}

.icon-action__custom-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.icon-action--back > .icon-action__media-edit {
  right: -8px;
  top: -8px;
  z-index: 12;
}

.documents-hub-card--has-image::before {
  display: none;
}

.documents-hub-card--has-image .documents-hub-card__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  border-radius: inherit;
  background: transparent;
}

.documents-hub-card--has-image::after {
  z-index: 1;
}

.documents-hub-card--has-image strong,
.documents-hub-card--has-image small {
  z-index: 2;
}

.documents-hub-card > .admin-media-edit {
  z-index: 4;
  background: rgba(255, 255, 255, 0.9);
}

.documents-hub-card__visual {
  background: transparent !important;
  color: var(--gold) !important;
  box-shadow: none !important;
}

.documents-hub-card__visual .admin-inline-edit {
  background: rgba(255, 255, 255, 0.9);
}

.document-sheet__seal,
.document-sheet--preview .document-sheet__seal {
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  padding: 8px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.map-pin {
  width: 54px;
  height: 54px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.map-pin__image {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.map-pin > .admin-media-edit {
  right: -10px;
  top: -10px;
  z-index: 6;
}

.map-panel--photo strong .admin-inline-edit,
.map-panel--photo em .admin-inline-edit,
.map-panel__link-edit .admin-inline-edit {
  color: var(--gold);
}

/* The minus control removes the selected local image or an album entry. */
.admin-media-delete {
  position: absolute;
  z-index: 8;
  left: 10px;
  top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  min-height: 31px;
  padding: 0;
  border: 1px solid rgba(140, 81, 73, 0.42);
  border-radius: 999px;
  background: rgba(37, 31, 31, 0.88);
  color: #f0c0af;
  box-shadow: 0 12px 28px rgba(33, 49, 57, 0.16);
  backdrop-filter: blur(16px);
  cursor: pointer;
}

.admin-media-edit:hover,
.admin-media-edit:focus-visible {
  background: rgba(255, 255, 255, 1);
}

.admin-media-delete:hover,
.admin-media-delete:focus-visible {
  background: #733f39;
  color: #fff7f4;
}

.work-slide__photo > .admin-media-delete,
.client-viewer__card > .admin-media-delete,
.client-story > .admin-media-delete {
  z-index: 10;
  left: 12px;
  top: 12px;
  right: auto;
  width: 34px;
  height: 34px;
  min-height: 34px;
}

.map-panel--photo > .admin-media-delete {
  z-index: 6;
  left: 12px;
  top: 12px;
}

.doctor-card__photo .admin-media-delete,
.profile-photo > .admin-media-delete,
.primary-action__media-delete {
  left: 12px;
  top: 12px;
  width: 34px;
  height: 34px;
  min-height: 34px;
}

.doctor-card__photo .admin-media-delete,
.profile-photo > .admin-media-delete {
  z-index: 6;
}

.primary-action__media-delete {
  z-index: 9;
  pointer-events: auto;
}

.documents-hub-card > .admin-media-delete {
  z-index: 4;
}

.map-pin > .admin-media-delete,
.icon-action__media-delete {
  left: -10px;
  top: -10px;
  z-index: 6;
}

.icon-action__media-edit {
  right: -10px;
  top: -10px;
}

@media (max-width: 820px) {
  .doctor-card__photo .admin-media-delete,
  .profile-photo > .admin-media-delete,
  .primary-action__media-delete {
    left: 8px;
    top: 8px;
    width: 29px;
    height: 29px;
    min-height: 29px;
  }
}

/* Final overrides: a long editing canvas must not be clipped by kiosk screen rules. */
.screen-layer.page-layout-editor-active {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  bottom: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
}

.screen-layer.page-layout-editor-active .screen-shell,
.screen-layer.page-layout-editor-active .splash-screen {
  height: 100dvh !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.screen-layer.page-layout-editor-active .screen-grid,
.screen-layer.page-layout-editor-active .screen-content {
  overflow: visible !important;
}

.page-layout-editor-active .page-layout-target {
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
}

.page-layout-editor-active .page-layout-target.is-layout-resized-width {
  justify-self: start !important;
}

.page-layout-editor-active .page-layout-target.is-layout-resized-height {
  align-self: start !important;
}

/* Preserve the kiosk grid while composing. Moved blocks use relative offsets. */
.page-layout-editor-active .menu-grid,
.page-layout-editor-active .doctors-grid,
.page-layout-editor-active .works-grid,
.page-layout-editor-active .promo-grid,
.page-layout-editor-active .services-grid,
.page-layout-editor-active .reviews-grid,
.page-layout-editor-active .clients-grid,
.page-layout-editor-active .documents-grid,
.page-layout-editor-active .contacts-grid {
  overflow: visible !important;
}

.page-layout-editor-active .menu-tile.is-layout-resized-height,
.page-layout-editor-active .doctor-card.is-layout-resized-height,
.page-layout-editor-active .service-panel.is-layout-resized-height,
.page-layout-editor-active .review-card.is-layout-resized-height,
.page-layout-editor-active .client-story.is-layout-resized-height,
.page-layout-editor-active .documents-hub-card.is-layout-resized-height,
.page-layout-editor-active .contact-card.is-layout-resized-height {
  min-height: 0 !important;
}

/* Free blocks never participate in the kiosk grid, so they cannot move sibling cards. */
.page-layout-free-canvas {
  position: absolute;
  z-index: 45;
  inset: 0 auto auto 0;
  width: 100%;
  min-height: max(100dvh, var(--page-layout-canvas-height, 620px));
  overflow: visible !important;
  pointer-events: none;
}

.page-layout-free-canvas .layout-custom-card--free {
  position: absolute !important;
  left: var(--page-layout-x, 0px) !important;
  top: var(--page-layout-y, 0px) !important;
  margin: 0 !important;
  pointer-events: auto;
}

.page-layout-free-canvas .layout-custom-card--free.is-layout-resized-width {
  justify-self: auto !important;
}

.page-layout-free-canvas .layout-custom-card--free.is-layout-resized-height {
  align-self: auto !important;
}

/* A narrow screen never reuses desktop offsets. Normal-flow cards stack in
   reading order, while free blocks retain their width-relative coordinates. */
@media (max-width: 820px) {
  .page-layout-target:not(.layout-custom-card--free) {
    left: 0 !important;
    top: 0 !important;
    max-width: 100% !important;
  }

  .page-layout-target:not(.layout-custom-card--free).is-layout-resized-width {
    width: 100% !important;
  }

  .page-layout-target:not(.layout-custom-card--free).is-layout-resized-height {
    height: auto !important;
  }

  .page-layout-free-canvas .layout-custom-card--free {
    max-width: 100% !important;
  }
}

.layout-custom-page-empty {
  display: grid;
  min-height: 180px;
  place-items: center;
  padding: 28px;
  border: 1px dashed color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius: 14px;
  color: var(--muted);
  text-align: center;
}

.page-layout-editor-active .page-layout-handle {
  z-index: 80;
}

.page-layout-editor-active .page-layout-handle > .page-layout-handle__resize:last-child {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 20%, #151a1d);
}

.layout-custom-card__url {
  display: none;
}

.page-layout-editor-active .layout-custom-card__url {
  display: block;
}

.page-layout-editor-active .layout-custom-card--video {
  min-height: 228px;
}

.layout-custom-card__image {
  display: block;
  width: 100%;
  min-height: 116px;
  max-height: 300px;
  border-radius: 11px;
  object-fit: var(--site-block-media-fit, cover);
  object-position: var(--site-block-media-position, center);
}

.page-layout-media-overlay > div {
  width: min(340px, calc(100vw - 42px));
}

.page-layout-media-progress {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 18%, transparent);
}

.page-layout-media-progress i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--theme-glow) 72%, white));
  transition: width 180ms ease;
}

.page-layout-target.has-layout-link {
  cursor: pointer;
}

@keyframes layout-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes layout-scale-in {
  from { opacity: 0; scale: 0.96; }
  to { opacity: 1; scale: 1; }
}

.page-layout-target[data-layout-animation="fade"] {
  animation: layout-fade-in 360ms ease-out both;
}

.page-layout-target[data-layout-animation="scale"] {
  animation: layout-scale-in 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.page-layout-link-editor {
  position: absolute;
  z-index: 110;
  top: calc(100% + 12px);
  right: 0;
  display: grid;
  gap: 7px;
  width: min(300px, calc(100vw - 28px));
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--gold) 62%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--glass-strong) 94%, white);
  box-shadow: 0 16px 38px rgba(5, 18, 25, 0.24);
  color: var(--heading);
  backdrop-filter: blur(16px);
}

.page-layout-link-editor--floating {
  position: fixed;
  z-index: 190;
}

.page-layout-link-editor label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.page-layout-link-editor label:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: 7px;
}

.page-layout-link-editor input[type="url"] {
  width: 100%;
  min-height: 34px;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--heading) 18%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--glass) 78%, white);
  color: var(--heading);
  font: inherit;
}

.page-layout-link-editor button {
  min-height: 31px;
  border: 1px solid color-mix(in srgb, var(--gold) 54%, transparent);
  border-radius: 8px;
  background: transparent;
  color: var(--heading);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
}

/* Local project catalog: each project keeps its own content and page layouts. */
.admin-sites-modal {
  position: fixed;
  z-index: 220;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8, 17, 22, 0.42);
  backdrop-filter: blur(16px);
}

.runtime-update-modal {
  position: fixed;
  z-index: 520;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgb(8 17 22 / 54%);
  backdrop-filter: blur(16px);
}

.runtime-update-panel {
  width: min(700px, 100%);
  max-height: min(760px, calc(100dvh - 48px));
  overflow: auto;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid color-mix(in srgb, var(--gold) 38%, rgba(255, 255, 255, 0.72));
  border-radius: 12px;
  background: color-mix(in srgb, var(--glass-strong) 94%, white);
  color: var(--heading);
  box-shadow: 0 28px 80px rgb(4 15 22 / 34%);
}

.runtime-update-panel__head,
.runtime-update-panel__actions,
.runtime-update-preview > div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.runtime-update-panel__head p,
.runtime-update-panel__head h2,
.runtime-update-panel__lead,
.runtime-update-preview p,
.runtime-update-panel__notice p,
.runtime-update-error p { margin: 0; }
.runtime-update-panel__head p { color: var(--muted); font-size: 0.75rem; font-weight: 820; letter-spacing: 0.1em; text-transform: uppercase; }
.runtime-update-panel__head h2 { margin-top: 5px; font-size: clamp(1.5rem, 4vw, 2.1rem); }
.runtime-update-panel__head button { width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: var(--heading); font-size: 1.35rem; cursor: pointer; }
.runtime-update-panel__lead { margin-top: 16px; color: var(--muted); line-height: 1.5; }
.runtime-update-panel__source { display: grid; gap: 7px; margin-top: 20px; color: var(--heading); font-size: 0.83rem; font-weight: 760; }
.runtime-update-panel__source input { min-height: 42px; border: 1px solid color-mix(in srgb, var(--heading) 18%, transparent); border-radius: 7px; background: white; color: #17222a; padding: 0 11px; font: inherit; }
.runtime-update-panel__source small { color: var(--muted); font-weight: 560; line-height: 1.35; }
.runtime-update-panel__picker { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.runtime-update-panel__picker button { min-height: 36px; border: 1px solid color-mix(in srgb, var(--heading) 20%, transparent); border-radius: 7px; background: color-mix(in srgb, var(--surface-tint) 76%, white); color: var(--heading); padding: 0 12px; font: 760 0.8rem/1 Inter, ui-sans-serif, system-ui, sans-serif; cursor: pointer; }
.runtime-update-panel__picker button:disabled { cursor: wait; opacity: 0.5; }
.runtime-update-panel__picker span { color: var(--muted); font-size: 0.78rem; }
.runtime-update-panel__actions { justify-content: flex-start; margin-top: 16px; }
.runtime-update-panel__actions button,
.runtime-update-panel__actions a,
.runtime-update-error button { min-height: 38px; border: 0; border-radius: 7px; background: #172a38; color: white; padding: 0 13px; font: 760 0.82rem/1 Inter, ui-sans-serif, system-ui, sans-serif; cursor: pointer; }
.runtime-update-panel__actions a { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.runtime-update-panel__actions button:disabled { cursor: wait; opacity: 0.46; }
.runtime-update-panel__actions .runtime-update-panel__apply { background: #1d6ed5; }
.runtime-update-panel__notice { display: grid; gap: 7px; margin: 16px 0 0; padding: 13px; border: 1px solid rgb(198 132 27 / 42%); border-radius: 7px; background: rgb(198 132 27 / 9%); color: var(--heading); }
.runtime-update-panel__notice strong { color: #8b5200; font-size: 0.85rem; }
.runtime-update-panel__notice p { color: var(--ink); font-size: 0.82rem; line-height: 1.45; }
.runtime-update-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 18px 0 0;
}
.runtime-update-facts > div {
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--heading) 12%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface-tint) 62%, white);
}
.runtime-update-facts dt { color: var(--muted); font-size: 0.71rem; font-weight: 700; }
.runtime-update-facts dd { margin: 4px 0 0; color: var(--heading); font-size: 0.88rem; font-weight: 780; }
.runtime-update-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 9px;
  margin-top: 14px;
  color: var(--heading);
  font-size: 0.82rem;
  font-weight: 720;
}
.runtime-update-progress > span { grid-column: 1 / -1; }
.runtime-update-progress > div {
  height: 8px;
  overflow: hidden;
  border-radius: 4px;
  background: color-mix(in srgb, #1d6ed5 16%, transparent);
}
.runtime-update-progress > div i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #1d6ed5;
  transition: width 180ms ease;
}
.runtime-update-progress output { color: var(--muted); font-variant-numeric: tabular-nums; }
.runtime-update-progress small { grid-column: 1 / -1; color: var(--muted); font-size: 0.76rem; }
.runtime-update-settings {
  margin-top: 16px;
  padding: 12px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--heading) 12%, transparent);
  color: var(--heading);
}
.runtime-update-settings summary { cursor: pointer; font-size: 0.84rem; font-weight: 760; }
.runtime-update-settings > div { display: grid; gap: 10px; margin-top: 12px; }
.runtime-update-settings label { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 0.81rem; }
.runtime-update-settings label:last-child { justify-content: space-between; }
.runtime-update-settings input { accent-color: #1d6ed5; }
.runtime-update-settings select { min-height: 30px; border: 1px solid color-mix(in srgb, var(--heading) 18%, transparent); border-radius: 6px; background: white; color: #17222a; padding: 0 7px; font: inherit; }
.runtime-update-preview,
.runtime-update-error { display: grid; gap: 11px; margin-top: 20px; padding: 16px; border: 1px solid color-mix(in srgb, var(--heading) 13%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--surface-tint) 58%, white); }
.runtime-update-preview small { color: var(--muted); font-size: 0.76rem; }
.runtime-update-preview h3 { margin: 2px 0 0; font-size: 0.94rem; }
.runtime-update-preview ul { display: grid; gap: 8px; margin: 0; padding-left: 20px; }
.runtime-update-preview li { display: grid; gap: 3px; color: var(--ink); font-size: 0.84rem; line-height: 1.4; }
.runtime-update-preview li span { color: var(--muted); }
.runtime-update-preview details { color: var(--muted); font-size: 0.82rem; }
.runtime-update-preview code { overflow-wrap: anywhere; color: var(--heading); }
.runtime-update-download-details { display: grid; gap: 9px; padding: 12px; border: 1px solid color-mix(in srgb, #1d6ed5 20%, transparent); border-radius: 7px; background: rgb(29 110 213 / 6%); }
.runtime-update-download-details h3 { margin: 0; }
.runtime-update-download-details dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.runtime-update-download-details dl > div { min-width: 0; }
.runtime-update-download-details dt { color: var(--muted); font-size: 0.7rem; font-weight: 700; }
.runtime-update-download-details dd { margin: 3px 0 0; overflow-wrap: anywhere; color: var(--heading); font-size: 0.8rem; font-weight: 760; }
.runtime-update-download-details details { margin-top: 1px; }
.runtime-update-download-details summary { cursor: pointer; font-weight: 720; }
.runtime-update-download-details details code { display: block; margin-top: 8px; font-size: 0.72rem; }
.runtime-update-flow { display: grid; gap: 12px; margin-top: 20px; padding: 16px; border: 1px solid color-mix(in srgb, var(--heading) 13%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--surface-tint) 58%, white); }
.runtime-update-flow h3, .runtime-update-flow p { margin: 0; }
.runtime-update-flow h3 { font-size: 0.96rem; }
.runtime-update-flow p { margin-top: 4px; color: var(--muted); font-size: 0.81rem; line-height: 1.45; }
.runtime-update-flow ol { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.runtime-update-flow li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 9px; align-items: start; color: var(--muted); }
.runtime-update-flow li > b { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid color-mix(in srgb, var(--heading) 18%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--surface-tint) 68%, white); color: var(--muted); font-size: 0.73rem; }
.runtime-update-flow li > span { display: grid; gap: 2px; min-width: 0; }
.runtime-update-flow li strong { color: var(--heading); font-size: 0.84rem; }
.runtime-update-flow li small { color: inherit; font-size: 0.77rem; line-height: 1.35; }
.runtime-update-flow li[data-state="complete"] > b { border-color: #23824c; background: #23824c; color: white; }
.runtime-update-flow li[data-state="current"] > b { border-color: #1d6ed5; background: #1d6ed5; color: white; box-shadow: 0 0 0 4px rgb(29 110 213 / 12%); }
.runtime-update-flow li[data-state="current"] strong { color: #1259b5; }
.runtime-update-progress p { grid-column: 1 / -1; margin: 0; color: #176239; font-size: 0.79rem; line-height: 1.4; }
.runtime-update-error { border-color: rgb(180 48 60 / 35%); background: rgb(180 48 60 / 7%); }
.runtime-update-error strong { color: #a32334; }
.runtime-update-error code { width: fit-content; border-radius: 4px; background: rgb(163 35 52 / 11%); color: #8d1a2b; padding: 4px 6px; }
.runtime-update-error pre { max-width: 100%; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted); font: 0.75rem/1.4 ui-monospace, monospace; }

@media (max-width: 620px) {
  .runtime-update-modal { padding: 10px; }
  .runtime-update-panel { max-height: calc(100dvh - 20px); padding: 18px; }
  .runtime-update-panel__actions button { flex: 1 1 190px; }
  .runtime-update-facts { grid-template-columns: 1fr; }
  .runtime-update-download-details dl { grid-template-columns: 1fr; }
}

.admin-sites-panel {
  width: min(920px, 100%);
  max-height: min(780px, calc(100dvh - 48px));
  overflow: auto;
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid color-mix(in srgb, var(--gold) 32%, rgba(255, 255, 255, 0.72));
  border-radius: 22px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--glass-strong) 92%, white), color-mix(in srgb, var(--surface-tint) 88%, white));
  color: var(--heading);
  box-shadow: 0 28px 80px rgba(4, 15, 22, 0.3);
}

.admin-sites-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.admin-sites-panel__head p,
.admin-sites-panel__head h2,
.admin-sites-panel__lead {
  margin: 0;
}

.admin-sites-panel__head p {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 820;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.admin-sites-panel__head h2 {
  margin-top: 5px;
  font-size: clamp(1.7rem, 4vw, 2.45rem);
}

.admin-sites-close {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--heading) 15%, transparent);
  border-radius: 50%;
  background: transparent;
  color: var(--heading);
  font-size: 1.35rem;
}

.admin-sites-panel__lead {
  max-width: 670px;
  margin-top: 15px;
  color: var(--muted);
  line-height: 1.5;
}

.admin-sites-create {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  margin: 24px 0;
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--gold) 24%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--glass) 72%, white);
}

.admin-sites-create label {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 780;
}

.admin-sites-create input {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--heading) 16%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--glass-strong) 82%, white);
  color: var(--heading);
  font: inherit;
}

.admin-sites-create__button,
.admin-site-card__actions button {
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, var(--gold) 46%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--gold) 18%, var(--glass-strong));
  color: var(--heading);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 820;
}

.admin-sites-create__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
  align-items: stretch;
  gap: 8px;
}

.admin-sites-template-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 9px;
}

.admin-sites-template {
  display: grid;
  align-content: start;
  min-width: 0;
  min-height: 154px;
  gap: 6px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--heading) 14%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--glass-strong) 86%, white);
}

.admin-sites-template.is-vpn {
  border-color: color-mix(in srgb, var(--theme-glow) 62%, var(--gold));
  background: color-mix(in srgb, var(--theme-glow) 10%, var(--glass-strong));
}

.admin-sites-template strong { color: var(--heading); font-size: 0.82rem; }
.admin-sites-template span { color: var(--muted); font-size: 0.71rem; line-height: 1.35; }
.admin-sites-template small { color: color-mix(in srgb, var(--heading) 72%, var(--muted)); font-size: 0.66rem; font-weight: 700; }

.admin-sites-template button {
  min-height: 34px;
  margin-top: auto;
  border: 1px solid color-mix(in srgb, var(--gold) 42%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--gold) 16%, var(--glass-strong));
  color: var(--heading);
  font: 800 0.72rem/1 Inter, ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}

.admin-sites-template button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--gold) 74%, transparent);
  background: color-mix(in srgb, var(--gold) 28%, var(--glass-strong));
}

.admin-sites-create__button--vpn {
  border-color: color-mix(in srgb, var(--theme-glow) 68%, var(--gold));
  background: color-mix(in srgb, var(--theme-glow) 20%, var(--glass-strong));
}

.admin-sites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 12px;
}

.admin-site-card {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--heading) 12%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--glass) 78%, white);
}

.admin-site-card.is-active {
  border-color: color-mix(in srgb, var(--gold) 72%, white);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 20%, transparent), 0 12px 28px color-mix(in srgb, var(--theme-glow) 28%, transparent);
}

.admin-site-card__meta,
.admin-site-card small {
  color: var(--muted);
  font-size: 0.74rem;
}

.admin-site-card__publish-status {
  min-height: 1.2em;
  overflow-wrap: anywhere;
}

.admin-site-card__publish-status.is-current {
  color: color-mix(in srgb, #0f7b58 76%, var(--heading));
}

.admin-site-card__publish-status.is-pending {
  color: color-mix(in srgb, var(--gold) 84%, var(--heading));
  font-weight: 760;
}

.admin-site-card__meta {
  color: color-mix(in srgb, var(--gold) 78%, var(--heading));
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-site-card strong {
  overflow-wrap: anywhere;
  font-size: 1rem;
}

.admin-site-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 6px;
}

.admin-site-card__actions .is-danger {
  border-color: rgba(174, 50, 45, 0.34);
  color: #912f2c;
}

.admin-site-card__actions .admin-site-card__update {
  border-color: color-mix(in srgb, var(--gold) 78%, transparent);
  background: color-mix(in srgb, var(--gold) 16%, var(--glass));
  box-shadow: 0 7px 18px color-mix(in srgb, var(--theme-glow) 21%, transparent);
}

.screen-shell--builder-blank .screen-content {
  position: relative;
  display: grid;
  min-height: 0;
  align-content: center;
}

.layout-custom-page-empty--builder {
  align-content: center;
  justify-items: center;
  min-height: clamp(240px, 42vh, 420px);
  padding: clamp(26px, 5vw, 56px);
  border-style: solid;
  background: color-mix(in srgb, var(--glass) 56%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32), 0 18px 46px color-mix(in srgb, var(--theme-glow) 18%, transparent);
}

.layout-custom-page-empty--builder strong {
  color: var(--heading);
  font-size: clamp(1.35rem, 3vw, 2rem);
}

.layout-custom-page-empty--builder span {
  max-width: 520px;
  margin-top: 10px;
  line-height: 1.5;
}

/* A new generic project starts as an actual empty canvas, not as the clinic kiosk. */
.creator-boot-screen,
.creator-home-screen,
.blank-builder-canvas {
  min-height: 100dvh;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--line) 42%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in srgb, var(--line) 42%, transparent) 1px, transparent 1px),
    var(--theme-bg, var(--surface-tint, #f4f8fb));
  background-size:
    var(--page-layout-grid-step, 24px) var(--page-layout-grid-step, 24px),
    var(--page-layout-grid-step, 24px) var(--page-layout-grid-step, 24px),
    auto;
}

/* The creator controls live above the canvas and are never published as page content. */
.builder-editor-bar {
  position: fixed;
  z-index: 330;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  min-height: 56px;
  align-items: center;
  gap: 10px;
  padding: 8px clamp(12px, 2vw, 28px);
  border-bottom: 1px solid rgba(18, 28, 34, 0.14);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 22px rgba(18, 28, 34, 0.1);
  color: #11191d;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  backdrop-filter: blur(16px);
}

.builder-editor-bar__name {
  min-width: min(230px, 27vw);
}

.builder-editor-bar__name input {
  width: 100%;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #10171b;
  font: 760 0.98rem/1.2 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0;
  outline: none;
}

.builder-editor-bar__name input:hover,
.builder-editor-bar__name input:focus-visible {
  border-color: rgba(30, 90, 210, 0.34);
  background: rgba(234, 241, 255, 0.74);
  padding-inline: 8px;
}

.builder-editor-bar__history,
.builder-editor-bar__actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* The application menu contains commands, while the canvas remains free for
   the website itself. It is shared by the blank creator and existing sites. */
.creator-menu {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 1px;
  min-width: 0;
}

.creator-menu__group {
  position: relative;
}

.creator-menu__trigger,
.creator-menu__popover button {
  min-height: 32px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #1b292f;
  padding: 0 9px;
  font: 720 0.8rem/1 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0;
  cursor: pointer;
}

.creator-menu__trigger:hover,
.creator-menu__trigger:focus-visible,
.creator-menu__trigger.is-open {
  background: rgba(16, 92, 196, 0.1);
  color: #064eae;
  outline: none;
}

.creator-menu__popover {
  position: absolute;
  z-index: 340;
  top: calc(100% + 7px);
  left: 0;
  display: grid;
  min-width: 220px;
  padding: 6px;
  border: 1px solid rgba(18, 28, 34, 0.16);
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(12, 21, 26, 0.2);
}

.creator-menu__popover button {
  width: 100%;
  justify-content: start;
  text-align: left;
}

.creator-menu__popover button:hover,
.creator-menu__popover button:focus-visible {
  background: rgba(16, 92, 196, 0.1);
  color: #064eae;
  outline: none;
}

.creator-menu__popover .is-danger {
  color: #a32334;
}

.creator-menu__separator {
  height: 1px;
  margin: 5px 3px;
  background: rgba(18, 28, 34, 0.13);
}

.creator-menu__version {
  padding: 8px 9px 7px;
  color: #63737d;
  font: 700 0.74rem/1.35 Inter, ui-sans-serif, system-ui, sans-serif;
}

.creator-menu__update-badge {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 5px 1px 0;
  border-radius: 50%;
  background: #2f80ed;
  box-shadow: 0 0 0 2px rgb(47 128 237 / 18%), 0 0 10px rgb(47 128 237 / 72%);
  vertical-align: middle;
}

.creator-menu__trigger .creator-menu__update-badge {
  margin-left: 5px;
  margin-right: 0;
}

.creator-menu__update-status {
  display: flex;
  align-items: center;
  gap: 6px;
}

.creator-menu__update-status.is-checking {
  color: #60717a;
}

.creator-menu__update-status.is-latest {
  color: #126bc5;
}

.creator-menu__update-status.is-error {
  color: #a32334;
}

.creator-menu__update-command {
  color: #0b5eb8 !important;
  font-weight: 800 !important;
}

.creator-help-modal {
  position: fixed;
  z-index: 560;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgb(8 15 19 / 58%);
  backdrop-filter: blur(7px);
}

.creator-help-center {
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  width: min(1180px, 100%);
  max-height: min(820px, calc(100dvh - 48px));
  overflow: hidden;
  border: 1px solid rgb(36 57 66 / 35%);
  border-radius: 8px;
  background: #f8fafb;
  box-shadow: 0 28px 80px rgb(0 0 0 / 34%);
  color: #17242a;
}

.creator-help-center__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 8px;
}

.creator-help-center__head p,
.creator-help-center__head h2,
.creator-help-center__lead,
.creator-help-center__article h3,
.creator-help-center__article h4,
.creator-help-center__article p,
.creator-help-center__empty h3,
.creator-help-center__empty p {
  margin: 0;
}

.creator-help-center__head p,
.creator-help-center__eyebrow {
  color: #55717f;
  font: 800 0.72rem/1.2 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.creator-help-center__head h2 {
  margin-top: 5px;
  font: 780 clamp(1.35rem, 3vw, 1.9rem)/1.1 Inter, ui-sans-serif, system-ui, sans-serif;
}

.creator-help-center__head > button {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #40555f;
  font: 400 1.55rem/1 Inter, ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}

.creator-help-center__head > button:hover,
.creator-help-center__head > button:focus-visible {
  background: #e6edf0;
  color: #0e4d83;
  outline: none;
}

.creator-help-center__lead {
  max-width: 900px;
  padding: 0 24px;
  color: #58707b;
  font-size: 0.87rem;
  line-height: 1.5;
}

.creator-help-center__search {
  display: grid;
  gap: 6px;
  padding: 16px 24px 12px;
  color: #35505b;
  font-size: 0.77rem;
  font-weight: 780;
}

.creator-help-center__search input {
  min-height: 40px;
  border: 1px solid #c9d7dc;
  border-radius: 6px;
  background: #fff;
  color: #15242a;
  padding: 0 12px;
  font: 500 0.9rem/1.2 Inter, ui-sans-serif, system-ui, sans-serif;
}

.creator-help-center__search input:focus {
  border-color: #2e77be;
  box-shadow: 0 0 0 3px rgb(46 119 190 / 15%);
  outline: none;
}

.creator-help-center__categories {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding: 0 24px 14px;
  scrollbar-width: thin;
}

.creator-help-center__categories button {
  min-height: 30px;
  flex: 0 0 auto;
  border: 1px solid #ccd9de;
  border-radius: 5px;
  background: #fff;
  color: #45616c;
  padding: 0 9px;
  font: 720 0.74rem/1 Inter, ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}

.creator-help-center__categories button span {
  margin-left: 4px;
  color: #78909a;
  font-variant-numeric: tabular-nums;
}

.creator-help-center__categories button:hover,
.creator-help-center__categories button:focus-visible,
.creator-help-center__categories button.is-active {
  border-color: #2772b7;
  background: #e8f2fa;
  color: #135489;
  outline: none;
}

.creator-help-center__body {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(245px, 0.76fr) minmax(0, 1.5fr);
  border-top: 1px solid #dbe4e7;
}

.creator-help-center__list {
  display: grid;
  align-content: start;
  gap: 4px;
  min-height: 0;
  overflow: auto;
  padding: 12px;
  border-right: 1px solid #dbe4e7;
  background: #f0f5f6;
}

.creator-help-center__list > p {
  margin: 8px;
  color: #5b717b;
  font-size: 0.84rem;
}

.creator-help-center__entry {
  display: grid;
  gap: 4px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #263d47;
  padding: 10px;
  text-align: left;
  cursor: pointer;
}

.creator-help-center__entry strong {
  font-size: 0.83rem;
  line-height: 1.25;
}

.creator-help-center__entry span {
  display: -webkit-box;
  overflow: hidden;
  color: #637984;
  font-size: 0.73rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.creator-help-center__entry:hover,
.creator-help-center__entry:focus-visible,
.creator-help-center__entry.is-active {
  border-color: #9bc2de;
  background: #fff;
  color: #0a578d;
  outline: none;
}

.creator-help-center__article,
.creator-help-center__empty {
  min-height: 0;
  overflow: auto;
  padding: 24px;
}

.creator-help-center__article h3,
.creator-help-center__empty h3 {
  margin-top: 5px;
  font: 760 1.32rem/1.2 Inter, ui-sans-serif, system-ui, sans-serif;
}

.creator-help-center__summary {
  margin-top: 12px !important;
  color: #45616d;
  font-size: 0.93rem;
  line-height: 1.55;
}

.creator-help-center__article h4 {
  margin-top: 24px;
  color: #193640;
  font-size: 0.89rem;
}

.creator-help-center__article ol,
.creator-help-center__article ul {
  display: grid;
  gap: 9px;
  margin: 10px 0 0;
  padding-left: 22px;
  color: #38545f;
  font-size: 0.87rem;
  line-height: 1.48;
}

.creator-help-center__configuration {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
}

.creator-help-center__configuration div {
  display: grid;
  grid-template-columns: minmax(130px, 0.32fr) minmax(0, 1fr);
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #dbe5e8;
  border-radius: 5px;
  background: #f7fafb;
}

.creator-help-center__configuration dt {
  color: #193640;
  font-weight: 750;
}

.creator-help-center__configuration dd {
  margin: 0;
  color: #49636d;
  font-size: 0.84rem;
  line-height: 1.45;
}

.creator-help-center__article pre {
  overflow: auto;
  margin: 10px 0 0;
  border-radius: 6px;
  background: #17242a;
  padding: 14px;
  color: #d9eff8;
  font: 0.76rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre-wrap;
}

.creator-help-center__empty p { margin-top: 8px; color: #5a737e; }

@media (max-width: 760px) {
  .creator-help-modal { place-items: stretch; padding: 8px; }
  .creator-help-center { max-height: calc(100dvh - 16px); }
  .creator-help-center__head { padding: 18px 16px 8px; }
  .creator-help-center__lead,
  .creator-help-center__search,
  .creator-help-center__categories { padding-left: 16px; padding-right: 16px; }
  .creator-help-center__body { grid-template-columns: 1fr; grid-template-rows: minmax(150px, 0.7fr) minmax(0, 1.3fr); }
  .creator-help-center__list { border-right: 0; border-bottom: 1px solid #dbe4e7; }
  .creator-help-center__article,
  .creator-help-center__empty { padding: 18px 16px; }
  .creator-help-center__configuration div { grid-template-columns: 1fr; gap: 4px; }
}

/* Final desktop editor chrome: the site itself stays a clean canvas. */
body:has(.creator-window-chrome) .builder-editor-bar {
  display: none !important;
}

body:has(.creator-window-chrome) #root,
body:has(.creator-window-chrome):has(.builder-editor-bar) #root,
body:has(.creator-window-chrome):has(.builder-editor-bar):has(.page-layout-toolbar.is-editing) #root {
  padding-top: 32px !important;
}

body:has(.creator-window-chrome) .kiosk-app,
body:has(.creator-window-chrome):has(.page-layout-toolbar.is-editing) .kiosk-app,
body:has(.creator-window-chrome):has(.builder-editor-bar):has(.page-layout-toolbar.is-editing) .kiosk-app {
  height: calc(100dvh - 32px) !important;
  margin-top: 0 !important;
}

.creator-window-chrome {
  gap: 3px;
  padding: 0 8px;
  overflow: visible;
}

.creator-window-chrome .creator-menu {
  display: flex;
  flex: 0 0 auto;
  gap: 0;
}

.creator-window-chrome .creator-menu__trigger {
  min-height: 28px;
  padding: 0 5px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.67rem;
  font-weight: 400;
  letter-spacing: 0;
}

.creator-window-chrome .creator-menu__trigger:hover,
.creator-window-chrome .creator-menu__trigger[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.creator-window-chrome > .page-layout-toolbar.is-editing {
  position: static;
  z-index: auto;
  display: block;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__top {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 1px;
  flex-wrap: nowrap;
}

.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__group,
.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__history {
  position: relative;
  flex: 0 0 auto;
}

.creator-window-chrome > .page-layout-toolbar.is-editing button {
  min-height: 28px;
  padding: 0 5px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.65rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.creator-window-chrome > .page-layout-toolbar.is-editing button:hover:not(:disabled),
.creator-window-chrome > .page-layout-toolbar.is-editing button.is-open,
.creator-window-chrome > .page-layout-toolbar.is-editing button.is-active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.creator-window-chrome > .page-layout-toolbar.is-editing button:disabled {
  color: rgba(255, 255, 255, 0.34);
}

.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__menu-trigger span {
  display: none;
}

.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__popover {
  position: fixed;
  z-index: 1100;
  top: 36px;
  left: 8px;
  width: min(520px, calc(100vw - 16px));
  max-height: min(74vh, 760px);
  overflow: auto;
  border-radius: 0 0 8px 8px;
}

@media (max-width: 1180px) {
  .creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__top {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__top::-webkit-scrollbar {
    display: none;
  }
}

/* This is the program chrome, not website content. It occupies Electron's
   title-bar overlay and leaves the page below it free for the actual site. */
.creator-window-chrome {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  height: 32px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  background: #252525;
  color: #f2f2f2;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  -webkit-app-region: drag;
}

.creator-window-chrome > img,
.creator-window-chrome .creator-menu,
.creator-window-chrome button {
  -webkit-app-region: no-drag;
}

.creator-window-chrome > img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.creator-window-chrome .creator-menu__trigger {
  min-height: 28px;
  color: #efefef;
  font-size: 0.76rem;
  font-weight: 650;
}

.creator-window-chrome .creator-menu__trigger:hover,
.creator-window-chrome .creator-menu__trigger:focus-visible,
.creator-window-chrome .creator-menu__trigger.is-open {
  background: #3a3a3a;
  color: #fff;
}

.creator-window-chrome .creator-menu__popover {
  top: 31px;
  border-color: rgba(255, 255, 255, 0.16);
  background: #182128;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.38);
}

.creator-window-chrome .creator-menu__popover button {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 500;
}

.creator-window-chrome .creator-menu__popover button:hover,
.creator-window-chrome .creator-menu__popover button:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.creator-window-chrome .creator-menu__popover .creator-menu__separator {
  background: rgba(255, 255, 255, 0.15);
}

.creator-window-chrome .creator-menu__popover .creator-menu__version {
  color: rgba(255, 255, 255, 0.64);
}

.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__popover {
  border-color: rgba(255, 255, 255, 0.16);
  background: #182128;
  color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.4);
}

.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__popover-title,
.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__popover small,
.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__popover label,
.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__popover output {
  color: rgba(255, 255, 255, 0.72);
}

/* Preset names previously inherited --heading from the edited website. On a
   dark editor panel that can be nearly black, so keep this program library
   on a stable high-contrast palette. */
.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__preset-grid--grainient button > span {
  color: #f2f6f8 !important;
  text-shadow: none !important;
}

.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__preset-grid--grainient button > small {
  color: #b9c7ce !important;
  text-shadow: none !important;
}

/* Older floating-toolbar rules use a light surface. In the desktop creator
   this toolbar is part of the dark title row, so never inherit that surface. */
.creator-window-chrome > .page-layout-toolbar.is-editing,
.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__top {
  background: #252525 !important;
}

.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__save {
  background: #e8bb5b !important;
  color: #182128 !important;
  font-weight: 700;
}

.creator-window-chrome > .page-layout-toolbar.is-editing .page-layout-toolbar__close {
  color: rgba(255, 255, 255, 0.92) !important;
}

body:has(.creator-window-chrome) #root {
  box-sizing: border-box;
  padding-top: 32px;
}

body:has(.creator-window-chrome) .builder-editor-bar {
  top: 32px;
}

body:has(.creator-window-chrome):has(.builder-editor-bar) #root {
  padding-top: 88px;
}

body:has(.creator-window-chrome):has(.builder-editor-bar) .blank-builder-canvas {
  min-height: calc(100dvh - 88px);
}

body:has(.creator-window-chrome):has(.builder-editor-bar):has(.page-layout-toolbar.is-editing) #root {
  padding-top: 208px;
}

.admin-bar--inline .creator-menu {
  position: fixed;
  z-index: 330;
  top: 10px;
  left: 12px;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--heading) 14%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--glass-strong) 90%, white);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--theme-glow) 18%, transparent);
}

.admin-bar--inline .creator-menu__popover {
  background: color-mix(in srgb, var(--glass-strong) 94%, white);
}

.builder-editor-bar button {
  min-height: 34px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #1b292f;
  padding: 0 9px;
  font: 720 0.8rem/1 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0;
  cursor: pointer;
}

.builder-editor-bar button:hover,
.builder-editor-bar button:focus-visible {
  background: rgba(16, 92, 196, 0.1);
  color: #064eae;
  outline: none;
}

.builder-editor-bar button:disabled {
  cursor: not-allowed;
  opacity: 0.34;
}

.builder-editor-bar__saved {
  margin: 0 auto 0 4px;
  color: #28724f;
  font-size: 0.72rem;
  font-weight: 690;
  line-height: 1.2;
  white-space: nowrap;
}

.builder-editor-bar__actions {
  position: relative;
  flex: 0 0 auto;
}

.builder-editor-bar__icon {
  display: grid;
  width: 34px;
  padding: 0 !important;
  place-items: center;
  font-size: 1.08rem !important;
}

.builder-editor-bar__publish {
  background: #1b65d8 !important;
  color: #fff !important;
  padding-inline: 13px !important;
}

.builder-editor-bar__publish:hover,
.builder-editor-bar__publish:focus-visible {
  background: #1252b8 !important;
  color: #fff !important;
}

.builder-editor-bar__share {
  border: 1px solid rgba(20, 61, 128, 0.24) !important;
}

.builder-editor-bar__menu {
  position: absolute;
  z-index: 2;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  min-width: 190px;
  gap: 3px;
  padding: 7px;
  border: 1px solid rgba(18, 28, 34, 0.16);
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(12, 21, 26, 0.2);
}

.builder-editor-bar__menu button {
  justify-content: start;
  text-align: left;
}

.builder-editor-bar__menu .is-danger {
  color: #a32334;
}

body:has(.builder-editor-bar) #root {
  box-sizing: border-box;
  padding-top: 56px;
}

body:has(.builder-editor-bar) .blank-builder-canvas {
  min-height: calc(100dvh - 56px);
}

body:has(.page-layout-toolbar.is-editing) .builder-editor-bar {
  display: flex;
  z-index: 330;
}

/* The composer belongs above the screen. Keep the page below both toolbar
   rows, so controls never hide or become part of the site itself. */
body:has(.page-layout-toolbar.is-editing) .kiosk-app {
  height: calc(100dvh - 118px);
  margin-top: 118px;
}

body:has(.builder-editor-bar):has(.page-layout-toolbar.is-editing) #root {
  padding-top: 176px;
}

body:has(.builder-editor-bar):has(.page-layout-toolbar.is-editing) .kiosk-app {
  height: calc(100dvh - 176px);
  margin-top: 0;
}

body:has(.builder-editor-bar) .page-layout-toolbar.is-editing {
  top: 64px;
}

@media (max-width: 680px) {
  body:has(.page-layout-toolbar.is-editing) .kiosk-app {
    height: calc(100dvh - 110px);
    margin-top: 110px;
  }

  body:has(.builder-editor-bar):has(.page-layout-toolbar.is-editing) #root {
    padding-top: 166px;
  }

  body:has(.builder-editor-bar):has(.page-layout-toolbar.is-editing) .kiosk-app {
    height: calc(100dvh - 166px);
    margin-top: 0;
  }

  body:has(.builder-editor-bar) .page-layout-toolbar.is-editing {
    top: 54px;
  }

  .page-layout-toolbar.is-editing .page-layout-toolbar__popover {
    top: 110px;
    max-height: calc(100dvh - 122px);
  }

  body:has(.builder-editor-bar) .page-layout-toolbar.is-editing .page-layout-toolbar__popover {
    top: 166px;
    max-height: calc(100dvh - 178px);
  }
}

@media (max-width: 900px) {
  .builder-editor-bar {
    gap: 5px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .builder-editor-bar::-webkit-scrollbar {
    display: none;
  }

  .builder-editor-bar__saved {
    display: none;
  }

  .builder-editor-bar__name {
    min-width: 180px;
  }
}

@media (max-width: 620px) {
  .builder-editor-bar {
    min-height: 52px;
    padding-inline: 8px;
  }

  .builder-editor-bar__name {
    min-width: 142px;
  }

  .builder-editor-bar__actions > button:not(.builder-editor-bar__icon):not(.builder-editor-bar__publish) {
    font-size: 0;
    width: 34px;
    padding: 0 !important;
  }

  .builder-editor-bar__actions > button[data-builder-insert]::after { content: "+"; font-size: 1.2rem; }
  .builder-editor-bar__actions > button[data-builder-pages]::after { content: "▤"; font-size: 1rem; }
  .builder-editor-bar__actions > button[data-builder-themes]::after { content: "◌"; font-size: 1.15rem; }
  .builder-editor-bar__actions > button[data-builder-share]::after { content: "+"; font-size: 1.2rem; }
  .builder-editor-bar__publish { width: auto !important; font-size: 0.72rem !important; }
}

.blank-builder-canvas {
  position: relative;
  overflow: hidden;
}

.screen-layer.page-layout-grid-hidden .blank-builder-canvas {
  background-image: none;
  background-color: var(--theme-bg, var(--surface-tint, #f4f8fb));
}

.screen-layer.page-layout-grid-dots .blank-builder-canvas {
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--line) 66%, transparent) 1.1px, transparent 1.25px),
    var(--theme-bg, var(--surface-tint, #f4f8fb));
  background-size: var(--page-layout-grid-step, 16px) var(--page-layout-grid-step, 16px), auto;
}

.screen-layer.page-layout-grid-blueprint .blank-builder-canvas {
  background-image:
    linear-gradient(90deg, color-mix(in srgb, #67cfff 38%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, #67cfff 38%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--gold) 38%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--gold) 38%, transparent) 1px, transparent 1px),
    var(--theme-bg, var(--surface-tint, #f4f8fb));
  background-size:
    var(--page-layout-grid-step, 16px) var(--page-layout-grid-step, 16px),
    var(--page-layout-grid-step, 16px) var(--page-layout-grid-step, 16px),
    var(--page-layout-grid-major-step, 64px) var(--page-layout-grid-major-step, 64px),
    var(--page-layout-grid-major-step, 64px) var(--page-layout-grid-major-step, 64px),
    auto;
}

.screen-layer.page-layout-editor-active .blank-builder-canvas {
  background: var(--theme-bg, var(--surface-tint, #f4f8fb));
}

.blank-builder-canvas__content {
  display: block;
  min-height: 100dvh;
}

.builder-admin-entry {
  min-height: 42px;
  margin-top: 22px;
  padding: 0 15px;
  border: 1px solid color-mix(in srgb, var(--gold) 62%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--gold) 18%, var(--glass-strong));
  color: var(--heading);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 820;
}

@media (max-width: 620px) {
  .admin-sites-modal {
    padding: 12px;
  }

  .admin-sites-panel {
    max-height: calc(100dvh - 24px);
    padding: 18px;
    border-radius: 18px;
  }

  .admin-sites-create__button {
    width: 100%;
  }

  .admin-sites-create__actions {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Reusable local-site blocks. They share the kiosk theme but store independent data per project. */
.layout-custom-card--contact,
.layout-custom-card--location,
.layout-custom-card--rating,
.layout-custom-card--review,
.layout-custom-card--gallery,
.layout-custom-card--navigation,
.layout-custom-card--hero,
.layout-custom-card--menu,
.layout-custom-card--doctor,
.layout-custom-card--service,
.layout-custom-card--document,
.layout-custom-card--training,
.layout-custom-card--client,
.layout-custom-card--divider,
.layout-custom-card--themeSwitch,
.layout-custom-card--smoke {
  isolation: isolate;
  overflow: hidden;
}

.layout-custom-card--smoke {
  padding: 0;
  border-color: color-mix(in srgb, var(--theme-glow) 58%, var(--card-border));
  background: #08102b;
}

.site-block-smoke {
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--site-smoke-color) 38%, transparent), transparent 42%),
    radial-gradient(circle at 82% 78%, color-mix(in srgb, var(--site-smoke-accent) 32%, transparent), transparent 48%),
    #08102b;
}

.site-block-smoke__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.site-block-smoke__content {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: end;
  gap: 12px;
  min-width: 0;
  min-height: 100%;
  padding: clamp(16px, 2.6vw, 30px);
  background: linear-gradient(180deg, transparent 28%, rgb(5 10 29 / 68%) 100%);
}

.site-block-smoke .site-block-text-surface,
.site-block-smoke .site-block-text-surface .layout-custom-card__title,
.site-block-smoke .site-block-text-surface .layout-custom-card__subtitle {
  color: var(--site-block-text, #f7fbff);
}

.site-block-smoke__hint {
  max-width: 100%;
  color: rgb(239 248 255 / 82%);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* A self-contained visual studio for interactive Canvas scenes. */
.layout-custom-card--threeScene {
  padding: 0;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--theme-glow) 64%, var(--card-border));
  background: #05091d;
}

.site-block-three-scene {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
  isolation: isolate;
  background: #05091d;
}

.site-block-three-scene__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.site-block-three-scene__content {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: end;
  gap: 10px;
  min-width: 0;
  min-height: 100%;
  padding: clamp(16px, 2.6vw, 30px);
  background: linear-gradient(180deg, transparent 28%, rgb(2 6 23 / 76%) 100%);
}

.site-block-three-scene .site-block-text-surface,
.site-block-three-scene .layout-custom-card__title,
.site-block-three-scene .layout-custom-card__subtitle,
.site-block-three-scene__hint {
  color: #f7f9ff;
}

.site-block-three-scene__hint {
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.site-block-visual-background--waves {
  background:
    radial-gradient(ellipse at 18% 20%, rgb(83 224 255 / 22%), transparent 46%),
    radial-gradient(ellipse at 82% 74%, rgb(148 104 255 / 24%), transparent 52%),
    #030a1e;
}

.site-block-visual-background--fireworks {
  background:
    radial-gradient(ellipse at 50% 100%, rgb(41 83 142 / 28%), transparent 54%),
    radial-gradient(ellipse at 50% 0%, rgb(74 38 128 / 18%), transparent 46%),
    #020512;
}

.site-block-motion-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.site-block-visual-background__image {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Several effects can belong to one card. The wrapper owns the clipping area,
   while every child remains an independent renderer and can be removed or
   adjusted without changing the other layers. */
.layout-custom-card:has(> .site-block-card-visual-layers),
.site-card-shape-surface:has(> .site-block-card-visual-layers) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.site-block-card-visual-layers {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
}

.layout-custom-card:has(> .site-block-card-visual-layers) > :not(.site-block-card-visual-layers):not(.site-block-editor-tools):not(.site-block-anchor),
.site-card-shape-surface:has(> .site-block-card-visual-layers) > :not(.site-block-card-visual-layers) {
  position: relative;
  z-index: 1;
}

/* Visual effects are layers, not content cards. The editor may select their
   parent element, but the published site receives canvas only. */
.site-block-visual-background {
  --visual-theme-opacity: 0.84;
  --visual-theme-filter: saturate(1.08) brightness(1);
  --visual-theme-wash: linear-gradient(135deg, color-mix(in srgb, var(--aurora-1) 18%, transparent), color-mix(in srgb, var(--aurora-2) 10%, transparent) 52%, color-mix(in srgb, var(--aurora-3) 16%, transparent));
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 16% 12%, color-mix(in srgb, var(--aurora-1) 32%, transparent), transparent 48%),
    radial-gradient(ellipse at 84% 82%, color-mix(in srgb, var(--aurora-2) 26%, transparent), transparent 54%),
    var(--surface-tint);
}

/* A visual layer can be used as a small independent block. Feathering masks
   only its outer edge, so neighboring effects may blend without a hard box. */
.site-block-visual-background.has-edge-feather {
  -webkit-mask-image: radial-gradient(ellipse at center, #000 48%, #000 calc(100% - var(--site-effect-feather)), transparent 100%);
  mask-image: radial-gradient(ellipse at center, #000 48%, #000 calc(100% - var(--site-effect-feather)), transparent 100%);
}

.page-layout-toolbar__preset-grid--legacy-cursor,
.page-layout-toolbar__preset-grid--legacy-opening {
  display: none;
}

.site-block-visual-background--three {
  background:
    radial-gradient(ellipse at 50% 8%, color-mix(in srgb, var(--aurora-2) 26%, transparent), transparent 54%),
    var(--surface-tint);
}

/* This animated layer remains visible while the Canvas renderer starts and
   also serves as a graceful smoke fallback on browsers with a broken GPU. */
.site-block-visual-background--smoke::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -22%;
  opacity: 0.78;
  background:
    radial-gradient(ellipse 46% 42% at 24% 36%, color-mix(in srgb, var(--site-smoke-primary) 72%, transparent), transparent 74%),
    radial-gradient(ellipse 44% 48% at 76% 62%, color-mix(in srgb, var(--site-smoke-accent) 70%, transparent), transparent 76%),
    radial-gradient(ellipse 38% 40% at 52% 74%, color-mix(in srgb, var(--site-smoke-primary) 40%, transparent), transparent 78%);
  filter: blur(26px) saturate(1.22);
  transform: scale(1.08);
  animation: site-smoke-fallback-drift 11s ease-in-out infinite alternate;
  pointer-events: none;
}

.site-block-visual-background--smoke > canvas {
  position: relative;
  z-index: 1;
}

@keyframes site-smoke-fallback-drift {
  0% { transform: translate3d(-4%, -3%, 0) scale(1.08) rotate(-4deg); filter: blur(26px) saturate(1.14); }
  50% { transform: translate3d(4%, 2%, 0) scale(1.2) rotate(3deg); filter: blur(35px) saturate(1.35); }
  100% { transform: translate3d(-1%, 5%, 0) scale(1.12) rotate(-2deg); filter: blur(29px) saturate(1.22); }
}

.site-block-visual-background > canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: var(--visual-theme-opacity);
  filter: var(--visual-theme-filter);
  mix-blend-mode: screen;
}

/* Full-page 3D scenes are already composited by their renderer. Screen
   blending over a pale site theme turns every dark scene white, making a
   successfully applied preset look empty in the editor. */
.screen-layer.has-page-layout-visual-background
  > .page-layout-visual-background
  .site-block-visual-background--three
  > canvas {
  mix-blend-mode: normal;
}

.screen-layer.has-page-layout-visual-background
  > .page-layout-visual-background:has(.site-block-visual-background--three)::after {
  opacity: 0.16;
  mix-blend-mode: soft-light;
}

.site-block-visual-background::after,
.page-layout-target-background::after,
.page-layout-visual-background::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: var(--visual-theme-wash);
  mix-blend-mode: color;
  opacity: 0.42;
  pointer-events: none;
}

.layout-custom-card--smoke,
.layout-custom-card--threeScene {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.layout-custom-card > .site-block-visual-background ~ :not(.site-block-editor-tools):not(.site-block-anchor) {
  position: relative;
  z-index: 1;
}

/* Card-level effects are part of the component design. They stay vivid even
   when the surrounding page uses a light theme, instead of being washed out
   by the page-wide visual treatment. */
.layout-custom-card .site-block-visual-background {
  --visual-theme-opacity: 0.92;
  --visual-theme-filter: saturate(1.16) brightness(0.96) contrast(1.1);
  --visual-theme-wash: linear-gradient(135deg, rgb(2 10 24 / 8%), color-mix(in srgb, var(--aurora-1) 8%, transparent) 54%, rgb(4 9 27 / 12%));
}

.layout-custom-card .site-block-visual-background--three > canvas {
  mix-blend-mode: normal;
}

.layout-custom-card .site-block-visual-background::after {
  opacity: 0.14;
  mix-blend-mode: soft-light;
}

.page-layout-target.has-layout-visual-background {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.page-layout-target-background {
  --visual-theme-opacity: 0.84;
  --visual-theme-filter: saturate(1.08) brightness(1);
  --visual-theme-wash: linear-gradient(135deg, color-mix(in srgb, var(--aurora-1) 18%, transparent), color-mix(in srgb, var(--aurora-2) 10%, transparent) 52%, color-mix(in srgb, var(--aurora-3) 16%, transparent));
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 16% 12%, color-mix(in srgb, var(--aurora-1) 32%, transparent), transparent 48%),
    var(--surface-tint);
}

.page-layout-target.has-layout-visual-background > :not(.page-layout-target-background):not(.page-layout-handle) {
  position: relative;
  z-index: 1;
}

.screen-layer.has-page-layout-visual-background {
  isolation: isolate;
}

.screen-layer.has-page-layout-visual-background > .page-layout-visual-background {
  --visual-theme-opacity: 0.84;
  --visual-theme-filter: saturate(1.08) brightness(1);
  --visual-theme-wash: linear-gradient(135deg, color-mix(in srgb, var(--aurora-1) 18%, transparent), color-mix(in srgb, var(--aurora-2) 10%, transparent) 52%, color-mix(in srgb, var(--aurora-3) 16%, transparent));
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 16% 12%, color-mix(in srgb, var(--aurora-1) 32%, transparent), transparent 48%),
    radial-gradient(ellipse at 84% 82%, color-mix(in srgb, var(--aurora-2) 26%, transparent), transparent 54%),
    var(--surface-tint);
}

/* A cocoon or nebula is a viewport composition. Fix it to the visible screen
   so its focal point is not pushed below a long free-form editor canvas. */
.screen-layer.has-page-layout-visual-background
  > .page-layout-visual-background:has([data-grainient-style="energyField"])
  .site-block-visual-background--grainient,
.screen-layer.has-page-layout-visual-background
  > .page-layout-visual-background:has([data-grainient-style="nebulaCloud"])
  .site-block-visual-background--grainient {
  position: fixed;
  inset: 0;
}

/* A selected full-screen image remains the base layer. Decorative effects are
   added above it instead of replacing it with an opaque generated backdrop. */
.screen-layer.has-page-layout-fullscreen-image > .page-layout-visual-background {
  background: transparent;
}

.screen-layer.has-page-layout-fullscreen-image > .page-layout-visual-background::after {
  z-index: 2;
  opacity: 0.12;
  mix-blend-mode: soft-light;
}

.screen-layer.has-page-layout-fullscreen-image > .page-layout-visual-background > .site-block-visual-background {
  z-index: 1;
  background: transparent;
}

.page-layout-fireworks-overlay,
.screen-layer.has-page-layout-visual-background.has-page-layout-fireworks-overlay > .page-layout-fireworks-overlay {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
}

.site-fireworks-overlay {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
}

.site-fireworks-overlay .site-block-motion-canvas {
  mix-blend-mode: screen;
}

.screen-layer.page-layout-editor-active.has-page-layout-visual-background > .page-layout-visual-background {
  bottom: auto;
  height: var(--page-layout-editor-height, 100%);
}

.screen-layer.has-page-layout-visual-background:has(> .page-layout-free-canvas) > .page-layout-visual-background {
  bottom: auto;
  min-height: 100%;
  height: var(--page-layout-content-height, 100%);
}

/* The free canvas can deliberately extend below the initial kiosk viewport.
   While composing, the visual background must follow that extended canvas,
   rather than stopping at the first content boundary. */
.screen-layer.page-layout-editor-active.has-page-layout-visual-background > .page-layout-visual-background {
  min-height: var(--page-layout-editor-height, 100%);
  height: var(--page-layout-editor-height, 100%) !important;
}

.screen-layer.has-page-layout-visual-background > :not(.page-layout-visual-background) {
  position: relative;
  z-index: 1;
}

/* A free-form card canvas is a foreground editor surface, not regular page
   content. Keep it absolute when a page background is enabled: otherwise the
   generic direct-child rule above moves a newly added card below the screen. */
.screen-layer.has-page-layout-visual-background > .page-layout-free-canvas {
  position: absolute;
  z-index: 45;
  inset: 0 auto auto 0;
}

/* Starter templates are full pages, not additions to the clinic splash
   underneath. Keep the structural scaffold in the document for stable page
   height, but make it invisible while the template canvas is shown. */
.screen-layer.page-layout-template-presentation
  > :not(.page-layout-free-canvas):not(.page-layout-visual-background):not(.page-layout-fireworks-overlay):not(.page-layout-toolbar) {
  visibility: hidden;
  pointer-events: none;
}

.screen-layer.page-layout-template-presentation > .page-layout-free-canvas,
.screen-layer.page-layout-template-presentation > .page-layout-visual-background,
.screen-layer.page-layout-template-presentation > .page-layout-fireworks-overlay,
.screen-layer.page-layout-template-presentation > .page-layout-toolbar {
  visibility: visible;
}

/* A page-level visual scene replaces the start photo while it is previewed or
   published. The rating remains visible above the scene. */
.screen-layer.has-page-layout-visual-background .splash-card--photo .hero-photo {
  opacity: 0;
  visibility: hidden;
}

.screen-layer.has-page-layout-visual-background .splash-card--photo::after {
  background:
    linear-gradient(90deg, rgb(4 9 18 / 66%) 0%, rgb(4 9 18 / 35%) 48%, transparent 82%),
    linear-gradient(180deg, color-mix(in srgb, var(--aurora-2) 12%, transparent), rgb(2 6 14 / 14%));
}

/* The effect itself is preserved, while its base, luminosity, and tint follow
   the active site theme. This prevents a dark canvas from replacing white,
   aurora, or star-route presentation colors. */
html[data-theme="white"] .site-block-visual-background,
html[data-theme="white"] .page-layout-target-background,
html[data-theme="white"] .screen-layer.has-page-layout-visual-background > .page-layout-visual-background {
  --visual-theme-opacity: 0.48;
  --visual-theme-filter: saturate(0.72) brightness(1.34) contrast(1.04);
  --visual-theme-wash: linear-gradient(135deg, rgb(255 255 255 / 82%), color-mix(in srgb, var(--aurora-1) 18%, white) 54%, rgb(255 255 255 / 74%));
}

html[data-theme="white"]
  .screen-layer.has-page-layout-visual-background
  > .page-layout-visual-background:has(.site-block-visual-background--three) {
  --visual-theme-opacity: 0.96;
  --visual-theme-filter: saturate(0.94) brightness(1.06) contrast(1.08);
  --visual-theme-wash: linear-gradient(135deg, rgb(255 255 255 / 11%), color-mix(in srgb, var(--aurora-1) 8%, transparent) 54%, rgb(255 255 255 / 7%));
}

html[data-theme="white"]
  .screen-layer.has-page-layout-visual-background
  > .page-layout-visual-background
  .site-block-visual-background--three {
  --visual-theme-opacity: 0.96;
  --visual-theme-filter: saturate(0.94) brightness(1.06) contrast(1.08);
}

html[data-theme="white"]
  .screen-layer.has-page-layout-visual-background
  > .page-layout-visual-background:has(.site-block-visual-background--three)::after {
  opacity: 0.08;
}

/* Keep the blue structure of the two cinematic studies visible when a white
   editor theme is active instead of washing it out to gray. */
html[data-theme="white"]
  .screen-layer.has-page-layout-visual-background
  > .page-layout-visual-background:has([data-grainient-style="energyField"]),
html[data-theme="white"]
  .screen-layer.has-page-layout-visual-background
  > .page-layout-visual-background:has([data-grainient-style="nebulaCloud"]) {
  --visual-theme-opacity: 0.94;
  --visual-theme-filter: saturate(1.1) brightness(0.96) contrast(1.1);
  --visual-theme-wash: linear-gradient(135deg, rgb(1 9 22 / 10%), rgb(8 54 83 / 5%) 52%, rgb(1 8 20 / 12%));
}

html[data-theme="white"]
  .screen-layer.has-page-layout-visual-background
  > .page-layout-visual-background:has([data-grainient-style="energyField"])::after,
html[data-theme="white"]
  .screen-layer.has-page-layout-visual-background
  > .page-layout-visual-background:has([data-grainient-style="nebulaCloud"])::after {
  opacity: 0.1;
  mix-blend-mode: soft-light;
}

html[data-theme="north"] .site-block-visual-background,
html[data-theme="north"] .page-layout-target-background,
html[data-theme="north"] .screen-layer.has-page-layout-visual-background > .page-layout-visual-background {
  --visual-theme-opacity: 0.68;
  --visual-theme-filter: hue-rotate(-8deg) saturate(0.92) brightness(1.16);
}

html[data-theme="south"] .site-block-visual-background,
html[data-theme="south"] .page-layout-target-background,
html[data-theme="south"] .screen-layer.has-page-layout-visual-background > .page-layout-visual-background {
  --visual-theme-opacity: 0.72;
  --visual-theme-filter: hue-rotate(112deg) saturate(1.16) brightness(1.06);
}

html[data-theme="east"] .site-block-visual-background,
html[data-theme="east"] .page-layout-target-background,
html[data-theme="east"] .screen-layer.has-page-layout-visual-background > .page-layout-visual-background {
  --visual-theme-opacity: 0.7;
  --visual-theme-filter: hue-rotate(-86deg) saturate(1.06) brightness(1.08);
}

html[data-theme="west"] .site-block-visual-background,
html[data-theme="west"] .page-layout-target-background,
html[data-theme="west"] .screen-layer.has-page-layout-visual-background > .page-layout-visual-background {
  --visual-theme-opacity: 0.72;
  --visual-theme-filter: hue-rotate(-38deg) saturate(0.9) brightness(1.04);
}

html[data-theme="dark"] .site-block-visual-background,
html[data-theme="dark"] .page-layout-target-background,
html[data-theme="dark"] .screen-layer.has-page-layout-visual-background > .page-layout-visual-background {
  --visual-theme-opacity: 0.96;
  --visual-theme-filter: saturate(1.2) brightness(0.78);
  --visual-theme-wash: linear-gradient(135deg, color-mix(in srgb, var(--aurora-2) 26%, transparent), color-mix(in srgb, var(--aurora-1) 16%, transparent) 52%, color-mix(in srgb, var(--aurora-3) 22%, transparent));
}

html[data-theme="star-route"] .site-block-visual-background,
html[data-theme="star-route"] .page-layout-target-background,
html[data-theme="star-route"] .screen-layer.has-page-layout-visual-background > .page-layout-visual-background {
  --visual-theme-opacity: 0.46;
  --visual-theme-filter: saturate(1.32) brightness(0.9);
  --visual-theme-wash: linear-gradient(135deg, rgb(43 90 255 / 22%), rgb(133 68 255 / 14%) 52%, rgb(10 18 68 / 10%));
}

html[data-theme="star-route"] .screen-layer.has-page-layout-visual-background > .page-layout-visual-background {
  background: transparent;
}

/* Premium procedural scenes already read the active theme palette while they
   draw. Let their own light model remain visible instead of blending the
   Canvas away on pale themes. */
.site-block-visual-background--premium > canvas {
  opacity: 0.94;
  filter: saturate(1.04) contrast(1.02);
  mix-blend-mode: normal;
}

.screen-layer.has-page-layout-visual-background:not(.page-layout-grid-hidden) .blank-builder-canvas {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--line) 42%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in srgb, var(--line) 42%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
}

.screen-layer.has-page-layout-visual-background.page-layout-grid-hidden .blank-builder-canvas {
  background-image: none !important;
  background-color: transparent !important;
}

/* The editing canvas sits above page effects to keep blocks clickable. Its
   fill must stay transparent for every grid mode, otherwise a selected smoke
   or 3D layer is rendered correctly but hidden behind an opaque editor page. */
.screen-layer.has-page-layout-visual-background .blank-builder-canvas,
.screen-layer.page-layout-editor-active.has-page-layout-visual-background .blank-builder-canvas {
  background-color: transparent !important;
}

/* The composer is a viewport control, not page content. A visual background
   must never put it back into the layout flow or cover it. */
.screen-layer.has-page-layout-visual-background > .page-layout-toolbar {
  position: fixed;
  z-index: 180;
}

/* Page effects are independent layers. The base stays opaque; smoke, photo,
   waves and 3D scenes can be faded and combined above it. */
.page-layout-visual-background--layer {
  opacity: var(--page-layout-layer-opacity, 1);
  transition: opacity 160ms ease;
}

.page-layout-visual-background--overlay {
  background: transparent !important;
}

.page-layout-visual-background--overlay::after {
  display: none;
}

.page-layout-visual-background--overlay .site-block-visual-background {
  background: transparent;
}

.page-layout-visual-background--overlay .site-block-visual-background--waves,
.page-layout-visual-background--overlay .site-block-visual-background--three {
  background: transparent;
}

.page-layout-visual-background--overlay .site-block-visual-background > canvas {
  opacity: 1;
}

.page-layout-visual-layers {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
}

.page-layout-visual-layers__head,
.page-layout-visual-layers__item,
.page-layout-visual-layers__colors {
  display: flex;
  align-items: center;
  gap: 6px;
}

.page-layout-visual-layers__head {
  justify-content: space-between;
}

.page-layout-visual-layers__head strong {
  color: var(--heading);
  font-size: 0.76rem;
}

.page-layout-visual-layers__head button,
.page-layout-visual-layers__item button {
  min-height: 30px !important;
}

.page-layout-visual-layers__list {
  display: grid;
  gap: 5px;
}

.page-layout-visual-layers__item button:first-child {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-layout-visual-layers__item button:last-child {
  width: 32px;
  padding: 0;
  justify-content: center;
  text-align: center;
}

.page-layout-visual-layers__item.is-active button:first-child {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 36%, transparent);
}

.page-layout-visual-layers__empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.page-layout-visual-layers__range {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 0.71rem;
}

.page-layout-visual-layers__range span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.page-layout-visual-layers__range output {
  color: var(--heading);
  font-variant-numeric: tabular-nums;
}

.page-layout-visual-layers h4,
.page-layout-fireworks-settings h4 {
  margin: 4px 0 0;
  color: var(--heading);
  font-size: 0.74rem;
}

.page-layout-visual-layers__check {
  color: var(--muted);
  font-size: 0.71rem;
}

.page-layout-visual-layers__select {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 0.71rem;
}

.page-layout-visual-layers__select select {
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--heading) 14%, transparent);
  border-radius: 6px;
  background: var(--surface);
  color: var(--heading);
}

.page-layout-visual-layers__configure {
  min-height: 32px !important;
  border-color: color-mix(in srgb, var(--gold) 44%, transparent) !important;
}

.page-layout-visual-layers__remove {
  min-height: 34px !important;
  border-color: rgb(197 73 84 / 72%) !important;
  background: rgb(149 42 55 / 18%) !important;
  color: #d7606e !important;
  font-weight: 800 !important;
}

.page-layout-visual-layers__remove:hover,
.page-layout-visual-layers__remove:focus-visible {
  border-color: #ef7381 !important;
  background: rgb(181 49 65 / 32%) !important;
  color: #fff !important;
}

.page-layout-fireworks-settings {
  display: grid;
  gap: 7px;
  padding-top: 5px;
  border-top: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
}

/* Dedicated smoke studio follows the same modal workflow as the gradient
   studio, so layer settings never disappear above the effect catalogue. */
.smoke-studio {
  position: fixed;
  z-index: 540;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgb(3 11 18 / 58%);
  opacity: 0;
  transition: opacity 160ms ease;
  backdrop-filter: blur(10px);
}

.smoke-studio.is-visible { opacity: 1; }

.smoke-studio__panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(880px, calc(100vw - 36px));
  height: min(680px, calc(100dvh - 36px));
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 8px;
  background: #f7fafc;
  box-shadow: 0 34px 100px rgb(0 8 16 / 44%);
  color: #15202a;
}

.smoke-studio header,
.smoke-studio footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid #dfe6ea;
}

.smoke-studio footer { justify-content: flex-end; border-top: 1px solid #dfe6ea; border-bottom: 0; }
.smoke-studio header span { display: block; color: #697985; font-size: 0.67rem; font-weight: 800; text-transform: uppercase; }
.smoke-studio header strong { display: block; margin-top: 2px; font-size: 1rem; }
.smoke-studio button { min-height: 36px; padding: 7px 11px; border: 1px solid #cbd6dc; border-radius: 6px; background: #ffffff; color: #18232b; font: 780 0.76rem/1 Inter, ui-sans-serif, system-ui, sans-serif; cursor: pointer; }
.smoke-studio button.is-primary { border-color: #0e645e; background: #0e645e; color: #ffffff; }
.smoke-studio header > button { width: 34px; padding: 0; border: 0; background: transparent; font-size: 1.35rem; }

.smoke-studio__workspace { display: grid; grid-template-columns: minmax(220px, 0.44fr) minmax(0, 1fr); min-height: 0; overflow: hidden; }
.smoke-studio__catalog { display: grid; align-content: start; gap: 10px; min-height: 0; overflow-y: auto; padding: 16px; border-right: 1px solid #dfe6ea; background: #f1f5f7; }
.smoke-studio__catalog h3 { margin: 0; color: #18232b; font-size: 0.88rem; }
.smoke-studio__catalog > p, .smoke-studio__empty { margin: 0; color: #687985; font-size: 0.72rem; line-height: 1.45; }
.smoke-studio__presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.smoke-studio__presets button { display: grid; justify-items: start; gap: 6px; min-height: 74px; padding: 7px; text-align: left; }
.smoke-studio__presets button.is-active { border-color: #0e645e; box-shadow: 0 0 0 2px rgb(14 100 94 / 14%); }
.smoke-studio__presets i { display: block; width: 100%; height: 38px; border-radius: 4px; background: radial-gradient(circle at 26% 42%, var(--smoke-a), transparent 56%), radial-gradient(circle at 76% 54%, var(--smoke-b), #07101c 76%); }
.smoke-studio__presets span { overflow: hidden; max-width: 100%; color: #253742; font-size: 0.68rem; text-overflow: ellipsis; white-space: nowrap; }
.smoke-studio__editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(235px, 0.64fr); min-height: 0; overflow: auto; }
.smoke-studio__preview { position: relative; min-height: 320px; overflow: hidden; background: #07101c; isolation: isolate; }
.smoke-studio__preview .site-block-visual-background { position: absolute; inset: 0; }
.effect-studio-composition { position: absolute; inset: 0; overflow: hidden; isolation: isolate; background: #07101c; }
.effect-studio-composition__layer,
.effect-studio-composition__fireworks { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }
.effect-studio-composition__layer .site-block-visual-background,
.effect-studio-composition__fireworks .site-fireworks-overlay { position: absolute; inset: 0; }
.effect-studio-composition__sample { position: absolute; z-index: 4; left: 14px; bottom: 13px; padding: 6px 8px; border: 1px solid rgb(255 255 255 / 26%); border-radius: 4px; background: rgb(4 11 22 / 32%); color: rgb(255 255 255 / 86%); font-size: 0.66rem; font-weight: 700; text-shadow: 0 1px 10px rgb(0 0 0 / 70%); }
.smoke-studio__controls { display: grid; align-content: start; gap: 13px; padding: 18px; background: #ffffff; }
.smoke-studio__colors { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.smoke-studio__colors label,
.smoke-studio__range { display: grid; gap: 5px; color: #526570; font-size: 0.75rem; font-weight: 700; }
.smoke-studio__colors span,
.smoke-studio__range > span { display: flex; justify-content: space-between; gap: 8px; }
.smoke-studio__colors input[type=color] { width: 100%; min-height: 38px; padding: 2px; border: 1px solid #cbd6dc; border-radius: 6px; background: #ffffff; }
.smoke-studio__check { color: #526570; font-size: 0.78rem; font-weight: 700; }

@media (max-width: 680px) {
  .smoke-studio { padding: 10px; }
  .smoke-studio__panel { width: calc(100vw - 20px); height: calc(100dvh - 20px); }
  .smoke-studio__workspace { grid-template-columns: 1fr; overflow-y: auto; }
  .smoke-studio__catalog { border-right: 0; border-bottom: 1px solid #dfe6ea; overflow: visible; }
  .smoke-studio__editor { grid-template-columns: 1fr; overflow: visible; }
  .smoke-studio__preview { min-height: 230px; }
}

.page-layout-visual-layers__colors label {
  display: grid;
  flex: 1;
  gap: 3px;
  color: var(--muted);
  font-size: 0.68rem;
}

.page-layout-visual-layers__colors input[type="color"] {
  width: 100%;
  min-height: 30px;
  padding: 2px;
}

.page-layout-toolbar__popover[data-layout-toolbar-popover="visual"] {
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.three-studio {
  position: fixed;
  z-index: 2000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(10px, 2.5vw, 30px);
  color: #eff5ff;
}

.three-studio__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(2 5 18 / 76%);
  backdrop-filter: blur(10px);
}

.three-studio__window {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1420px, 100%);
  height: min(840px, calc(100vh - 20px));
  max-height: 100%;
  overflow: hidden;
  border: 1px solid rgb(145 170 255 / 38%);
  border-radius: 12px;
  background: #0a1026;
  box-shadow: 0 28px 96px rgb(0 0 0 / 54%);
}

.three-studio__head,
.three-studio__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 20px;
  border-color: rgb(155 174 255 / 22%);
  background: rgb(10 16 38 / 94%);
}

.three-studio__head { border-bottom: 1px solid rgb(155 174 255 / 22%); }
.three-studio__footer { border-top: 1px solid rgb(155 174 255 / 22%); }
.three-studio__head p { margin: 0 0 3px; color: #9aacdd; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; }
.three-studio__head h2 { margin: 0; color: #fff; font-size: 1.25rem; letter-spacing: 0; }

.three-studio__head button,
.three-studio__footer button,
.three-studio__effect,
.three-studio__images {
  border: 1px solid rgb(145 170 255 / 34%);
  border-radius: 7px;
  background: rgb(255 255 255 / 6%);
  color: #f4f7ff;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.three-studio__head button {
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  font-size: 1.55rem;
}

.three-studio__head button:hover,
.three-studio__footer button:hover,
.three-studio__effect:hover,
.three-studio__images:hover,
.three-studio__effect:focus-visible,
.three-studio__footer button:focus-visible {
  border-color: #9caeff;
  background: rgb(112 137 255 / 20%);
  box-shadow: 0 0 22px rgb(102 136 255 / 20%);
  outline: none;
}

.three-studio__layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(340px, 1.7fr) minmax(230px, 0.76fr);
  min-height: 0;
}

.three-studio__library,
.three-studio__settings {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  overflow: auto;
  padding: 18px;
  background: rgb(7 12 30 / 82%);
}

.three-studio__library { border-right: 1px solid rgb(155 174 255 / 18%); }
.three-studio__settings { border-left: 1px solid rgb(155 174 255 / 18%); }
.three-studio__library h3,
.three-studio__settings h3 { margin: 0; color: #fff; font-size: 0.98rem; }
.three-studio__library .three-studio__subhead { margin-top: 6px; color: #bfcdf6; font-size: 0.78rem; text-transform: uppercase; }
.three-studio__library > p,
.three-studio__tip { margin: 0; color: #aebcdf; font-size: 0.78rem; line-height: 1.42; }

.three-studio__effect {
  position: relative;
  display: grid;
  gap: 6px;
  min-height: 84px;
  padding: 13px 36px 13px 13px;
  text-align: left;
}

.three-studio__effect strong { color: #fff; font-size: 0.86rem; }
.three-studio__effect small { color: #b8c6e7; font-size: 0.73rem; font-weight: 600; line-height: 1.32; }
.three-studio__effect i { position: absolute; top: 50%; right: 12px; color: #a9bdff; font-size: 1.2rem; font-style: normal; transform: translateY(-50%); }
.three-studio__effect.is-active { border-color: #82a3ff; background: linear-gradient(135deg, rgb(85 116 255 / 35%), rgb(0 211 197 / 16%)); box-shadow: 0 0 28px rgb(96 132 255 / 20%); }
.three-studio__effect.is-active i { color: #57f1d2; }
.three-studio__images { min-height: 44px; padding: 10px 12px; text-align: left; }

.three-studio__presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.three-studio__presets button { min-height: 44px; padding: 8px; border: 1px solid rgb(142 169 255 / 28%); border-radius: 6px; background: linear-gradient(135deg, rgb(55 80 168 / 26%), rgb(0 188 171 / 12%)); color: #e8efff; font: inherit; font-size: 0.72rem; font-weight: 800; line-height: 1.18; cursor: pointer; }
.three-studio__presets button:hover,
.three-studio__presets button:focus-visible { border-color: #85a5ff; box-shadow: 0 0 18px rgb(85 126 255 / 24%); outline: none; }

.three-studio__preview {
  position: relative;
  min-height: 0;
  padding: 46px 14px 14px;
  background: #05091d;
}

.three-studio__preview-title {
  position: absolute;
  z-index: 1;
  top: 13px;
  right: 18px;
  left: 18px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #f5f7ff;
  font-size: 0.78rem;
  font-weight: 800;
}

.three-studio__preview-title > div { display: flex; align-items: center; gap: 9px; }
.three-studio__preview-title small { color: #aabbe5; font-weight: 600; }
.three-studio__preview-title button { padding: 5px 7px; border: 1px solid rgb(146 171 255 / 38%); border-radius: 5px; background: rgb(40 65 145 / 35%); color: #edf3ff; font: inherit; font-size: 0.68rem; font-weight: 800; cursor: pointer; }
.three-studio__preview canvas { display: block; width: 100%; height: 100%; min-height: 320px; border: 1px solid rgb(126 151 255 / 30%); border-radius: 8px; background: #05091d; }

.three-studio__slider,
.three-studio__field {
  display: grid;
  gap: 7px;
  color: #dce6ff;
  font-size: 0.78rem;
  font-weight: 750;
}

.three-studio__slider { grid-template-columns: 1fr auto; }
.three-studio__slider input { grid-column: 1 / -1; width: 100%; accent-color: #91a8ff; }
.three-studio__slider output { min-width: 30px; color: #69efd5; text-align: right; }
.three-studio__field input,
.three-studio__field select { width: 100%; min-width: 0; padding: 10px; border: 1px solid rgb(145 170 255 / 35%); border-radius: 6px; background: rgb(255 255 255 / 7%); color: #fff; font: inherit; }
.three-studio__field select option { color: #101828; }
.three-studio__field input[type="color"] {
  min-height: 42px;
  padding: 4px;
  cursor: pointer;
}
.three-studio__kinetic {
  display: grid;
  gap: 11px;
  margin: 2px 0 0;
  padding: 12px;
  border: 1px solid rgb(145 170 255 / 24%);
  border-radius: 6px;
  background: rgb(255 255 255 / 4%);
}
.three-studio__kinetic[hidden] { display: none; }
.three-studio__kinetic legend {
  padding: 0 5px;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 850;
}
.three-studio__color-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.three-studio__footer p { min-width: 0; margin: 0; color: #aebde1; font-size: 0.76rem; line-height: 1.35; overflow-wrap: anywhere; }
.three-studio__footer > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.three-studio__footer button { min-height: 38px; padding: 8px 12px; }
.three-studio__footer .three-studio__save { border-color: #74e7d3; background: linear-gradient(135deg, #567aff, #00bfa9); color: #061126; }

.three-studio__window.is-canvas-focus .three-studio__library,
.three-studio__window.is-canvas-focus .three-studio__settings { display: none; }
.three-studio__window.is-canvas-focus .three-studio__layout { grid-template-columns: minmax(0, 1fr); }
.three-studio__window.is-canvas-focus .three-studio__preview { min-height: min(76vh, 760px); padding: 48px 20px 20px; }
.three-studio__window.is-canvas-focus .three-studio__preview canvas { min-height: 0; }

@media (max-width: 940px) {
  .three-studio__window { height: min(920px, calc(100vh - 12px)); }
  .three-studio__layout { grid-template-columns: minmax(190px, .72fr) minmax(300px, 1.4fr); }
  .three-studio__settings { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgb(155 174 255 / 18%); border-left: 0; }
  .three-studio__settings h3, .three-studio__tip, .three-studio__kinetic { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .three-studio { padding: 0; }
  .three-studio__window { width: 100%; height: 100%; border: 0; border-radius: 0; }
  .three-studio__layout { display: block; overflow: auto; }
  .three-studio__library, .three-studio__settings { grid-template-columns: 1fr; overflow: visible; border: 0; }
  .three-studio__library { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .three-studio__library h3, .three-studio__library > p, .three-studio__images { grid-column: 1 / -1; }
  .three-studio__preview { height: 390px; }
  .three-studio__preview-title { align-items: flex-start; }
  .three-studio__preview-title > div { align-items: flex-end; flex-direction: column; }
  .three-studio__preview canvas { min-height: 0; }
  .three-studio__settings { display: grid; }
  .three-studio__color-row { grid-template-columns: 1fr; }
  .three-studio__footer { align-items: flex-start; flex-direction: column; }
  .three-studio__footer > div { justify-content: flex-start; }
}

.cosmic-opening {
  position: fixed;
  z-index: 5000;
  inset: 0;
  overflow: hidden;
  background: #010208;
  opacity: 1;
  pointer-events: auto;
}

.cosmic-opening--medical {
  background: var(--surface-tint, #071026);
}

.cosmic-opening canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.cosmic-opening__skip {
  position: absolute;
  z-index: 1;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid rgb(205 231 255 / 40%);
  border-radius: 6px;
  background: rgb(4 8 25 / 54%);
  color: #f4f8ff;
  font: 700 0.78rem/1 var(--site-font-family, Inter, sans-serif);
  letter-spacing: 0;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.cosmic-opening__skip:hover,
.cosmic-opening__skip:focus-visible {
  border-color: #8cecff;
  background: rgb(58 71 156 / 62%);
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .site-block-smoke__canvas {
    opacity: 0.36;
  }
}

.site-block-text-surface {
  display: grid;
  gap: 6px;
  max-width: 100%;
  color: var(--site-block-text, var(--heading));
  font-size: calc(1em * var(--site-block-scale, 1));
  line-height: var(--site-block-leading, 1.35);
}

.site-block-text-surface .layout-custom-card__title,
.site-block-text-surface .layout-custom-card__subtitle {
  color: inherit;
  overflow-wrap: anywhere;
}

.site-block-text-surface .layout-custom-card__title {
  font-weight: var(--site-block-weight, 700);
}

.site-block-card-symbol {
  display: inline-grid;
  place-items: center;
  justify-self: start;
  min-width: 1em;
  color: var(--site-block-symbol, currentColor);
  font-size: calc(2rem * var(--site-block-symbol-scale, 1));
  line-height: 1;
  text-shadow: 0 6px 18px color-mix(in srgb, currentColor 28%, transparent);
}

.site-block-text-surface--align-center .site-block-card-symbol,
.layout-custom-card[data-card-shape="circle"] .site-block-text-surface {
  justify-items: center;
}

.site-block-text-surface--align-center .site-block-card-symbol {
  justify-self: center;
}

.site-block-text-surface--align-right .site-block-card-symbol {
  justify-self: end;
}

.site-block-text-surface--rect,
.site-block-text-surface--round,
.site-block-text-surface--pill,
.site-block-text-surface--circle {
  padding: 12px;
  border: 1px solid var(--site-block-surface-border, color-mix(in srgb, var(--gold) 36%, transparent));
  background: color-mix(in srgb, var(--site-block-surface, var(--glass-strong)) var(--site-block-surface-opacity, 88%), transparent);
}

.site-block-text-surface--round {
  border-radius: calc(14px * var(--site-radius));
}

.site-block-text-surface--pill {
  border-radius: 999px;
}

.site-block-text-surface--circle {
  width: min(100%, calc(240px * var(--site-block-surface-scale, 1)));
  min-height: min(100%, calc(180px * var(--site-block-surface-scale, 1)));
  place-content: center;
  border-radius: 50%;
  text-align: center;
}

.site-block-text-surface.has-shadow {
  box-shadow: 0 14px 36px color-mix(in srgb, var(--theme-glow) 34%, transparent);
}

.site-block-hero__media,
.site-block-profile__media,
.site-block-service__media,
.site-block-document__media {
  display: block;
  width: 100%;
  border-radius: calc(12px * var(--site-radius));
  object-fit: var(--site-block-media-fit, cover);
  object-position: var(--site-block-media-position, center);
}

.site-block-hero__media {
  position: absolute;
  z-index: -2;
  inset: 0;
  height: 100%;
  border-radius: inherit;
}

.site-block-hero__shade {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(125deg, color-mix(in srgb, var(--heading) 42%, transparent), transparent 70%);
}

.layout-custom-card--hero .site-block-text-surface {
  margin-top: auto;
}

.site-block-profile__media {
  aspect-ratio: 4 / 3;
}

.site-block-service__media {
  aspect-ratio: 16 / 9;
}

.site-block-document__media {
  aspect-ratio: 1.3 / 1;
  object-fit: var(--site-block-media-fit, contain);
  background: color-mix(in srgb, var(--glass-strong) 76%, transparent);
}

.site-block-profile__meta,
.site-block-service__meta,
.site-block-document__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 760;
}

.site-block-service__meta b,
.site-block-document__meta b {
  color: var(--gold);
  font-size: 1rem;
}

.site-block-menu__items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.site-block-menu__items .layout-custom-card__link {
  width: auto;
}

.site-block-site-header {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.site-block-site-header__brand {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.site-block-site-header__brand strong {
  color: inherit !important;
  font-size: clamp(0.96rem, 1.7cqi, 1.18rem) !important;
}

.site-block-site-header__brand small {
  color: inherit !important;
  opacity: 0.68;
  font-size: 0.68rem !important;
}

.site-block-site-header__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}

.site-block-site-header__links .layout-custom-card__link,
.site-block-site-header__action {
  width: auto;
  min-height: 32px;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 8px;
  background: rgb(255 255 255 / 7%);
  color: inherit;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 740;
  text-decoration: none;
  cursor: pointer;
}

.site-block-site-header__action {
  background: color-mix(in srgb, var(--gold) 88%, white);
  color: #12202b;
  border-color: transparent;
}

.site-block-auth-portal {
  display: grid;
  gap: 11px;
}

.site-block-auth-portal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.site-block-auth-portal__actions .layout-custom-card__link {
  min-width: 132px;
  text-align: center;
}

.site-block-auth-portal__recovery {
  color: inherit;
  font-size: 0.78rem;
  opacity: 0.78;
}

.site-block-portal {
  display: grid;
  gap: 12px;
  width: 100%;
}

.site-block-portal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.site-block-portal__actions .layout-custom-card__link {
  min-width: min(100%, 142px);
  flex: 1 1 142px;
  justify-content: center;
  text-align: center;
}

.site-block-portal .layout-custom-card__link.is-primary {
  box-shadow: 0 10px 26px color-mix(in srgb, var(--site-block-text, #ffffff) 22%, transparent);
}

.site-block-portal small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

@media (max-width: 720px) {
  .site-block-site-header {
    grid-template-columns: 1fr auto;
  }

  .site-block-site-header__links {
    grid-column: 1 / -1;
    justify-content: flex-start;
    order: 3;
  }

  .site-block-portal__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .site-block-portal__actions .layout-custom-card__link {
    min-width: 0;
  }
}

.layout-custom-card__link.is-disabled {
  opacity: 0.58;
}

.site-block-divider {
  display: block;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--theme-glow) 56%, transparent);
}

.site-block-training__list {
  display: grid;
  gap: 6px;
  width: 100%;
  margin: 4px 0 0;
  padding-left: 20px;
  color: var(--heading);
  font-size: 0.82rem;
  line-height: 1.35;
}

.site-block-training__list li::marker {
  color: var(--gold);
}

.site-block-theme-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  width: 100%;
}

.site-block-theme-switch button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--theme-glow) 62%, var(--card-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--card-base-1) 82%, transparent);
  color: var(--heading);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 780;
  cursor: pointer;
  box-shadow: 0 0 16px color-mix(in srgb, var(--theme-glow) 20%, transparent);
}

.site-block-contact__list {
  display: grid;
  gap: 8px;
  width: 100%;
  margin: 3px 0;
}

.site-block-contact__list div {
  display: grid;
  grid-template-columns: minmax(72px, 0.38fr) minmax(0, 1fr);
  gap: 8px;
}

.site-block-contact__list dt,
.site-block-contact__list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.site-block-contact__list dt {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 820;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.site-block-contact__list dd,
.site-block-contact__list a {
  color: var(--heading);
  font-size: 0.84rem;
  font-weight: 720;
  text-decoration: none;
}

.site-block-location__pin {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--gold) 64%, transparent);
  border-radius: 50%;
  color: var(--gold);
  font-size: 1.7rem;
  line-height: 1;
  text-shadow: 0 0 18px color-mix(in srgb, var(--theme-glow) 80%, transparent);
}

.site-block-location__address {
  color: var(--heading);
  font-size: 0.88rem;
  font-weight: 720;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.site-block-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.site-block-rating__stars {
  display: inline-flex;
  gap: 2px;
}

.site-block-rating__stars i {
  color: color-mix(in srgb, var(--muted) 38%, transparent);
  font-size: 1.24rem;
  font-style: normal;
  line-height: 1;
}

.site-block-rating__stars i.is-filled {
  color: #d7ab48;
  text-shadow: 0 0 12px color-mix(in srgb, #f6d47b 72%, transparent);
}

.site-block-rating b {
  color: var(--heading);
  font-size: 1.05rem;
}

.site-block-rating small {
  width: 100%;
}

.site-block-gallery__media {
  display: block;
  width: 100%;
  min-height: 148px;
  max-height: min(42vh, 330px);
  border-radius: 12px;
  background: color-mix(in srgb, var(--heading) 10%, transparent);
  object-fit: cover;
}

.site-block-gallery__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.site-block-gallery__controls button {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--gold) 46%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--glass-strong) 78%, transparent);
  color: var(--heading);
  font: inherit;
  font-size: 1rem;
}

.site-block-gallery__controls button:disabled {
  opacity: 0.42;
}

.site-block-gallery__controls span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 760;
}

/* VPN-service blocks are generic builder components, not a VPN control plane. */
.layout-custom-card--vpnPricing,
.layout-custom-card--vpnAccount,
.layout-custom-card--vpnSupport,
.layout-custom-card--vpnFeature,
.layout-custom-card--vpnOrder,
.layout-custom-card--vpnMigration,
.layout-custom-card--vpnServiceStatus,
.layout-custom-card--vpnLocationProbe {
  isolation: isolate;
  overflow: hidden;
}

.site-block-vpn-pricing,
.site-block-vpn-action,
.site-block-vpn-order,
.site-block-vpn-migration,
.site-block-vpn-status,
.site-block-vpn-probe {
  display: grid;
  width: 100%;
  gap: 12px;
  margin-top: 8px;
}

.site-block-vpn-order label,
.site-block-vpn-migration label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 760;
}

.site-block-vpn-order input,
.site-block-vpn-migration input {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--card-border) 82%, transparent);
  border-radius: calc(8px * var(--site-radius));
  background: color-mix(in srgb, var(--glass-strong) 82%, transparent);
  color: var(--heading);
  font: inherit;
}

.site-block-vpn-order > button,
.site-block-vpn-migration > button,
.site-block-vpn-migration form button,
.site-block-vpn-status > button,
.site-block-vpn-probe > button {
  width: fit-content;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, var(--gold) 68%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--theme-glow) 18%, var(--glass-strong));
  color: var(--heading);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 820;
  cursor: pointer;
}

.site-block-vpn-migration form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
}

.site-block-vpn-migration__result {
  min-height: 1.2em;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.site-block-vpn-status ul,
.site-block-vpn-probe ul {
  display: grid;
  gap: 7px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.site-block-vpn-status li,
.site-block-vpn-probe li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--card-border) 72%, transparent);
  border-radius: calc(8px * var(--site-radius));
  background: color-mix(in srgb, var(--glass-strong) 68%, transparent);
}

.site-block-vpn-status li strong,
.site-block-vpn-probe li strong {
  color: var(--heading);
  font-size: 0.77rem;
}

.site-block-vpn-status li span,
.site-block-vpn-probe li span {
  color: var(--muted);
  font-size: 0.7rem;
  text-align: right;
  overflow-wrap: anywhere;
}

.site-block-vpn-status li[data-status="online"],
.site-block-vpn-probe li[data-status="online"] { border-color: color-mix(in srgb, #25cf8b 68%, var(--line)); }
.site-block-vpn-status li[data-status="warning"],
.site-block-vpn-probe li[data-status="warning"] { border-color: color-mix(in srgb, #e9b63f 68%, var(--line)); }
.site-block-vpn-status li[data-status="offline"],
.site-block-vpn-probe li[data-status="offline"] { border-color: color-mix(in srgb, #ec596b 68%, var(--line)); }

.site-block-vpn__terms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.site-block-vpn__term,
.site-block-vpn__devices button {
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--theme-glow) 56%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--card1) 80%, transparent);
  color: var(--heading);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.site-block-vpn__term {
  padding: 0 11px;
}

.site-block-vpn__term.is-active {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--theme-glow) 28%, var(--glass-strong));
  box-shadow: 0 0 18px color-mix(in srgb, var(--theme-glow) 46%, transparent);
}

.site-block-vpn__devices {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px 30px 36px;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 760;
}

.site-block-vpn__devices button {
  padding: 0;
  font-size: 1.1rem;
}

.site-block-vpn__devices button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.site-block-vpn__devices b {
  color: var(--heading);
  text-align: center;
}

.site-block-vpn__total {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.site-block-vpn__total small,
.site-block-vpn-action span,
.site-block-vpn-action small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.site-block-vpn__total strong {
  color: var(--heading);
  font-size: clamp(1.05rem, 2.1vw, 1.45rem);
  overflow-wrap: anywhere;
}

.site-block-vpn__checkout,
.site-block-vpn-action .layout-custom-card__link {
  display: inline-flex;
  justify-content: center;
  width: fit-content;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, var(--gold) 68%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--theme-glow) 18%, var(--glass-strong));
  color: var(--heading);
  font-size: 0.78rem;
  font-weight: 820;
}

.site-block-vpn__badge {
  display: inline-flex;
  width: fit-content;
  margin-top: 10px;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--theme-glow) 52%, var(--line));
  border-radius: 999px;
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Creator business and integration blocks. Endpoints are optional; every
   connected block reports its real loading, success, and error state. */
.layout-custom-card--productCatalog,
.layout-custom-card--videoChannel,
.layout-custom-card--audioPlayer,
.layout-custom-card--aiAssistant,
.layout-custom-card--subscriptionImport,
.layout-custom-card--locationDirectory,
.layout-custom-card--monitoringPanel,
.layout-custom-card--n8nWebhook {
  position: relative;
  isolation: isolate;
  overflow: auto;
}

.site-block-searchable,
.site-block-search {
  display: grid;
  width: 100%;
  min-width: 0;
}

.site-block-searchable {
  gap: 10px;
}

.site-block-search {
  gap: 5px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 760;
}

.site-block-search input {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--card-border) 82%, transparent);
  border-radius: calc(8px * var(--site-radius));
  background: color-mix(in srgb, var(--glass-strong) 82%, transparent);
  color: var(--heading);
  font: inherit;
}

[data-catalog-entry][hidden],
[data-location-entry][hidden] {
  display: none !important;
}

.site-block-catalog,
.site-block-video-channel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(148px * var(--site-block-content-scale, 1))), 1fr));
  gap: calc(10px * var(--site-block-content-scale, 1));
  width: 100%;
  min-width: 0;
}

.site-block-catalog__item,
.site-block-video-channel > a,
.site-block-video-channel > article {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--card-border) 78%, transparent);
  border-radius: calc(10px * var(--site-radius));
  background: color-mix(in srgb, var(--glass-strong) 76%, transparent);
  color: var(--heading);
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.site-block-catalog__item:hover,
.site-block-video-channel > a:hover {
  border-color: color-mix(in srgb, var(--gold) 72%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--theme-glow) 34%, transparent);
  transform: translateY(-2px);
}

.site-block-catalog__item img,
.site-block-video-channel img,
.site-block-catalog__placeholder,
.site-block-video-channel__play {
  display: grid;
  width: 100%;
  aspect-ratio: 16 / 10;
  place-items: center;
  object-fit: cover;
  background: color-mix(in srgb, var(--aurora-1) 18%, var(--glass));
  color: var(--gold);
  font-size: calc(1.3rem * var(--site-block-content-scale, 1));
}

.site-block-catalog__item > span:last-child,
.site-block-video-channel strong {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: calc(10px * var(--site-block-content-scale, 1));
  overflow-wrap: anywhere;
}

.site-block-catalog__item strong,
.site-block-video-channel strong {
  color: var(--heading);
  font-size: calc(0.82rem * var(--site-block-content-scale, 1));
  line-height: 1.25;
}

.site-block-catalog__item small {
  color: var(--gold);
  font-size: calc(0.78rem * var(--site-block-content-scale, 1));
  font-weight: 820;
}

.site-block-audio {
  display: block;
  width: 100%;
  min-width: 0;
  margin-top: 8px;
}

.site-block-empty {
  display: grid;
  min-height: 72px;
  place-items: center;
  padding: 12px;
  border: 1px dashed color-mix(in srgb, var(--gold) 52%, transparent);
  border-radius: calc(9px * var(--site-radius));
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.4;
  text-align: center;
  overflow-wrap: anywhere;
}

.site-block-integration {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 10px;
  margin-top: 8px;
}

.site-block-integration label {
  display: grid;
  min-width: 0;
  gap: 5px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 760;
}

.site-block-integration input,
.site-block-integration textarea {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--card-border) 82%, transparent);
  border-radius: calc(8px * var(--site-radius));
  background: color-mix(in srgb, var(--glass-strong) 82%, transparent);
  color: var(--heading);
  font: inherit;
}

.site-block-integration textarea {
  min-height: 84px;
  resize: vertical;
}

.site-block-integration button,
.site-block-locations__actions button {
  width: fit-content;
  max-width: 100%;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--gold) 58%, var(--card-border));
  border-radius: calc(8px * var(--site-radius));
  background: color-mix(in srgb, var(--gold) 16%, var(--glass-strong));
  color: var(--heading);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.site-block-integration[data-busy="true"] {
  cursor: progress;
}

.site-block-integration [data-integration-status] {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.site-block-integration [data-integration-status][data-state="success"] { color: #168253; }
.site-block-integration [data-integration-status][data-state="error"] { color: #b53a47; }
.site-block-form [data-site-block-form-status][data-state="success"] { color: #168253; }
.site-block-form [data-site-block-form-status][data-state="error"] { color: #b53a47; }

.site-block-integration ul {
  display: grid;
  min-width: 0;
  gap: 6px;
  max-height: 220px;
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.site-block-integration li {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--card-border) 70%, transparent);
  border-radius: calc(8px * var(--site-radius));
  background: color-mix(in srgb, var(--glass) 72%, transparent);
}

.site-block-integration li strong {
  color: var(--heading);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.site-block-integration li span {
  color: var(--muted);
  font-size: 0.7rem;
  overflow-wrap: anywhere;
}

.site-block-integration li[data-status="online"] { border-left: 3px solid #31b77a; }
.site-block-integration li[data-status="warning"] { border-left: 3px solid #d89c28; }
.site-block-integration li[data-status="offline"] { border-left: 3px solid #d44d5b; }

.site-block-quality {
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--card-border) 74%, transparent);
  border-radius: calc(8px * var(--site-radius));
  background: color-mix(in srgb, var(--glass) 78%, transparent);
}

.site-block-quality__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.site-block-quality__results li[data-level="error"] { border-left: 3px solid #d44d5b; }
.site-block-quality__results li[data-level="warning"] { border-left: 3px solid #d89c28; }
.site-block-quality__results li[data-level="info"] { border-left: 3px solid #3a88ca; }
.site-block-quality [data-quality-status] { color: var(--muted); font-size: 0.72rem; line-height: 1.4; overflow-wrap: anywhere; }
.site-block-quality [data-quality-status][data-state="success"] { color: #168253; }
.site-block-quality [data-quality-status][data-state="warning"] { color: #9f731c; }

.site-block-locations__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.site-block-locations__actions button.is-active {
  border-color: var(--gold);
  box-shadow: 0 0 16px color-mix(in srgb, var(--theme-glow) 34%, transparent);
}

.site-block-assistant__transcript {
  display: grid;
  gap: 7px;
  max-height: 210px;
  padding: 10px;
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--card-border) 76%, transparent);
  border-radius: calc(9px * var(--site-radius));
  background: color-mix(in srgb, var(--glass) 68%, transparent);
}

.site-block-assistant__transcript p {
  width: fit-content;
  max-width: 88%;
  margin: 0;
  padding: 8px 10px;
  border-radius: calc(9px * var(--site-radius));
  background: color-mix(in srgb, var(--aurora-1) 17%, var(--glass-strong));
  color: var(--heading);
  font-size: 0.76rem;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.site-block-assistant__transcript p[data-role="user"] {
  justify-self: end;
  background: color-mix(in srgb, var(--gold) 18%, var(--glass-strong));
}

.site-block-assistant form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
}

.site-block-assistant form textarea {
  min-height: 48px;
  max-height: 140px;
}

.site-block-inspector__help,
.page-layout-toolbar__help {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.site-block-inspector__help {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 9%, var(--glass));
}

.page-layout-toolbar__help {
  display: grid;
  gap: 8px;
  padding: 4px;
}

.page-layout-toolbar__help strong,
.page-layout-toolbar__help p {
  margin: 0;
}

@media (max-width: 720px) {
  .site-block-catalog,
  .site-block-video-channel {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-block-assistant form {
    grid-template-columns: minmax(0, 1fr);
  }
}

.site-block-editor-tools {
  position: absolute;
  z-index: 120;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 6px;
  pointer-events: auto;
}

.site-block-editor-tools button {
  position: relative;
  z-index: 1;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--gold) 68%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, #141d21 78%, var(--glass-strong));
  color: var(--gold);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1;
}

.page-layout-editor-active .layout-custom-card {
  isolation: isolate;
}

.site-settings-jump {
  position: sticky;
  z-index: 3;
  top: -1px;
  display: flex;
  gap: 6px;
  margin: 14px 0 2px;
  padding: 9px 0;
  overflow-x: auto;
  background: color-mix(in srgb, var(--glass-strong) 94%, transparent);
  backdrop-filter: blur(14px);
  scrollbar-width: thin;
}

.site-settings-jump button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid color-mix(in srgb, var(--card-border) 80%, transparent);
  border-radius: calc(8px * var(--site-radius));
  background: color-mix(in srgb, var(--card1) 82%, transparent);
  color: var(--heading);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
}

.site-settings-section {
  display: grid;
  gap: 12px;
  padding: 15px 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
}

.site-settings-section:first-of-type {
  border-top: 0;
}

.site-settings-section__head,
.site-theme-editor__title,
.site-theme-editor__options,
.site-settings-page,
.site-settings-transfer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.site-settings-section__head span,
.site-settings-section__head strong {
  display: block;
}

.site-settings-section__head span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 840;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.site-settings-section__head strong {
  margin-top: 4px;
  color: var(--heading);
  font-size: 0.86rem;
  line-height: 1.35;
}

.site-settings-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
}

.site-settings-theme {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--card-border) 82%, transparent);
  border-radius: calc(10px * var(--site-radius));
  background: color-mix(in srgb, var(--card1) 82%, transparent);
  color: var(--heading);
  text-align: left;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
}

.site-settings-theme i {
  width: 20px;
  height: 20px;
  border: 1px solid color-mix(in srgb, var(--heading) 18%, transparent);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--aurora-1), var(--aurora-2) 56%, var(--aurora-3));
  box-shadow: 0 0 13px color-mix(in srgb, var(--theme-glow) 62%, transparent);
}

.site-settings-theme.is-active {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 36%, transparent), 0 0 20px color-mix(in srgb, var(--theme-glow) 34%, transparent);
}

.site-settings-theme small {
  grid-column: 2;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
}

.site-settings-action,
.site-settings-page button,
.site-theme-editor button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--gold) 52%, transparent);
  border-radius: calc(8px * var(--site-radius));
  background: color-mix(in srgb, var(--gold) 12%, var(--glass-strong));
  color: var(--heading);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 800;
}

.site-admin-access-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.site-admin-access-form label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.site-admin-access-form label > span,
.site-admin-access-form > p {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.site-admin-access-form input {
  width: 100%;
  min-width: 0;
}

.site-admin-access-form__actions,
.site-admin-access-form > p {
  grid-column: 1 / -1;
}

.site-admin-access-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.site-admin-access-form > p {
  margin: 0;
}

.admin-bar--client {
  width: auto;
}

.review-card .admin-record-delete {
  left: auto;
  right: 10px;
  top: 10px;
}

@media (max-width: 620px) {
  .site-admin-access-form {
    grid-template-columns: 1fr;
  }
}

.site-theme-editor {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--card-border) 86%, transparent);
  border-radius: calc(12px * var(--site-radius));
  background: color-mix(in srgb, var(--card1) 70%, transparent);
}

.site-theme-editor__title input,
.site-theme-editor__options select,
.site-settings-transfer input[type="file"] {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--heading) 16%, transparent);
  border-radius: calc(7px * var(--site-radius));
  background: color-mix(in srgb, var(--glass-strong) 86%, white);
  color: var(--heading);
  font: inherit;
}

.site-theme-editor__title input {
  width: 100%;
  min-height: 34px;
  padding: 0 8px;
  font-size: 0.82rem;
  font-weight: 800;
}

.site-theme-editor__colors {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.site-theme-editor__colors label,
.site-theme-editor__options label,
.site-settings-transfer label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 780;
}

.site-theme-editor__colors input[type="color"] {
  width: 100%;
  height: 32px;
  padding: 2px;
  border: 1px solid color-mix(in srgb, var(--heading) 14%, transparent);
  border-radius: 7px;
  background: transparent;
}

.site-theme-editor__options {
  align-items: end;
  flex-wrap: wrap;
}

.site-theme-editor__options select {
  min-height: 34px;
  padding: 0 7px;
}

.site-settings-pages {
  display: grid;
  gap: 8px;
}

.site-settings-page {
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--card-border) 76%, transparent);
  border-radius: calc(9px * var(--site-radius));
  background: color-mix(in srgb, var(--card1) 58%, transparent);
}

.site-settings-page strong,
.site-settings-page small {
  display: block;
}

.site-settings-page strong {
  color: var(--heading);
  font-size: 0.82rem;
}

.site-settings-page small,
.site-settings-empty {
  color: var(--muted);
  font-size: 0.72rem;
}

.site-settings-page > div:last-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.site-settings-page button {
  width: 30px;
  min-height: 30px;
  padding: 0;
}

.site-settings-page button:disabled {
  opacity: 0.35;
}

.site-settings-page__rename {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: 100%;
  min-width: 0;
  gap: 10px;
  align-items: end;
}

.site-settings-page__rename label {
  display: grid;
  min-width: 0;
  gap: 4px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 760;
}

.site-settings-page__rename input {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  box-sizing: border-box;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--card-border) 82%, transparent);
  border-radius: calc(8px * var(--site-radius));
  background: color-mix(in srgb, var(--glass-strong) 88%, transparent);
  color: var(--heading);
  font: inherit;
}

.site-settings-page__rename > div {
  display: flex;
  gap: 5px;
}

.site-settings-page__rename button {
  width: auto;
  padding: 0 9px;
}

.site-settings-transfer {
  align-items: end;
  flex-wrap: wrap;
}

.site-settings-transfer form {
  display: flex;
  align-items: end;
  flex: 1 1 320px;
  flex-wrap: wrap;
  gap: 8px;
}

.site-settings-transfer label {
  flex: 1 1 220px;
}

.site-settings-transfer input[type="file"] {
  min-height: 34px;
  max-width: 100%;
  padding: 5px;
}

@media (max-width: 620px) {
  .site-settings-section__head,
  .site-settings-page,
  .site-settings-transfer {
    align-items: stretch;
    flex-direction: column;
  }

  .site-theme-editor__colors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-settings-page__rename {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-settings-page > div:last-child {
    justify-content: flex-start;
  }
}

.site-block-inspector {
  position: fixed;
  /* The card inspector must stay above the interactive Studio side panels. */
  z-index: 1200;
  top: 50%;
  right: max(18px, env(safe-area-inset-right));
  display: grid;
  gap: 11px;
  width: min(360px, calc(100vw - 32px));
  max-height: min(760px, calc(100dvh - 36px));
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--gold) 56%, rgba(255, 255, 255, 0.38));
  border-radius: 16px;
  background: color-mix(in srgb, var(--glass-strong) 96%, white);
  box-shadow: 0 26px 72px rgba(3, 14, 20, 0.34);
  color: var(--heading);
  transform: translateY(-50%);
  backdrop-filter: blur(20px);
}

.site-block-inspector header,
.site-block-inspector footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.site-block-inspector header span {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 820;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.site-block-inspector header strong {
  display: block;
  margin-top: 3px;
  font-size: 1.05rem;
}

.site-block-inspector > label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 780;
}

.site-block-inspector input,
.site-block-inspector textarea,
.site-block-inspector select {
  width: 100%;
  box-sizing: border-box;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--heading) 18%, transparent);
  border-radius: 9px;
  outline: none;
  background: color-mix(in srgb, var(--glass) 82%, white);
  color: var(--heading);
  font: inherit;
  font-size: 0.86rem;
}

.site-block-inspector textarea {
  min-height: 76px;
  resize: vertical;
}

.site-block-inspector header > button,
.site-block-inspector footer button,
.site-block-inspector__secondary {
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid color-mix(in srgb, var(--gold) 48%, transparent);
  border-radius: 9px;
  background: transparent;
  color: var(--heading);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
}

.site-block-inspector header > button {
  width: 34px;
  padding: 0;
  border-radius: 50%;
  font-size: 1.25rem;
}

.site-block-inspector__save {
  border-color: color-mix(in srgb, var(--gold) 72%, transparent) !important;
  background: color-mix(in srgb, var(--gold) 24%, var(--glass-strong)) !important;
}

.site-block-inspector__gallery {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--heading) 12%, transparent);
  border-radius: 10px;
}

.site-block-inspector__gallery span {
  color: var(--muted);
  font-size: 0.78rem;
}

.site-block-inspector__media,
.site-block-inspector__fieldset {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--heading) 12%, transparent);
  border-radius: 10px;
}

.site-block-inspector__media label,
.site-block-inspector__fieldset label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 780;
}

.site-block-inspector__fieldset {
  margin: 0;
}

.site-block-inspector__card-layers > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.4;
}

.site-block-inspector__visual-layer-list {
  display: grid;
  gap: 6px;
}

.site-block-inspector__visual-layer-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--heading) 12%, transparent);
  border-radius: 8px;
}

.site-block-inspector__visual-layer-row span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.site-block-inspector__visual-layer-row strong,
.site-block-inspector__visual-layer-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-block-inspector__visual-layer-row strong { font-size: 0.76rem; }
.site-block-inspector__visual-layer-row small { color: var(--muted); font-size: 0.66rem; }

.site-block-inspector__visual-layer-row .site-block-inspector__secondary {
  min-height: 30px;
  padding: 0 8px;
}

.site-block-inspector__visual-layer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.site-block-inspector__visual-layer-actions .site-block-inspector__secondary {
  min-height: 32px;
}

.site-block-inspector__secondary.is-danger {
  color: #a92035;
  border-color: color-mix(in srgb, #b9283d 44%, transparent);
}

.site-block-inspector__fieldset legend {
  padding: 0 5px;
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 820;
}

.site-block-inspector__check {
  display: flex !important;
  align-items: center;
  gap: 8px;
}

.site-block-inspector__check input {
  width: auto;
  min-height: 0;
}

@media (max-width: 680px) {
  .site-block-inspector {
    top: auto;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    max-height: min(72dvh, 650px);
    transform: none;
  }
}

/* Keep the persistent admin controls compact even after responsive kiosk overrides. */
.admin-bar--inline {
  z-index: 89;
  top: max(18px, env(safe-area-inset-top));
  right: calc(clamp(16px, 3vw, 48px) + 42px);
  bottom: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.admin-bar--inline .admin-bar__icon {
  display: grid;
  width: 30px;
  min-height: 30px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  color: var(--gold) !important;
}

@media (max-width: 680px) {
  .admin-bar--inline {
    top: auto;
    right: 54px;
    bottom: max(12px, env(safe-area-inset-bottom));
  }
}

/* Final mobile overflow policy: active kiosk screens scroll vertically, while
   every text block stays inside its own visual surface. */
@media (max-width: 820px) {
  .screen-layer--enter {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  .screen-layer--enter .screen-shell {
    height: auto !important;
    min-height: 100dvh;
    overflow: visible !important;
  }

  .screen-layer--enter .screen-grid,
  .screen-layer--enter .screen-grid:has(.screen-aside) {
    height: auto !important;
    min-height: calc(100dvh - 96px);
    grid-template-rows: auto auto !important;
    overflow: visible !important;
  }

  .screen-layer--enter .screen-content,
  .screen-layer--enter .review-layout,
  .screen-layer--enter .contacts-layout,
  .screen-layer--enter .document-grid,
  .screen-layer--enter .documents-hub-grid,
  .screen-layer--enter .review-grid {
    height: auto !important;
    min-height: 0;
    overflow: visible !important;
  }

  .screen-layer--enter .review-grid,
  .screen-layer--enter .review-grid--six {
    grid-template-rows: none !important;
    grid-auto-rows: auto;
  }

  .screen-layer--enter .review-card {
    min-height: 154px;
  }

  .screen-layer--enter .review-card p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
  }

  .screen-layer--enter .contacts-layout .contact-card-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    gap: 10px;
  }

  .screen-layer--enter .contacts-layout .contact-card {
    min-height: 116px;
    padding: 16px;
  }

  .screen-layer--enter .map-panel {
    min-height: clamp(260px, 66vw, 380px);
  }

  .screen-layer--enter .document-grid--sheets {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: minmax(250px, auto);
  }

  .screen-layer--enter .document-grid--sheets .document-sheet,
  .screen-layer--enter .document-viewer .document-sheet {
    width: 100%;
    height: auto !important;
    min-height: 250px;
    max-width: 100%;
    padding: clamp(22px, 6vw, 36px);
  }

  .screen-layer--enter .document-viewer {
    display: block;
    height: auto !important;
    min-height: 0;
    padding: 8px;
    overflow: visible !important;
  }

  .screen-layer--enter .document-sheet h2,
  .screen-layer--enter .document-sheet p,
  .screen-layer--enter .document-sheet span,
  .screen-layer--enter .document-sheet strong,
  .screen-layer--enter .document-sheet__details {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .screen-layer--enter .document-sheet h2 {
    font-size: clamp(1.15rem, 6vw, 1.8rem);
    line-height: 1.08;
  }

  .screen-layer--enter .document-sheet p,
  .screen-layer--enter .document-sheet span,
  .screen-layer--enter .document-sheet strong {
    font-size: clamp(0.78rem, 3.5vw, 1rem);
    line-height: 1.25;
  }

  .screen-layer--enter .document-sheet__details {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }
}