:root {
  --wpf-primary: #4a9eff;
  --wpf-accent: #e0a23a;
  --wpf-radius: 6px;
  --wpf-maxw: 1110px;
  --wpf-header-bg: #111418;
  --wpf-header-fg: #ffffff;
  --wpf-header-h: 48px;
  --wpf-btn-radius: 6px;
}
:root, :root[data-theme="light"] {
  --wpf-bg: #f4f5f7;
  --wpf-surface: #ffffff;
  --wpf-surface-2: #e9ebef;
  --wpf-border: #cdd2d8;
  --wpf-text: #1d2126;
  --wpf-text-muted: #697079;
  --wpf-shadow: 0 1px 3px rgba(20,30,40,.08);
}
:root[data-theme="dark"] {
  --wpf-bg: #1e2024;
  --wpf-surface: #26292e;
  --wpf-surface-2: #2e3238;
  --wpf-border: #3a3f46;
  --wpf-text: #d8dce0;
  --wpf-text-muted: #878d96;
  --wpf-shadow: 0 8px 28px rgba(0,0,0,.45);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --wpf-bg: #1e2024;
  --wpf-surface: #26292e;
  --wpf-surface-2: #2e3238;
  --wpf-border: #3a3f46;
  --wpf-text: #d8dce0;
  --wpf-text-muted: #878d96;
  --wpf-shadow: 0 8px 28px rgba(0,0,0,.45);
  }
}

/* preset: fotoarray */
body{font:13px/1.45 "Segoe UI",system-ui,sans-serif;}*{scrollbar-color:var(--wpf-surface-2) var(--wpf-bg);scrollbar-width:thin}::-webkit-scrollbar{width:11px;height:11px}::-webkit-scrollbar-track{background:var(--wpf-bg)}::-webkit-scrollbar-thumb{background:var(--wpf-surface-2);border-radius:6px;border:2px solid var(--wpf-bg)}::-webkit-scrollbar-thumb:hover{background:var(--wpf-border)}.btn,.btn-primary,.topsearch input,.filter-combo,.mod-btn{border-radius:5px;}.btn{background:var(--wpf-surface-2);border-color:var(--wpf-border);}.btn:hover{background:var(--wpf-border);border-color:var(--wpf-border);}.btn-primary{background:var(--wpf-primary);border-color:var(--wpf-primary);}.tag{border-radius:4px;}.side-h{font-size:11px;letter-spacing:.5px;}

/* custom */
.topbar { background: #31588c; }