:root{
  --brand:#45848a;
  --brand-cream:#f3eedb;
  --bg:light-dark(#f7f5ed,#111a1b);
  --surface:light-dark(#fffef9,#1a2526);
  --surface-2:light-dark(#eeece2,#263334);
  --text:light-dark(#1d3335,#eef4f2);
  --muted:light-dark(#667779,#a8b8b8);
  --border:light-dark(#d9ddd6,#344748);
  --green:light-dark(#176a70,#72c1c2);
  --green-soft:light-dark(#e0eeee,#203c3e);
  --blue:light-dark(#2f6fad,#78aee0);
  --plum:light-dark(#7b5197,#c091df);
  --gold:light-dark(#b87216,#e2a84f);
  --red:light-dark(#ad3838,#ef8181);
  --orange:light-dark(#c2551a,#f29a62)
}
.topbar{
  min-height:72px;
  height:auto;
  background:var(--brand);
  border-bottom-color:color-mix(in srgb,var(--brand) 72%,#000);
  box-shadow:0 1px 8px rgba(22,58,61,.12)
}
.brand{color:var(--brand-cream);letter-spacing:.01em}
.brandname{font-family:Georgia,"Times New Roman",serif;font-size:1.08rem;letter-spacing:.055em}
.brandmark{display:grid;place-items:center;width:42px;height:50px;overflow:hidden;flex:0 0 auto;border-radius:0;background:transparent}
.brandmark img{display:block;width:36px;height:auto;max-height:50px;object-fit:contain}
.topbar .toplabel{color:color-mix(in srgb,var(--brand-cream) 82%,transparent)}
.topbar .primary{background:var(--brand-cream);color:#244d50}
.topbar .secondary,.topbar select{background:color-mix(in srgb,var(--brand-cream) 14%,transparent);border:1px solid color-mix(in srgb,var(--brand-cream) 28%,transparent);color:var(--brand-cream)}
.topbar .session-picker{color:color-mix(in srgb,var(--brand-cream) 82%,transparent)}
.dropzone{box-shadow:0 12px 35px rgba(30,73,76,.06)}
.panel{box-shadow:0 8px 26px rgba(30,73,76,.035)}
.event-band-pre{fill:#2f6fad;opacity:.14}
.event-band-post{fill:#176a70;opacity:.16}
.event-legend::after{content:"Blauw vlak: 2,5 min voor · teal vlak: 2,5 min na"}
.pre-window{background:color-mix(in srgb,var(--blue) 18%,transparent)}
.post-window{background:color-mix(in srgb,var(--green) 20%,transparent)}
@media print{.brand-theme{display:none}}