@font-face {
  font-family: Manrope;
  src: url("assets/Manrope.ttf") format("truetype");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --bg: #f7f4fa;
  --paper: #fff;
  --ink: #251734;
  --green: #542f79;
  --muted: #665a71;
  --line: #e6deed;
  --theme-text: var(--ink);
  --theme-surface: var(--paper);
  --theme-soft: #f2eaf8;
  --theme-focus: #8752b4;
  --jurie-action: #542f79;
  --jurie-hover: #40225e;
}
html[data-theme=dark] {
  --bg: #17101f;
  --paper: #231a2d;
  --ink: #faf4ff;
  --green: #dfbbff;
  --muted: #cbbfd5;
  --line: #483753;
  --theme-text: var(--ink);
  --theme-surface: var(--paper);
  --theme-soft: #30213e;
  --theme-focus: #cda1f0;
  --jurie-action: #70469b;
  --jurie-hover: #8558ad;
}
body { color: var(--ink); }
.jurie-brand img { width: 112px; height: auto; }
.jurie-brand .jurie-dark, [data-theme=dark] .jurie-brand .jurie-light { display: none; }
html[data-theme=dark] .jurie-brand .jurie-dark { display: block; filter: none; }
body :is(button, input, textarea, select, summary, a):focus-visible {
  outline: 3px solid var(--theme-focus);
  outline-offset: 3px;
}

body:has(aside .jurie-brand) aside { background: var(--paper); border-color: var(--line); }
body:has(aside .jurie-brand) h1 { font-family: Manrope, sans-serif; font-weight: 800; }
body:has(aside .jurie-brand) :is(.panel, .integration, .quick, .stat, .weekday, .startGuide) { border-radius: 16px; }
body:has(aside .jurie-brand) .notice { color: var(--muted); }
body:has(aside .jurie-brand) nav button.active,
body:has(aside .jurie-brand) .primary {
  background: var(--jurie-action);
  border-color: transparent;
  color: white;
}
html[data-theme=dark] body :is(.primary, nav button.active, .filters button.selected:not(.contextFilter), #toast) {
  background: var(--jurie-action) !important;
  border-color: transparent !important;
  color: white !important;
}
html[data-theme=dark] body :is(.primary:hover, nav button.active:hover) { background: var(--jurie-hover) !important; }
html[data-theme=dark] body nav button:not(.active):hover { background: var(--theme-soft) !important; }
html[data-theme=dark] body aside .themeModes button[aria-pressed=true],
html[data-theme=dark] .jurie-login .themeModes button[aria-pressed=true] {
  background: var(--theme-soft) !important;
  color: var(--theme-focus) !important;
}
@media (max-width: 760px) {
  aside .jurie-brand img { width: 93px; }
}

nav .nav-icon { width: 17px; height: 17px; vertical-align: -.23em; margin-right: .45em; }
body:has(aside .jurie-brand) .notice {
  background: var(--theme-soft);
  border-radius: 12px;
}
body:has(aside .jurie-brand) .dailySummaryGrid button {
  background: var(--paper);
  border-radius: 14px;
}
body:has(aside .jurie-brand) .dailySummaryGrid button:hover { background: var(--theme-soft); }
body .themeModes button[aria-pressed=true] {
  background: var(--theme-soft);
  color: var(--jurie-action);
}
@media (max-width: 760px) {
  nav .nav-icon { width: 15px; height: 15px; margin-right: .3em; }
}

#localSyncStatus {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 10px 20px;
  background: #38204d;
  color: #fff;
  font: 13px/16px Inter, system-ui, sans-serif;
}
html[data-theme=dark] body > #localSyncStatus { background: #38204d !important; }
html[data-theme=dark] body:has(aside .jurie-brand) .notice {
  background: var(--theme-soft) !important;
  color: var(--muted) !important;
}
@media (min-width: 761px) {
  body:has(#localSyncStatus) aside { top: 36px; overflow-y: auto; }
}