/* Datare color schemes and shared theme control. */
.datareThemeToggle {
  position: relative;
  width: 92px;
  height: 42px;
  flex: 0 0 92px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 3px;
  border: 1px solid rgba(10, 40, 92, 0.16);
  border-radius: 21px;
  background: #e7ebf5;
  box-shadow: inset 0 1px 3px rgba(10, 40, 92, 0.12), 0 5px 14px rgba(10, 40, 92, 0.1);
  color: #66718d;
  cursor: pointer;
  isolation: isolate;
}

.datareThemeToggle--floating {
  position: fixed;
  z-index: 1000;
  top: 18px;
  right: 18px;
}

.datareThemeToggle__option {
  position: relative;
  z-index: 2;
  height: 34px;
  display: grid;
  place-items: center;
  transition: color 180ms ease;
}

.datareThemeToggle__icon {
  width: 18px;
  height: 18px;
  display: block;
  background: currentColor;
  mask: var(--theme-icon) center / contain no-repeat;
  -webkit-mask: var(--theme-icon) center / contain no-repeat;
}

.datareThemeToggle__icon--sun { --theme-icon: url("../icons/brand/sun.svg"); }
.datareThemeToggle__icon--moon { --theme-icon: url("../icons/brand/moon.svg"); }

.datareThemeToggle__thumb {
  position: absolute;
  z-index: 1;
  top: 3px;
  left: 3px;
  width: 40px;
  height: 34px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 3px 10px rgba(10, 40, 92, 0.2);
  transition: transform 200ms ease, background-color 200ms ease;
}

html[data-color-scheme="light"] .datareThemeToggle__option--light,
html[data-color-scheme="dark"] .datareThemeToggle__option--dark {
  color: #315fe3;
}

html[data-color-scheme="dark"] .datareThemeToggle {
  border-color: rgba(163, 164, 219, 0.28);
  background: #07162c;
  color: #8f9bbb;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.5), 0 5px 16px rgba(0, 0, 0, 0.24);
}

html[data-color-scheme="dark"] .datareThemeToggle__thumb {
  transform: translateX(46px);
  background: #172b52;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.34);
}

