.appearance-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.appearance-control svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.appearance-control {
  font: inherit;
  font-size: 12px;
  width: 44px;
  height: 44px;
  justify-content: center;
  border: 1px solid var(--p-line, var(--line));
  border-radius: 9px;
  padding: 8px;
  color: inherit;
  background: var(--soft, var(--button));
  cursor: pointer;
}
.appearance-control:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.book-controls {
  display: flex;
  gap: 12px;
  align-items: center;
}
html[data-appearance="light"] {
  color-scheme: light;
}
html[data-appearance="dark"] {
  color-scheme: dark;
}
/* Portal: light surfaces, preserving the existing HC illustration colors. */
html[data-surface="portal"][data-appearance="light"] {
  --bg: #f2f4f7;
  --text: #281f2b;
  --accent: #526447;
  --accent-d: #46573b;
  --muted: #655c6c;
  --card: #fff;
  --card2: #f0eef3;
  --line: #d9d4df;
  --line2: #b9afc1;
}
html[data-appearance="light"] .portal-body {
  --panel: #fff;
  --soft: #eeebf1;
  --p-line: #d7d1dc;
  --p-muted: #665c70;
  --signal: #617b53;
  background: var(--bg);
  color: var(--text);
}
html[data-appearance="light"]
  :is(.sidebar, .topbar, .login-form-side, .boot-screen) {
  background: #f7f6f9;
  color: var(--text);
}
html[data-appearance="light"] :is(.login-art, .brain-panel) {
  background: radial-gradient(ellipse at 45% 45%, #d7efff, #eeebf3 75%);
  color: var(--text);
}
html[data-appearance="light"] :is(.support-box, .stat) {
  background: linear-gradient(130deg, #f4f1f7, #e8f0ee);
}
html[data-appearance="light"]
  :is(
    .workspace-select,
    .field,
    .form input,
    .form select,
    .form textarea,
    .toolbar input,
    .toolbar select,
    .chat-form input
  ) {
  background: #fff;
  color: #281f2b;
  border-color: #c9c1d2;
}
html[data-appearance="light"]
  :is(
    .form label,
    .breadcrumb span,
    .stat-label,
    .stat small,
    .login-bottom,
    .login-foot,
    .nav button,
    .workspace-label,
    .nav-label,
    .footer-note,
    .table-scroll small
  ) {
  color: #655a70;
}
html[data-appearance="light"]
  :is(.nav button.active, .language-switch button[aria-pressed="true"]) {
  background: #e1e8d9;
  color: #304728;
}
html[data-appearance="light"] :is(.nav button:hover, .btn:hover) {
  background: #ded7e6;
  color: #281f2b;
}
html[data-appearance="light"] :is(.nav .count, .avatar, .lock-icon) {
  background: #e7deef;
  color: #60437a;
  border-color: #cbbbd8;
}
html[data-appearance="light"] .btn.primary {
  background: #465e37;
  color: #fff;
  border-color: #465e37;
}
html[data-appearance="light"] .btn.primary:hover {
  background: #354b28;
  color: #fff;
}
html[data-appearance="light"] :is(.notice, .bubble) {
  background: #eee8f4;
  color: #493854;
  border-color: #d3c5df;
}
html[data-appearance="light"] .bubble.mine {
  background: #e2eadc;
  color: #2a4429;
  border-color: #c6d4bd;
}
html[data-appearance="light"] :is(dialog, #modal) {
  background: #fbfafc;
  color: #281f2b;
  border-color: #bfb2cc;
}
html[data-appearance="light"]
  :is(.language-switch, .table-scroll thead, .table-scroll th) {
  background: #f2eef6;
  color: #5c4d6a;
}
html[data-appearance="light"] .language-switch button:hover {
  color: #281f2b;
}
html[data-appearance="light"] .portal-body .eyebrow {
  color: #526d45;
}
html[data-appearance="light"] :is(.pill, .pill.purple) {
  background: #eee5f6;
  color: #62407c;
}
html[data-appearance="light"] .pill.green {
  background: #e1edda;
  color: #36592d;
}
html[data-appearance="light"] .pill.amber {
  background: #faeed9;
  color: #7b511c;
}
html[data-appearance="light"] :is(.error, .danger) {
  color: #a1263e !important;
}
html[data-appearance="light"] .operations-table tbody tr:hover {
  background: #f4f7f0;
}
html[data-appearance="light"] .ops-heading svg {
  color: #49623d;
}
html[data-appearance="light"] .booking-table td:before {
  color: #6b5c79;
}
html[data-appearance="light"] #toast {
  background: #e5eddc;
  color: #304329;
  border-color: #aeb8a0;
}
html[data-appearance="light"] :is(.source-review, .studio-settings) {
  color: var(--text);
}
/* Venue themes and light/dark mode are independent. */
html[data-surface="booking"][data-appearance="dark"] {
  --bg: #11161a;
  --panel: #1c242a;
  --line: #36434c;
  --muted: #b4c6cc;
  --ink: #f0f5f6;
  --wash: #22313a;
  --button: #263039;
  --hover: #34424d;
  --accent: #d7efff;
  --on-accent: #16262e;
  --art: #24343e;
  color-scheme: dark;
}
html[data-surface="booking"][data-appearance="dark"][data-theme="health"] {
  --art: #213c40;
  --wash: #183038;
  --accent: #b7ddd0;
}
html[data-surface="booking"][data-appearance="dark"][data-theme="hair"] {
  --bg: #1a1517;
  --panel: #281f24;
  --line: #493842;
  --wash: #351e28;
  --art: #402c35;
  --button: #33252e;
  --hover: #44333e;
  --accent: #dfc5b8;
  --on-accent: #281a20;
  --muted: #c9b7c3;
}
html[data-surface="booking"][data-appearance="dark"][data-theme="beauty"] {
  --bg: #1c141a;
  --panel: #2b2029;
  --line: #4b3646;
  --wash: #351e28;
  --art: #482c3b;
  --button: #382734;
  --hover: #4b3643;
  --accent: #edc0d6;
  --muted: #cebbcb;
  --on-accent: #351e28;
}
html[data-surface="booking"][data-appearance="dark"][data-theme="wellness"] {
  --bg: #171b14;
  --panel: #242c20;
  --line: #3e4c35;
  --wash: #293221;
  --art: #35432b;
  --button: #303b28;
  --hover: #3c4a31;
  --accent: #c3d0ad;
  --muted: #bbc7ae;
  --on-accent: #20271a;
}
html[data-surface="booking"][data-appearance="dark"][data-theme="auto"] {
  --accent: #ff896c;
  --on-accent: #251711;
}
html[data-surface="booking"][data-appearance="dark"][data-theme="fitness"] {
  --accent: #e9f056;
  --on-accent: #242514;
  --art: #333b22;
}
html[data-surface="booking"][data-appearance="dark"][data-theme="general"] {
  --bg: #17121a;
  --panel: #261e2b;
  --wash: #351e28;
  --art: #351e28;
  --line: #49384f;
  --button: #312638;
  --hover: #44334b;
  --accent: #d7efff;
  --muted: #c6b9cb;
}
html[data-surface="booking"][data-appearance="light"] {
  --bg: #f4f6f8;
  --panel: #fff;
  --line: #d2dde4;
  --muted: #506474;
  --ink: #21333d;
  --wash: #e4eff5;
  --button: #eef3f7;
  --hover: #dce7ef;
  --accent: #345c70;
  --on-accent: #fff;
  --art: #d7efff;
  color-scheme: light;
}
html[data-surface="booking"][data-appearance="light"][data-theme="health"] {
  --bg: #f4f8f7;
  --wash: #d7efff;
  --accent: #285c51;
  --ink: #183e34;
  --muted: #526e67;
  --button: #eff5f2;
  --hover: #dfece6;
}
html[data-surface="booking"][data-appearance="light"][data-theme="hair"] {
  --bg: #f5f0e9;
  --panel: #fffdf9;
  --line: #e0d3c7;
  --muted: #726154;
  --accent: #351e28;
  --ink: #351e28;
  --wash: #ebe0d1;
  --button: #f5eee5;
  --hover: #e9ddcd;
  --art: #ede0cf;
}
html[data-surface="booking"][data-appearance="light"][data-theme="auto"] {
  --bg: #f2f4f5;
  --art: #f4d8ce;
  --wash: #f7e8e1;
  --accent: #a7381c;
  --button: #f8efeb;
  --hover: #f0dbd1;
}
html[data-surface="booking"][data-appearance="light"][data-theme="beauty"] {
  --bg: #faf3f4;
  --line: #e6d4da;
  --muted: #7c5c67;
  --accent: #71304b;
  --ink: #4b2837;
  --wash: #f2dfe7;
  --button: #f7edf0;
  --hover: #f1dce4;
  --art: #f0dce3;
}
html[data-surface="booking"][data-appearance="light"][data-theme="wellness"] {
  --bg: #f3f3e9;
  --panel: #fdfdf8;
  --line: #d9dfcb;
  --muted: #626d50;
  --accent: #465638;
  --ink: #303d26;
  --wash: #e5e9d6;
  --button: #edf0e3;
  --hover: #e0e5cf;
  --art: #aeb8a0;
}
html[data-surface="booking"][data-appearance="light"][data-theme="fitness"] {
  --bg: #f8f9eb;
  --accent: #4e581e;
  --art: #e9f056;
  --wash: #f2f3d2;
  --button: #f0f2dd;
  --hover: #e4e8bc;
}
html[data-surface="booking"][data-appearance="light"][data-theme="general"] {
  --accent: #583c66;
  --ink: #351e28;
  --wash: #eee7f0;
  --art: #e4d9e9;
  --button: #f2edf5;
  --hover: #e6dced;
}
html[data-surface="booking"][data-appearance="dark"] .error {
  color: #ffb9b9;
}
html[data-surface="booking"][data-appearance="light"] .error {
  color: #a1263e;
}
html[data-surface="booking"][data-appearance="light"] .skeleton-line {
  background: linear-gradient(100deg, #dde5e8 25%, #f5f8fa 40%, #dde5e8 60%);
  background-size: 200% 100%;
}
@media (max-width: 520px) {
  .book-controls {
    gap: 8px;
  }
  .book-controls #language {
    padding: 10px;
    font-size: 12px;
    min-height: 42px;
  }
  header:has(.book-controls) {
    padding: 20px 16px;
    gap: 12px;
  }
  header:has(.book-controls) img {
    width: 110px;
  }
  .appearance-control {
    gap: 4px;
  }

  .login-language {
    gap: 10px;
    flex-wrap: wrap;
  }
  .top-actions {
    gap: 8px;
  }
}
@media print {
  .appearance-control {
    display: none;
  }
}
html[data-appearance="light"] .login-copy h1 span {
  color: #73508c;
}
html[data-appearance="light"] .satellite {
  background: #f5f1f8;
  color: #4f3b60;
  border-color: #c8b9d4;
  box-shadow: 0 8px 24px #58456518;
}
html[data-appearance="light"]
  :is(.agent-symbol, .agent-symbol.voice, .agent-symbol.avatar-type) {
  background: #e8e4ed;
  color: #604578;
  border-color: #cdbdd9;
}
html[data-appearance="light"] .agent-symbol.voice {
  background: #e5eddc;
  color: #49603c;
}
html[data-appearance="light"] :is(.core, .brain-center) {
  color: #f0e6ff;
}
html[data-appearance="light"] .source-review {
  background: #f0ecf4;
  color: #34283d;
}
html[data-appearance="light"] :is(.boot-status, .boot-wordmark span) {
  color: #695675;
}
html[data-appearance="light"] .login-language {
  display: flex;
  align-items: center;
  gap: 12px;
}