/* MARK OS Fix04 — palette roles are shared; brand and status colours stay fixed. */
:root,
html[data-markos-theme="light"] {
  --mark-bg: #f5f8ff;
  --mark-card: #ffffff;
  --mark-card-soft: #f7faff;
  --mark-text: #0a1952;
  --mark-muted: #7c86a8;
  --mark-line: #e8ecf6;
  --mark-field: #ffffff;
  --mark-shadow: 0 8px 30px rgba(40,67,135,.08);
}
html[data-markos-theme="dark"] {
  --mark-bg: #0e1320;
  --mark-card: #171d2a;
  --mark-card-soft: #202838;
  --mark-text: #f5f7ff;
  --mark-muted: #9aa6c3;
  --mark-line: #2a3346;
  --mark-field: #202838;
  --mark-shadow: 0 8px 30px rgba(0,0,0,.22);
}

html[data-markos-theme] body {
  --bg: var(--mark-bg);
  --page: var(--mark-bg);
  --card: var(--mark-card);
  --panel: var(--mark-card);
  --text: var(--mark-text);
  --ink: var(--mark-text);
  --muted: var(--mark-muted);
  --line: var(--mark-line);
  --shadow: var(--mark-shadow);
}
html[data-markos-theme="dark"] body {
  background-color: var(--mark-bg);
  color: var(--mark-text);
}
html[data-markos-page][data-markos-theme] body .topbar {
  color: #fff;
  background: linear-gradient(135deg,#0878ef,#0865d1) !important;
  border-color: transparent !important;
}

/* Shared chrome and dialogs. */
html[data-markos-theme] :is(.module-drawer,.markos-module-drawer,.standard-dialog,.standard-header,.standard-footer,.modal,.bottom-nav) {
  color: var(--mark-text);
  border-color: var(--mark-line);
  background-color: var(--mark-card);
}
html[data-markos-theme] :is(.module-drawer,.markos-module-drawer) button:not(.active),
html[data-markos-theme] :is(.standard-dialog,.modal) :is(input,select,textarea),
html[data-markos-theme] .standard-footer button:not(.confirm):not(.save) {
  color: var(--mark-text);
  border-color: var(--mark-line);
  background: var(--mark-field);
}
html[data-markos-theme] .module-version { color: var(--mark-muted); }

/* Today’s Work: preserve blue/status colours, replace only surfaces and text roles. */
html[data-markos-page="todays"][data-markos-theme] body {
  color: var(--mark-text);
  background: var(--mark-bg);
}
html[data-markos-page="todays"][data-markos-theme] :is(.panel,.store-card,.appointment-card,.card-menu,.card-menu button,.outline-button,.version-button) {
  color: var(--mark-text);
  border-color: var(--mark-line);
  background-color: var(--mark-card);
}
html[data-markos-page="todays"][data-markos-theme="dark"] :is(.closing-content,.version-item,.booking-desk-actions button) {
  color: var(--mark-text);
  border-color: var(--mark-line);
  background: var(--mark-card-soft);
}
html[data-markos-page="todays"][data-markos-theme="dark"] .bottom-nav { background: rgba(23,29,42,.96); }
html[data-markos-page="todays"][data-markos-theme="dark"] .day:not(.selected) { color: var(--mark-text); }
html[data-markos-page="todays"][data-markos-theme="dark"] .day.sat:not(.selected) { color: #4c7dff; }
html[data-markos-page="todays"][data-markos-theme="dark"] .day.sun:not(.selected) { color: #ff4545; }

/* Full Station (desktop/tablet) roles. Mobile-lite keeps its already verified skin. */
html[data-markos-page="workstation"][data-markos-theme] body:not(.shared-dark) { color: var(--mark-text); }
html[data-markos-page="workstation"][data-markos-theme] :is(.patient-card,.stage-tabs button,.tool-rail,.selection-panel,.entry-panel,.field input,.field select,.field textarea,.chip,.selection-list button,.timer-bar,.modal,.module-drawer) {
  color: var(--mark-text);
  border-color: var(--mark-line);
  background-color: var(--mark-card);
}
html[data-markos-page="workstation"][data-markos-theme="dark"] :is(.panel,.patient-strip,.patient-card,.stage-tabs button,.tool-rail,.selection-panel,.entry-panel,.timer-bar) {
  color: var(--mark-text);
  border-color: var(--mark-line);
  background: var(--mark-card);
}
html[data-markos-page="workstation"][data-markos-theme="dark"] :is(.tool-rail button,.selection-list button,.timer-actions button,.change-service) {
  color: var(--mark-text);
  border-color: var(--mark-line);
  background: var(--mark-card-soft);
}

/* Appearance picker. */
.markos-appearance-backdrop {
  position: fixed; z-index: 10000; inset: 0; padding: 18px;
  display: grid; place-items: center; background: rgba(0,18,52,.48); backdrop-filter: blur(5px);
}
.markos-appearance-dialog {
  width: min(100%,460px); overflow: hidden; border: 1px solid var(--mark-line);
  border-radius: 22px; color: var(--mark-text); background: var(--mark-card);
  box-shadow: 0 24px 70px rgba(0,15,50,.34);
}
.markos-appearance-dialog header { padding: 22px 22px 14px; border-bottom: 1px solid var(--mark-line); }
.markos-appearance-dialog h2 { margin: 0; font-size: 22px; }
.markos-appearance-dialog p { margin: 7px 0 0; color: var(--mark-muted); font-size: 13px; line-height: 1.45; }
.markos-appearance-options { display: grid; gap: 10px; padding: 16px 18px; }
.markos-language-dialog .markos-appearance-options { max-height: min(58vh,460px); overflow: auto; }
.markos-appearance-options button {
  width: 100%; min-height: 70px; padding: 11px 13px; display: grid;
  grid-template-columns: 42px 1fr 24px; align-items: center; gap: 11px;
  border: 1px solid var(--mark-line); border-radius: 15px; color: var(--mark-text);
  background: var(--mark-card-soft); text-align: left;
}
.markos-appearance-options button.selected { border-color: #0878ef; box-shadow: 0 0 0 2px rgba(8,120,239,.14); }
.appearance-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #0878ef; background: rgba(8,120,239,.1); font-size: 21px; }
.markos-appearance-options b,.markos-appearance-options small { display: block; }
.markos-appearance-options b { font-size: 15px; }
.markos-appearance-options small { margin-top: 3px; color: var(--mark-muted); font-size: 11px; line-height: 1.35; }
.markos-appearance-options i { color: transparent; font-style: normal; font-weight: 900; }
.markos-appearance-options .selected i { color: #0878ef; }
.markos-appearance-dialog footer { padding: 12px 18px 18px; }
.markos-appearance-close { width: 100%; min-height: 44px; border: 1px solid var(--mark-line); border-radius: 12px; color: var(--mark-text); background: var(--mark-card); font-weight: 800; }
@media(max-width:600px) {
  .markos-appearance-backdrop { align-items: end; padding: 10px; }
  .markos-appearance-dialog { border-radius: 22px 22px 14px 14px; }
}