/* Shared appearance controls. The compact header control moves into the mobile menu. */
.theme-control[hidden] { display: none; }
.theme-control { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font: 500 14px var(--body); }
.theme-control svg { width: 18px; height: 18px; flex: none; }
.theme-control select { min-height: 44px; max-width: 100%; padding: 9px 28px 9px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.theme-control select:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.theme-menu { grid-column: 1 / -1; justify-content: space-between; padding: 14px 4px; border-bottom: 1px solid var(--line); }
@media (max-width: 1100px) { .theme-header { display: none; } }
@media print { .theme-control { display: none; } }

@media screen {
/* Dark appearance is screen-only; printed guides retain the original light palette. */
html[data-theme="dark"] {
  color-scheme: dark;
  --cream: #101923;
  --card: #172430;
  --sand: #1d2c3a;
  --ink: #f4efe4;
  --ink-2: #d0d5d8;
  --muted: #a9b5bf;
  --line: #304354;
  --line-2: #40576b;
  --navy: #b9d0e1;
  --navy-deep: #213447;
  --navy-line: #40576b;
  --pale: #b9c9d7;
  --pale-2: #d8e0e6;
  --night: #0b121a;
  --night-ink: #e9e1d0;
  --night-muted: #a9b5bf;
  --bezel: #080e15;
}
html[data-theme="dark"] a:hover { color: #f4efe4; }
html[data-theme="dark"] .brand svg path { fill: currentColor; }
html[data-theme="dark"] .menu-button { color: var(--ink); border-color: var(--line-2); }
html[data-theme="dark"] .menu-button svg { stroke: currentColor; }
html[data-theme="dark"] .button-primary {
  background: #e9e1d0; color: #152230; border-color: #e9e1d0;
}
html[data-theme="dark"] .button-primary:hover { background: #fff5df; color: #101923; }
html[data-theme="dark"] .bar-actions .button-primary {
  background: #2b4155; color: var(--ink); border-color: #40576b;
}
html[data-theme="dark"] .bar-actions .button-primary:hover { background: #37536b; }
html[data-theme="dark"] .button-quiet { border-color: #526575; }
html[data-theme="dark"] .button-quiet:hover { background: #203344; }
html[data-theme="dark"] .price-chip-sum i,
html[data-theme="dark"] .price i { color: var(--muted); }
html[data-theme="dark"] .price-free { background: #263d50; }
html[data-theme="dark"] .price-note > span,
html[data-theme="dark"] .soon-badge,
html[data-theme="dark"] .plan-operator .badge {
  background: #2b4155; color: #e3edf4;
}
html[data-theme="dark"] .browser-bar { background: #20303e; }
html[data-theme="dark"] .browser-bar i { background: #4a5e6e; }
html[data-theme="dark"] .browser,
html[data-theme="dark"] .shot,
html[data-theme="dark"] .phone,
html[data-theme="dark"] .handset,
html[data-theme="dark"] .nav-platform-links,
html[data-theme="dark"] .try-browser,
html[data-theme="dark"] .guide-frame { box-shadow: 0 24px 60px rgba(0,0,0,.24); }
html[data-theme="dark"] .pricing { background: #1b2b39; border-block: 1px solid var(--line); }
html[data-theme="dark"] .plan-operator { border: 1px solid #40576b; }
html[data-theme="dark"] .plan-workshop { background: #213447; }
html[data-theme="dark"] .plan-workshop .badge { background: #344f64; }
html[data-theme="dark"] .teaser-dark { background: #213447; border-color: #40576b; }
html[data-theme="dark"] .workflow-steps li::before,
html[data-theme="dark"] .steps > li::before { background: #e9e1d0; color: #152230; }
html[data-theme="dark"] .image-viewer-actions [data-image-close] { background: #e9e1d0; color: #152230; border-color: #e9e1d0; }
html[data-theme="dark"] .image-viewer-actions [data-image-close]:hover { background: #fff5df; }
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea { background: #101923; border-color: #6b8093; }
html[data-theme="dark"] .theme-control select { border-color: #6b8093; }
html[data-theme="dark"] .form-status[data-tone="done"] { color: #9ad6b7; }
html[data-theme="dark"] .form-status[data-tone="error"] { color: #ffb4a9; }
html[data-theme="dark"] .try-lang-button { border-color: var(--line-2); }
html[data-theme="dark"] .try-lang-button[aria-pressed="true"] { background: #e9e1d0; color: #152230; }
html[data-theme="dark"] .ui { color: #d8e5ee; }
html[data-theme="dark"] .footer { border-top: 1px solid var(--line); }
html[data-theme="dark"] ::selection { background: #526c82; color: #fff; }


}