:root {
  color-scheme: light;
  --bg: #F9FAFB; --surface: #FFFFFF; --soft: #EEF2F4; --ink: #0C0E11; --muted: #5B6470; --line: #E2E7EA;
  --accent: #0C7C59; --accent-strong: #075E44; --accent-soft: rgba(16, 185, 129, 0.14); --accent-faint: rgba(12, 124, 89, 0.35);
  --posts: #D97706; --posts-faint: rgba(217, 119, 6, 0.35); --posts-ink: #B45309; /* ink: axis text, 5:1 on white */
  --red: #C2410C; --red-bg: #FFF1EB; --on-accent: #FFFFFF; --on-red: #FFFFFF;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0C0E11; --surface: #15181D; --soft: #1F242B; --ink: #F9FAFB; --muted: #9AA3AE; --line: #272C34;
    --accent: #10B981; --accent-strong: #34D399; --accent-soft: rgba(16, 185, 129, 0.16); --accent-faint: rgba(16, 185, 129, 0.35);
    --posts: #F59E0B; --posts-faint: rgba(245, 158, 11, 0.35); --posts-ink: #F59E0B;
    --red: #FB923C; --red-bg: rgba(251, 146, 60, 0.12); --on-accent: #0C0E11; --on-red: #0C0E11;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0C0E11; --surface: #15181D; --soft: #1F242B; --ink: #F9FAFB; --muted: #9AA3AE; --line: #272C34;
  --accent: #10B981; --accent-strong: #34D399; --accent-soft: rgba(16, 185, 129, 0.16); --accent-faint: rgba(16, 185, 129, 0.35);
  --posts: #F59E0B; --posts-faint: rgba(245, 158, 11, 0.35); --posts-ink: #F59E0B;
  --red: #FB923C; --red-bg: rgba(251, 146, 60, 0.12); --on-accent: #0C0E11; --on-red: #0C0E11;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; } /* .toolbar and .banner are flex boxes, which would beat the hidden attribute */
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--body); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.top { position: sticky; top: 0; z-index: 3; display: grid; gap: 10px; padding: 10px clamp(16px, 4vw, 40px); background: var(--surface); border-bottom: 1px solid var(--line); }
.top > * { min-width: 0; } /* grid items would otherwise grow to fit the range bar and widen the page */
.top-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.mark { margin-right: auto; font: 700 22px var(--display); letter-spacing: -0.02em; text-decoration: none; }
.mark span { color: var(--accent); }
.mark small { margin-left: 6px; font: 500 12px var(--body); color: var(--muted); letter-spacing: 0; }
nav { display: flex; gap: 4px; }
nav a { padding: 6px 12px; border-radius: 999px; font-weight: 500; color: var(--muted); text-decoration: none; }
nav a.active { background: var(--soft); color: var(--ink); }
.theme { padding: 6px 12px; font-size: 13px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.ranges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 100%; min-width: 0; }
.seg { display: inline-flex; gap: 2px; max-width: 100%; padding: 3px; background: var(--soft); border-radius: 999px; }
.seg.scroll { min-width: 0; overflow-x: auto; scrollbar-width: none; } /* min-width 0 lets it shrink and scroll inside the flex row */
.seg button { padding: 5px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 500 13px var(--body); white-space: nowrap; cursor: pointer; }
.seg button:hover:not(.on) { color: var(--ink); }
.seg button.on { background: var(--accent); color: var(--on-accent); }
.seg.small button { padding: 3px 10px; font-size: 12px; }
.count { display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 5px; border-radius: 999px; background: var(--red); color: var(--on-red); font-size: 11px; line-height: 18px; text-align: center; }
.custom { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.custom input { padding: 5px 8px; font-size: 13px; }
.range-select { display: none; } /* phones get a select instead of the range bar */
.banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 8px clamp(16px, 4vw, 40px); background: var(--soft); font-size: 14px; font-weight: 500; }
.banner.bad { background: var(--red-bg); color: var(--red); }
.banner button { padding: 5px 12px; font-size: 13px; }
main { max-width: 1200px; margin: 0 auto; padding: 20px clamp(16px, 4vw, 40px) 64px; }
h1, h2, h3 { margin: 0 0 12px; font-family: var(--display); letter-spacing: -0.02em; }
h2 { margin-top: 32px; font-size: 26px; }
h3 { margin: 0; font-size: 16px; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.small { margin: 4px 0 0; font-size: 13px; }
.up { color: var(--accent); }
.down { color: var(--red); }
.card { padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.kpi { min-width: 0; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.kpi .label { display: block; font-size: 13px; color: var(--muted); }
.kpi strong { margin-right: 6px; font: 700 28px/1.25 var(--display); }
.kpi .up, .kpi .down { font-size: 13px; font-weight: 600; white-space: nowrap; }
.hint { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.card-head h2, .notable h2 { margin: 0; font-size: 16px; }
.notable { margin-bottom: 12px; }
.notable h2 { margin-bottom: 10px; }
.notable-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 24px; }
.notable h3 { margin: 0 0 6px; font: 600 13px var(--body); letter-spacing: 0; color: var(--muted); }
.notable ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.kpi.wide { grid-column: span 2; }
.best { margin: 4px 0 8px; }
.hours { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; height: 28px; }
.hours span { border-radius: 3px; background: var(--accent); }
.hours-axis { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; color: var(--muted); }
.chart-card { min-width: 0; margin-bottom: 12px; }
.chart { position: relative; height: 260px; }
.charts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 12px; }
@media (min-width: 900px) { .charts { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.charts .chart-card { margin-bottom: 0; }
.table-card { padding: 0; overflow: hidden; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
th { font-size: 13px; font-weight: 500; color: var(--muted); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
th .sort { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
th .sort:hover { color: var(--ink); }
tr.grp td { padding: 6px 12px; background: var(--soft); font-size: 12px; font-weight: 600; color: var(--muted); }
tr.bad td { background: var(--red-bg); }
tr.paused td { color: var(--muted); }
.who-cell { display: inline-flex; align-items: center; gap: 8px; max-width: 260px; font-weight: 600; text-decoration: none; }
.who-cell .h { overflow: hidden; text-overflow: ellipsis; }
.who-cell:hover .h { color: var(--accent); }
.av { display: inline-block; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--soft); object-fit: cover; }
.warn { margin: 4px 0 0; font-size: 12px; font-weight: 500; color: var(--red); white-space: normal; }
.spark { display: block; }
.spark polyline { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; }
.spark.posts polyline { stroke: var(--posts); }
.pill { padding: 2px 8px; border-radius: 999px; background: var(--soft); color: var(--muted); font: 600 12px var(--body); text-transform: uppercase; vertical-align: middle; }
.hot { padding: 1px 6px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; }
details.posts-box { margin-top: 12px; padding: 0; overflow: hidden; }
details.posts-box summary { padding: 14px 16px; font-weight: 600; cursor: pointer; }
details.posts-box[open] summary { border-bottom: 1px solid var(--line); }
details.posts-box > p { padding: 12px 16px; margin: 0; }
.post-text { max-width: 340px; overflow: hidden; text-overflow: ellipsis; }
form.add { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; align-items: end; }
label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
input, select, button { padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; }
button { border: 0; background: var(--ink); color: var(--bg); font-weight: 600; cursor: pointer; }
button.ghost { background: var(--soft); color: var(--ink); }
button:disabled { opacity: 0.5; cursor: wait; }
button.danger { border: 1px solid var(--red); background: transparent; color: var(--red); }
button.danger:hover { background: var(--red-bg); }
.acct-cell { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.acts { display: inline-flex; gap: 8px; }
.acts .danger { margin-left: 16px; } /* away from Pausieren */
.error { min-height: 1.5em; margin: 8px 0 0; color: var(--red); }
.login { display: grid; gap: 10px; max-width: 360px; margin: 12vh auto; }
.cover { display: block; width: 100%; height: clamp(110px, 22vw, 200px); border-radius: 14px; background: var(--soft); object-fit: cover; }
.who { display: flex; align-items: flex-end; gap: 14px; margin: 12px 0 16px; }
.who > div { min-width: 0; }
.who h1 { margin: 0; overflow-wrap: anywhere; }
.who p { margin: 2px 0 0; overflow-wrap: anywhere; }
.avatar { flex: none; width: 72px; height: 72px; border: 3px solid var(--surface); border-radius: 50%; background: var(--soft); object-fit: cover; }
.who.lifted { padding-left: 16px; }
.who.lifted .avatar { margin-top: -40px; }
@media (max-width: 600px) {
  .top { position: static; }
  .ranges .seg { display: none; }
  .range-select { display: block; }
  button, select, input, nav a, .mark, main a { min-height: 44px; }
  button { min-width: 44px; }
  nav a, .mark, main a { display: inline-flex; align-items: center; }
  .acct-cell { flex-direction: column; align-items: flex-start; }
  .mark small { display: none; }
  nav a { padding: 6px 8px; }
  .opt { display: none; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi strong { font-size: 22px; }
  .chart { height: 220px; }
  th, td { padding: 8px; }
}