html[data-color-scheme="dark"] .datareThemeToggle__option--dark { color: #c7c9ff; }

/* High-contrast dialogs in both schemes. */
.datare-ui .modal {
  border: 1px solid rgba(10, 40, 92, 0.18);
  background: #ffffff;
  color: #17294d;
  box-shadow: 0 28px 70px rgba(10, 24, 58, 0.28);
}

.datare-ui .modal::backdrop {
  background: rgba(5, 12, 30, 0.66);
  backdrop-filter: blur(3px);
}

.datare-ui .modal__head {
  border-bottom-color: rgba(10, 40, 92, 0.13);
  background: #f7f9ff;
}

.datare-ui .modal__head h3,
.datare-ui .modal__body,
.datare-ui .modal label { color: #17294d; }

.datare-ui .modal__head p,
.datare-ui .modal .muted,
.datare-ui .modal .help { color: #5f6b87; }

.datare-ui .modal .iconBtn {
  border-color: rgba(10, 40, 92, 0.16);
  background: #ffffff;
  color: #17294d;
}

/* Calendar and time selection: visible states are intentionally explicit. */
.datare-ui .calendarMonth,
.datare-ui .slotGroup {
  border-color: rgba(10, 40, 92, 0.16);
  background: #ffffff;
  color: #17294d;
}

.datare-ui .calendarMonth__title,
.datare-ui .slotGroup__title { color: #0a285c; }

.datare-ui .calendarWeekdays span { color: #65718f; }

.datare-ui .calendarDay--available {
  border-color: #7896ec;
  background: #edf2ff;
  color: #15356f;
  box-shadow: 0 1px 2px rgba(10, 40, 92, 0.08);
}

.datare-ui .calendarDay--available:hover {
  border-color: #315fe3;
  background: #dfe8ff;
  color: #0a285c;
}

.datare-ui .calendarDay--available.is-selected {
  border-color: #2448ba;
  background: #315fe3;
  color: #ffffff;
  box-shadow: 0 0 0 4px rgba(49, 95, 227, 0.2);
}

.datare-ui .calendarDay--disabled {
  border-color: #e2e6ef;
  background: #f3f5f9;
  color: #9aa3b7;
}

.datare-ui .slotButton {
  border-color: #7896ec;
  background: #edf2ff;
  color: #15356f;
}

.datare-ui .slotButton.is-selected {
  border-color: #2448ba;
  background: #315fe3;
  color: #ffffff;
  box-shadow: 0 0 0 4px rgba(49, 95, 227, 0.18);
}

/* Dark keeps the current Datare structure, iconography and brand. */
html[data-color-scheme="dark"] body.datare-ui {
  --datare-ink: #f5f7ff;
  --datare-text: #edf2ff;
  --datare-muted: #aeb9d1;
  --datare-canvas: #07111f;
  --datare-surface: rgba(16, 29, 49, 0.94);
  --datare-surface-strong: #13243d;
  --datare-line: rgba(174, 190, 225, 0.2);
  --datare-shadow-panel: 0 18px 42px rgba(0, 0, 0, 0.3);
  --bg: #07111f;
  --surface: rgba(16, 29, 49, 0.94);
  --surface2: #13243d;
  --line: rgba(174, 190, 225, 0.2);
  --text: #edf2ff;
  --muted: #aeb9d1;
  --select-panel-bg: #14253e;
  --select-panel-text: #edf2ff;
  color: #edf2ff;
  background: #07111f;
}

html[data-color-scheme="dark"] body.datare-ui.page-agendamento[data-theme] {
  background: #07111f;
}

html[data-color-scheme="dark"] body.datare-ui.page-agendamento::before {
  background:
    linear-gradient(118deg, rgba(49, 95, 227, 0.1) 0 28%, transparent 28% 100%),
    linear-gradient(68deg, transparent 0 70%, rgba(98, 58, 210, 0.11) 70% 82%, transparent 82%),
    repeating-linear-gradient(90deg, rgba(180, 194, 230, 0.025) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg, rgba(180, 194, 230, 0.02) 0 1px, transparent 1px 96px);
}

html[data-color-scheme="dark"] body.datare-ui.page-agendamento::after {
  border-color: rgba(163, 164, 219, 0.1);
  background: rgba(49, 95, 227, 0.05);
  box-shadow: 0 42px 90px rgba(0, 0, 0, 0.24);
}

html[data-color-scheme="dark"] body.datare-ui.page-agendamento[data-theme] .side {
  border-right-color: rgba(163, 164, 219, 0.18);
  background: #04142f;
}

html[data-color-scheme="dark"] body.datare-ui.page-agendamento[data-theme] .top,
html[data-color-scheme="dark"] body.datare-ui.page-agendamento[data-theme] .card,
html[data-color-scheme="dark"] body.datare-ui.page-agendamento[data-theme] .subcard,
html[data-color-scheme="dark"] .datare-ui .panel,
html[data-color-scheme="dark"] .datare-ui .tableWrap,
html[data-color-scheme="dark"] .datare-ui .choiceCard,
html[data-color-scheme="dark"] .datare-ui .callout,
html[data-color-scheme="dark"] .datare-ui .note {
  border-color: rgba(174, 190, 225, 0.18);
  background: rgba(16, 29, 49, 0.94);
  color: #edf2ff;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

html[data-color-scheme="dark"] .datare-ui h1,
html[data-color-scheme="dark"] .datare-ui h2,
html[data-color-scheme="dark"] .datare-ui h3,
html[data-color-scheme="dark"] .datare-ui h4,
html[data-color-scheme="dark"] .datare-ui label,
html[data-color-scheme="dark"] .datare-ui strong,
html[data-color-scheme="dark"] .datare-ui th { color: #f5f7ff; }

html[data-color-scheme="dark"] .datare-ui .muted,
html[data-color-scheme="dark"] .datare-ui .help,
html[data-color-scheme="dark"] .datare-ui .top__left p { color: #aeb9d1; }

html[data-color-scheme="dark"] body.datare-ui.page-agendamento[data-theme] .input,
html[data-color-scheme="dark"] body.datare-ui.page-agendamento[data-theme] input,
html[data-color-scheme="dark"] body.datare-ui.page-agendamento[data-theme] select,
html[data-color-scheme="dark"] body.datare-ui.page-agendamento[data-theme] textarea,
html[data-color-scheme="dark"] .datare-ui .input,
html[data-color-scheme="dark"] .datare-ui input,
html[data-color-scheme="dark"] .datare-ui select,
html[data-color-scheme="dark"] .datare-ui textarea {
  border-color: rgba(174, 190, 225, 0.24);
  background: #0c1b30;
  color: #edf2ff;
}

html[data-color-scheme="dark"] body.datare-ui.page-agendamento[data-theme] input::placeholder,
html[data-color-scheme="dark"] body.datare-ui.page-agendamento[data-theme] textarea::placeholder,
html[data-color-scheme="dark"] .datare-ui input::placeholder,
html[data-color-scheme="dark"] .datare-ui textarea::placeholder {
  color: rgba(233, 238, 250, 0.52);
}

html[data-color-scheme="dark"] .datare-ui input::placeholder,
html[data-color-scheme="dark"] .datare-ui textarea::placeholder { color: #7f8ba6; }

html[data-color-scheme="dark"] .datare-ui td {
  border-color: rgba(174, 190, 225, 0.13);
  color: #dce5f8;
}

html[data-color-scheme="dark"] .datare-ui tbody tr:hover { background: rgba(49, 95, 227, 0.08); }

html[data-color-scheme="dark"] .datare-ui .modal {
  border-color: rgba(174, 190, 225, 0.26);
  background: #101d31;
  color: #edf2ff;
  box-shadow: 0 30px 76px rgba(0, 0, 0, 0.55);
}

html[data-color-scheme="dark"] .datare-ui .modal__head {
  border-bottom-color: rgba(174, 190, 225, 0.18);
  background: #14253e;
}

html[data-color-scheme="dark"] .datare-ui .modal__head h3,
html[data-color-scheme="dark"] .datare-ui .modal__body,
html[data-color-scheme="dark"] .datare-ui .modal label { color: #f5f7ff; }

html[data-color-scheme="dark"] .datare-ui .modal__head p,
html[data-color-scheme="dark"] .datare-ui .modal .muted,
html[data-color-scheme="dark"] .datare-ui .modal .help { color: #b6c2da; }

html[data-color-scheme="dark"] .datare-ui .modal .iconBtn {
  border-color: rgba(174, 190, 225, 0.22);
  background: #0c1b30;
  color: #ffffff;
}

html[data-color-scheme="dark"] body.datare-ui.page-agendamento[data-theme] .calendarMonth,
html[data-color-scheme="dark"] body.datare-ui.page-agendamento[data-theme] .slotGroup {
  border-color: rgba(174, 190, 225, 0.22);
  background: #0d1c31;
  color: #edf2ff;
}

html[data-color-scheme="dark"] body.datare-ui.page-agendamento[data-theme] .calendarMonth__title,
html[data-color-scheme="dark"] body.datare-ui.page-agendamento[data-theme] .slotGroup__title { color: #f5f7ff; }

html[data-color-scheme="dark"] body.datare-ui.page-agendamento[data-theme] .calendarWeekdays span { color: #aeb9d1; }

html[data-color-scheme="dark"] .datare-ui .calendarDay--available,
html[data-color-scheme="dark"] .datare-ui .slotButton {
  border-color: #5479e7;
  background: #142b55;
  color: #f3f6ff;
}

html[data-color-scheme="dark"] .datare-ui .calendarDay--available:hover,
html[data-color-scheme="dark"] .datare-ui .slotButton:hover {
  border-color: #86a2ff;
  background: #1c3a72;
}

html[data-color-scheme="dark"] .datare-ui .calendarDay--available.is-selected,
html[data-color-scheme="dark"] .datare-ui .slotButton.is-selected {
  border-color: #b4c5ff;
  background: #416de8;
  color: #ffffff;
  box-shadow: 0 0 0 4px rgba(95, 132, 240, 0.28);
}

html[data-color-scheme="dark"] .datare-ui .calendarDay--disabled {
  border-color: rgba(174, 190, 225, 0.1);
  background: #091526;
  color: #66728b;
}

/* Login follows the same saved preference. */
html[data-color-scheme="dark"] body.datare-login {
  --login-text: #edf2ff;
  --login-muted: #acb8d0;
  --login-line: rgba(174, 190, 225, 0.22);
  background: #07111f;
  color: #edf2ff;
}

html[data-color-scheme="dark"] .datare-login::before {
  border-color: rgba(163, 164, 219, 0.12);
  background: repeating-linear-gradient(90deg, rgba(180, 194, 230, 0.025) 0 1px, transparent 1px 92px), rgba(49, 95, 227, 0.05);
}

html[data-color-scheme="dark"] .datare-login::after {
  border-color: rgba(163, 164, 219, 0.12);
  background: linear-gradient(145deg, rgba(49, 95, 227, 0.12), rgba(98, 58, 210, 0.09));
}

html[data-color-scheme="dark"] .datare-login .login-shell {
  border-color: rgba(174, 190, 225, 0.18);
  background: rgba(10, 23, 42, 0.82);
  box-shadow: 0 30px 76px rgba(0, 0, 0, 0.4);
}

html[data-color-scheme="dark"] .datare-login .login-form-card {
  border-color: rgba(174, 190, 225, 0.18);
  background: rgba(16, 29, 49, 0.94);
}

html[data-color-scheme="dark"] .datare-login h1,
html[data-color-scheme="dark"] .datare-login label,
html[data-color-scheme="dark"] .datare-login .entry-alt-title { color: #f5f7ff; }

html[data-color-scheme="dark"] .datare-login .subtitle,
html[data-color-scheme="dark"] .datare-login .remember,
html[data-color-scheme="dark"] .datare-login .entry-alt { color: #acb8d0; }

html[data-color-scheme="dark"] .datare-login .input {
  border-color: rgba(174, 190, 225, 0.22);
  background: #0c1b30;
  color: #edf2ff;
}

html[data-color-scheme="dark"] .datare-login .entry-alt {
  border-color: rgba(136, 105, 235, 0.3);
  background: rgba(98, 58, 210, 0.11);
}

@media (max-width: 640px) {
  .datareThemeToggle {
    width: 82px;
    height: 38px;
    flex-basis: 82px;
  }

  .datareThemeToggle__option { height: 30px; }
  .datareThemeToggle__thumb { width: 35px; height: 30px; }
  html[data-color-scheme="dark"] .datareThemeToggle__thumb { transform: translateX(41px); }
  .datareThemeToggle--floating { top: 10px; right: 10px; }

  body.datare-login {
    padding-top: 58px;
  }
}

/* Classic dark: original purple interface, with the current Datare structure. */
html[data-color-scheme="dark"] body.datare-ui,
html[data-color-scheme="dark"] body.datare-ui.page-agendamento[data-theme] {
  --datare-ink: #f4f6fb;
  --datare-text: #f4f6fb;
  --datare-muted: rgba(233, 238, 250, 0.74);
  --datare-primary: #7a42a7;
  --datare-primary-hover: #9153bd;
  --datare-canvas: #171a29;
  --datare-surface: rgba(255, 255, 255, 0.07);
  --datare-surface-strong: rgba(255, 255, 255, 0.11);
  --datare-line: rgba(255, 255, 255, 0.18);
  --datare-focus: rgba(84, 200, 243, 0.22);
  --datare-shadow-panel: 0 16px 38px rgba(9, 15, 33, 0.38);
  --bg: #171a29;
  --surface: rgba(255, 255, 255, 0.09);
  --surface2: rgba(255, 255, 255, 0.14);
  --line: rgba(255, 255, 255, 0.18);
  --text: #f4f6fb;
  --muted: rgba(233, 238, 250, 0.74);
  --purple: #5b2b82;
  --teal: #00b3a4;
  --cyan: #54c8f3;
  --pink: #e94b9a;
  --yellow: #f2c14e;
  --select-panel-bg: #1a2134;
  --select-panel-text: #f4f6fb;
  color: #f4f6fb;
  background:
    radial-gradient(900px 600px at 14% -10%, rgba(86, 176, 204, 0.25), transparent 60%),
    radial-gradient(1000px 700px at 90% 10%, rgba(230, 66, 138, 0.18), transparent 65%),
    radial-gradient(1100px 700px at 40% 120%, rgba(24, 169, 153, 0.18), transparent 60%),
    #171a29;
}

html[data-color-scheme="dark"] body.datare-ui.page-agendamento::before {
  background:
    linear-gradient(135deg, transparent 49.4%, rgba(86, 176, 204, 0.11) 49.8%, rgba(86, 176, 204, 0.11) 50.2%, transparent 50.6%) 8% 18% / 140px 140px no-repeat,
    linear-gradient(315deg, transparent 49.3%, rgba(230, 66, 138, 0.1) 49.8%, rgba(230, 66, 138, 0.1) 50.2%, transparent 50.7%) 86% 24% / 160px 160px no-repeat,
    linear-gradient(45deg, transparent 49.2%, rgba(24, 169, 153, 0.11) 49.8%, rgba(24, 169, 153, 0.11) 50.2%, transparent 50.8%) 18% 78% / 130px 130px no-repeat,
    linear-gradient(225deg, transparent 49.2%, rgba(90, 46, 138, 0.1) 49.8%, rgba(90, 46, 138, 0.1) 50.2%, transparent 50.8%) 74% 84% / 150px 150px no-repeat;
}

html[data-color-scheme="dark"] body.datare-ui.page-agendamento::after {
  border: 0;
  background:
    radial-gradient(circle at 22% 26%, rgba(242, 193, 91, 0.14) 0 22px, transparent 23px),
    radial-gradient(circle at 74% 36%, rgba(86, 176, 204, 0.13) 0 18px, transparent 19px),
    radial-gradient(circle at 58% 72%, rgba(230, 66, 138, 0.12) 0 15px, transparent 16px),
    radial-gradient(circle at 12% 66%, rgba(24, 169, 153, 0.13) 0 14px, transparent 15px),
    radial-gradient(circle at 88% 78%, rgba(90, 46, 138, 0.11) 0 20px, transparent 21px);
  box-shadow: none;
  transform: none;
  backdrop-filter: none;
  opacity: 0.55;
}

html[data-color-scheme="dark"] body.datare-ui.page-agendamento[data-theme] .side {
  border-right-color: rgba(255, 255, 255, 0.18);
  background: linear-gradient(180deg, rgba(91, 43, 130, 0.28), rgba(17, 18, 32, 0.96));
}

html[data-color-scheme="dark"] body.datare-ui.page-agendamento[data-theme] .side__brand {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
}

html[data-color-scheme="dark"] body.datare-ui.page-agendamento[data-theme] .navitem {
  color: rgba(244, 246, 251, 0.82);
}

html[data-color-scheme="dark"] body.datare-ui.page-agendamento[data-theme] .navitem:hover,
html[data-color-scheme="dark"] body.datare-ui.page-agendamento[data-theme] .navitem.is-active {
  border-color: rgba(233, 75, 154, 0.3);
  background: linear-gradient(90deg, rgba(91, 43, 130, 0.42), rgba(233, 75, 154, 0.14));
  color: #ffffff;
}

html[data-color-scheme="dark"] body.datare-ui.page-agendamento[data-theme] .top,
html[data-color-scheme="dark"] body.datare-ui.page-agendamento[data-theme] .card,
html[data-color-scheme="dark"] body.datare-ui.page-agendamento[data-theme] .panel,
html[data-color-scheme="dark"] body.datare-ui.page-agendamento[data-theme] .choiceCard,
html[data-color-scheme="dark"] body.datare-ui.page-agendamento[data-theme] .callout,
html[data-color-scheme="dark"] body.datare-ui.page-agendamento[data-theme] .note {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.055);
  color: #f4f6fb;
  box-shadow: 0 16px 38px rgba(9, 15, 33, 0.38);
}

html[data-color-scheme="dark"] body.datare-ui.page-agendamento[data-theme] .subcard {
  border-color: rgba(233, 75, 154, 0.4);
  background: rgba(233, 75, 154, 0.08);
  color: #f4f6fb;
}

html[data-color-scheme="dark"] body.datare-ui.page-agendamento[data-theme] .input,
html[data-color-scheme="dark"] body.datare-ui.page-agendamento[data-theme] input,
html[data-color-scheme="dark"] body.datare-ui.page-agendamento[data-theme] select,
html[data-color-scheme="dark"] body.datare-ui.page-agendamento[data-theme] textarea,
html[data-color-scheme="dark"] .datare-ui .input,
html[data-color-scheme="dark"] .datare-ui input,
html[data-color-scheme="dark"] .datare-ui select,
html[data-color-scheme="dark"] .datare-ui textarea {
  border-color: rgba(255, 255, 255, 0.2);
  background-color: rgba(0, 0, 0, 0.28);
  color: #f4f6fb;
  box-shadow: none;
}

html[data-color-scheme="dark"] .datare-ui .input:disabled,
html[data-color-scheme="dark"] .datare-ui input:disabled,
html[data-color-scheme="dark"] .datare-ui .input--locked {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(233, 238, 250, 0.52);
}

html[data-color-scheme="dark"] .datare-ui .btn {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  box-shadow: none;
}

html[data-color-scheme="dark"] .datare-ui .btn:hover {
  filter: brightness(1.12);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

html[data-color-scheme="dark"] .datare-ui .btn--primary,
html[data-color-scheme="dark"] .datare-ui .btn--purple,
html[data-color-scheme="dark"] .datare-ui .btn--pink {
  border-color: rgba(233, 75, 154, 0.56);
  background: linear-gradient(90deg, rgba(91, 43, 130, 0.92), rgba(233, 75, 154, 0.68));
  color: #ffffff;
}

html[data-color-scheme="dark"] .datare-ui .btn--teal {
  border-color: rgba(0, 179, 164, 0.6);
  background: linear-gradient(90deg, rgba(0, 179, 164, 0.78), rgba(84, 200, 243, 0.42));
  color: #ffffff;
}

html[data-color-scheme="dark"] .datare-ui .btn--ghost {
  border-color: rgba(255, 255, 255, 0.2);
  background: transparent;
  color: #f4f6fb;
}

html[data-color-scheme="dark"] .datare-ui .btn--warn {
  border-color: rgba(242, 193, 78, 0.6);
  background: rgba(242, 193, 78, 0.16);
  color: #ffffff;
}

html[data-color-scheme="dark"] .datare-ui .tableWrap {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.2);
}

html[data-color-scheme="dark"] .datare-ui th {
  background: rgba(91, 43, 130, 0.16);
  color: rgba(233, 238, 250, 0.78);
}

html[data-color-scheme="dark"] .datare-ui td {
  border-color: rgba(255, 255, 255, 0.1);
  color: #f4f6fb;
}

html[data-color-scheme="dark"] .datare-ui tbody tr:hover {
  background: rgba(233, 75, 154, 0.07);
}

html[data-color-scheme="dark"] .datare-ui .modal {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(10, 10, 18, 0.98);
  color: #f4f6fb;
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.58);
}

html[data-color-scheme="dark"] .datare-ui .modal__head {
  border-bottom-color: rgba(255, 255, 255, 0.14);
  background: rgba(91, 43, 130, 0.2);
}

html[data-color-scheme="dark"] body.datare-ui.page-agendamento[data-theme] .calendarMonth,
html[data-color-scheme="dark"] body.datare-ui.page-agendamento[data-theme] .slotGroup {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.2);
}

html[data-color-scheme="dark"] .datare-ui .calendarDay--available,
html[data-color-scheme="dark"] .datare-ui .slotButton {
  border-color: rgba(0, 179, 164, 0.55);
  background: linear-gradient(180deg, rgba(0, 179, 164, 0.28), rgba(0, 179, 164, 0.1));
  color: #eafff9;
}

html[data-color-scheme="dark"] .datare-ui .calendarDay--available.is-selected,
html[data-color-scheme="dark"] .datare-ui .slotButton.is-selected {
  border-color: rgba(84, 200, 243, 0.9);
  background: linear-gradient(180deg, rgba(91, 43, 130, 0.9), rgba(233, 75, 154, 0.6));
  color: #ffffff;
  box-shadow: 0 0 0 4px rgba(84, 200, 243, 0.16);
}

html[data-color-scheme="dark"] .datare-ui .calendarDay--disabled {
  border-color: rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(243, 244, 246, 0.3);
}

/* The login uses a softer dark treatment so the entry screen stays welcoming. */
html[data-color-scheme="dark"] body.datare-login {
  --login-text: #f7f5fb;
  --login-muted: rgba(239, 235, 247, 0.76);
  --login-line: rgba(255, 255, 255, 0.24);
  background:
    radial-gradient(900px 560px at 8% -10%, rgba(84, 200, 243, 0.2), transparent 68%),
    radial-gradient(820px 540px at 106% 106%, rgba(233, 75, 154, 0.16), transparent 68%),
    #242238;
  color: var(--login-text);
}

html[data-color-scheme="dark"] .datare-login::before {
  border-color: rgba(255, 255, 255, 0.14);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 92px),
    rgba(91, 43, 130, 0.09);
  box-shadow: 0 42px 100px rgba(11, 10, 24, 0.24);
}

html[data-color-scheme="dark"] .datare-login::after {
  border-color: rgba(255, 255, 255, 0.12);
  background: linear-gradient(145deg, rgba(84, 200, 243, 0.1), rgba(233, 75, 154, 0.09));
  box-shadow: -28px 36px 90px rgba(11, 10, 24, 0.22);
}

html[data-color-scheme="dark"] .datare-login .login-shell {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(45, 41, 67, 0.82);
  box-shadow: 0 30px 76px rgba(11, 10, 24, 0.32);
}

html[data-color-scheme="dark"] .datare-login .login-form-card {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(62, 56, 84, 0.88);
  box-shadow: 0 18px 44px rgba(11, 10, 24, 0.24);
}

html[data-color-scheme="dark"] .datare-login .brand {
  width: fit-content;
  margin-right: auto;
  padding: 13px 18px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 30px rgba(11, 10, 24, 0.22);
}

html[data-color-scheme="dark"] .datare-login .input {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(20, 18, 34, 0.46);
  color: #ffffff;
}

html[data-color-scheme="dark"] .datare-login .entry-alt {
  border-color: rgba(233, 75, 154, 0.3);
  background: rgba(91, 43, 130, 0.2);
  color: rgba(247, 245, 251, 0.8);
}