/* motomonitoring.app · Monitoring mediów motocyklowych
   Zasada: interfejs neutralny, fiolet wskazuje (wybrane / najważniejsze), dane mają własną paletę bez gradientów.
   Wszystkie kolory przez tokeny niżej – w komponentach tylko var(--…). */

/* ================= tokeny (propozycja B „Signal”) =================
   Biel i czerń niosą interfejs; gradient błękit→fiolet tylko w kilku punktach: przycisk główny, znak w logo,
   słowo-akcent w nagłówku, pasek aktywnej zakładki, liczba w ciemnej karcie-wyróżniku. Nigdy w seriach danych. */
:root,
[data-theme="light"] {
  --bg-canvas: #fbf8f6;
  --bg-surface: #ffffff;
  --bg-subtle: #f5f0f3;
  --border-default: #efe8ec;
  --border-strong: #ddd3da;
  --text-primary: #17171c;
  --text-secondary: #4b4f5c;
  --text-muted: #696d7b;
  --text-on-brand: #ffffff;
  --brand-primary: #6d4ae8;
  --brand-violet: #8a5cf5;
  --brand-sky: #3ba7f0;
  --brand-tint: #f4ecfd;
  --brand-tint-sky: #eaf5fe;
  --panel-ink: #17171c;
  --chart-www: #8650df;
  --chart-facebook: #de571f;
  --chart-instagram: #c886e4;
  --chart-youtube: #eba13a;
  --chart-youtube-soft: #f8dcaa;
  --chart-other: #c3bacb;
  --chart-mid: #8b8d9c;
  --chart-grid: #f1ecef;
  --status-positive: #047857;
  --status-positive-tint: #e8f8f0;
  --status-negative: #b42318;
  --status-negative-tint: #fef1f0;
  --status-warning: #b54708;
  --status-warning-tint: #fffaeb;
  --heat-text-strong: #ffffff;
  --shadow-card: 0 1px 2px rgba(40,36,90,0.04), 0 12px 32px -8px rgba(40,36,90,0.10);
  --shadow-pop: 0 12px 32px rgba(23,23,28,0.12);
  --shadow-glow: 0 6px 20px rgba(200,100,120,0.28);
  --heat-0: #fbf8f6; --heat-1: #f1e6fb; --heat-2: #e0c9f5; --heat-3: #c69ced; --heat-4: #9f6be3; --heat-5: #8650df;
  color-scheme: light;
}
[data-theme="dark"] {
  --bg-canvas: #111119;
  --bg-surface: #1b1b24;
  --bg-subtle: #23232e;
  --border-default: #2e2e3a;
  --border-strong: #3e3e4c;
  --text-primary: #ececf3;
  --text-secondary: #b8bbc8;
  --text-muted: #9a9dad;
  --text-on-brand: #121218;
  --brand-primary: #b6a3ff;
  --brand-violet: #a684fa;
  --brand-sky: #5cb8f5;
  --brand-tint: #2a2342;
  --brand-tint-sky: #16283a;
  --panel-ink: #0c0c11;
  --chart-www: #a77df3;
  --chart-facebook: #f2793f;
  --chart-instagram: #e6b8f7;
  --chart-youtube: #ffc76e;
  --chart-youtube-soft: #6a4e26;
  --chart-other: #3e3e4c;
  --chart-mid: #7d8090;
  --chart-grid: #26262f;
  --status-positive: #4ade9f;
  --status-positive-tint: #11301f;
  --status-negative: #ff8a80;
  --status-negative-tint: #3a1d1b;
  --status-warning: #f5c35c;
  --status-warning-tint: #33270f;
  --heat-text-strong: #121218;
  --shadow-card: 0 0 0 1px rgba(255,255,255,0.03);
  --shadow-pop: 0 12px 32px rgba(0,0,0,0.5);
  --shadow-glow: 0 6px 20px rgba(166,132,250,0.25);
  --heat-0: #1f1f29; --heat-1: #2a2342; --heat-2: #3d3166; --heat-3: #5a4796; --heat-4: #8a5cf5; --heat-5: #b6a3ff;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-canvas: #111119;
    --bg-surface: #1b1b24;
    --bg-subtle: #23232e;
    --border-default: #2e2e3a;
    --border-strong: #3e3e4c;
    --text-primary: #ececf3;
    --text-secondary: #b8bbc8;
    --text-muted: #9a9dad;
    --text-on-brand: #121218;
    --brand-primary: #b6a3ff;
    --brand-violet: #a684fa;
    --brand-sky: #5cb8f5;
    --brand-tint: #2a2342;
    --brand-tint-sky: #16283a;
    --panel-ink: #0c0c11;
    --chart-www: #a77df3;
    --chart-facebook: #f2793f;
    --chart-instagram: #e6b8f7;
    --chart-youtube: #ffc76e;
    --chart-youtube-soft: #6a4e26;
    --chart-other: #3e3e4c;
    --chart-mid: #7d8090;
    --chart-grid: #26262f;
    --status-positive: #4ade9f;
    --status-positive-tint: #11301f;
    --status-negative: #ff8a80;
    --status-negative-tint: #3a1d1b;
    --status-warning: #f5c35c;
    --status-warning-tint: #33270f;
    --heat-text-strong: #121218;
    --shadow-card: 0 0 0 1px rgba(255,255,255,0.03);
    --shadow-pop: 0 12px 32px rgba(0,0,0,0.5);
    --shadow-glow: 0 6px 20px rgba(166,132,250,0.25);
    --heat-0: #1f1f29; --heat-1: #2a2342; --heat-2: #3d3166; --heat-3: #5a4796; --heat-4: #8a5cf5; --heat-5: #b6a3ff;
    color-scheme: dark;
  }
}
:root {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px;
  --font-display: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-accent: "Instrument Serif", Georgia, serif;
  --gradient-brand: linear-gradient(120deg, #8a5cf5 0%, #b866df 42%, #e8703d 78%, #f2913f 100%);
  --side-w: 96px;
  --chart-highlight: var(--brand-violet);
  --text-on-graphite: #ffffff;

  /* nazwy używane w komponentach i w kodzie stron – wskazują na tokeny Signal */
  --brand-coral: var(--brand-violet); --brand-coral-strong: var(--brand-primary); --brand-coral-tint: var(--brand-tint); --brand-graphite: var(--panel-ink);
  --f-display: var(--font-display); --f-body: var(--font-sans); --f-serif: var(--font-sans);
  --coral: var(--brand-violet); --coral-ink: var(--brand-primary);
  --ink: var(--text-primary); --muted: var(--text-muted); --line: var(--border-default); --track: var(--bg-subtle);
  --panel: var(--bg-canvas); --card: var(--bg-surface); --soft: var(--bg-subtle); --rail: var(--panel-ink);
  --ok: var(--status-positive); --err: var(--status-negative); --warn: var(--status-warning);
  --s-www: var(--chart-www); --s-facebook: var(--chart-facebook); --s-instagram: var(--chart-instagram); --s-youtube: var(--chart-youtube);
  --yt-long: var(--chart-youtube); --yt-short: var(--chart-youtube-soft);
  --c-accent: var(--chart-highlight); --c-neutral: var(--chart-other); --c-neutral-2: var(--chart-other);
  --grid: var(--chart-grid);
}
/* druk zawsze w jasnej wersji */
@media print {
  :root, :root:not([data-theme="light"]), [data-theme="dark"] {
    --bg-canvas: #ffffff;
    --bg-surface: #ffffff;
    --bg-subtle: #f5f0f3;
    --border-default: #efe8ec;
    --border-strong: #ddd3da;
    --text-primary: #17171c;
    --text-secondary: #4b4f5c;
    --text-muted: #696d7b;
    --text-on-brand: #ffffff;
    --brand-primary: #6d4ae8;
    --brand-violet: #8a5cf5;
    --brand-sky: #3ba7f0;
    --brand-tint: #f4ecfd;
    --brand-tint-sky: #eaf5fe;
    --panel-ink: #17171c;
    --chart-www: #8650df;
    --chart-facebook: #de571f;
    --chart-instagram: #c886e4;
    --chart-youtube: #eba13a;
    --chart-youtube-soft: #f8dcaa;
    --chart-other: #c3bacb;
    --chart-mid: #8b8d9c;
    --chart-grid: #f1ecef;
    --status-positive: #047857;
    --status-positive-tint: #e8f8f0;
    --status-negative: #b42318;
    --status-negative-tint: #fef1f0;
    --status-warning: #b54708;
    --status-warning-tint: #fffaeb;
    --heat-text-strong: #ffffff;
    --shadow-card: 0 1px 2px rgba(40,36,90,0.04), 0 12px 32px -8px rgba(40,36,90,0.10);
    --shadow-pop: 0 12px 32px rgba(23,23,28,0.12);
    --shadow-glow: 0 6px 20px rgba(200,100,120,0.28);
    --heat-0: #fbf8f6; --heat-1: #f1e6fb; --heat-2: #e0c9f5; --heat-3: #c69ced; --heat-4: #9f6be3; --heat-5: #8650df;
    color-scheme: light;
  }
}

/* ================= gradienty wykresów (paleta Signal) =================
   Każda seria ma dwa punkty: a = ciemniejszy początek (lewo / dół), b = jaśniejszy koniec (prawo / góra).
   Poziome paski: 90°, słupki osi czasu: od dołu do góry (SVG), łuki gauge'ów: wzdłuż łuku. */
:root, [data-theme="light"] {
  --www-a: #8650df; --www-b: #b993f2;
  --facebook-a: #de571f; --facebook-b: #f59a66;
  --instagram-a: #c886e4; --instagram-b: #e8c5f3;
  --youtube-a: #eba13a; --youtube-b: #f8d08b;
  --youtube-soft-a: #f6cf8e; --youtube-soft-b: #fce9c8;
  --other-a: #b9afc2; --other-b: #d6cedb;
  --mid-a: #9b93a3; --mid-b: #c4bec9;
  --highlight-a: #8a5cf5; --highlight-b: #f07a3c;
}
[data-theme="dark"] {
  --www-a: #a77df3; --www-b: #cdb0f8;
  --facebook-a: #f2793f; --facebook-b: #f9a87c;
  --instagram-a: #e6b8f7; --instagram-b: #f3d9fb;
  --youtube-a: #ffc76e; --youtube-b: #ffdfa6;
  --youtube-soft-a: #5c4321; --youtube-soft-b: #7a5a2c;
  --other-a: #5a5361; --other-b: #6f6877;
  --mid-a: #7a7382; --mid-b: #a29ba9;
  --highlight-a: #a684fa; --highlight-b: #ff9a5c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --www-a: #a77df3; --www-b: #cdb0f8;
    --facebook-a: #f2793f; --facebook-b: #f9a87c;
    --instagram-a: #e6b8f7; --instagram-b: #f3d9fb;
    --youtube-a: #ffc76e; --youtube-b: #ffdfa6;
    --youtube-soft-a: #5c4321; --youtube-soft-b: #7a5a2c;
    --other-a: #5a5361; --other-b: #6f6877;
    --mid-a: #7a7382; --mid-b: #a29ba9;
    --highlight-a: #a684fa; --highlight-b: #ff9a5c;
  }
}
@media print {
  :root, :root:not([data-theme="light"]), [data-theme="dark"] {
    --www-a: #8650df; --www-b: #b993f2;
    --facebook-a: #de571f; --facebook-b: #f59a66;
    --instagram-a: #c886e4; --instagram-b: #e8c5f3;
    --youtube-a: #eba13a; --youtube-b: #f8d08b;
    --youtube-soft-a: #f6cf8e; --youtube-soft-b: #fce9c8;
    --other-a: #b9afc2; --other-b: #d6cedb;
    --mid-a: #9b93a3; --mid-b: #c4bec9;
    --highlight-a: #8a5cf5; --highlight-b: #f07a3c;
  }
}
:root {
  --g-www: linear-gradient(90deg, var(--www-a), var(--www-b));
  --g-facebook: linear-gradient(90deg, var(--facebook-a), var(--facebook-b));
  --g-instagram: linear-gradient(90deg, var(--instagram-a), var(--instagram-b));
  --g-youtube: linear-gradient(90deg, var(--youtube-a), var(--youtube-b));
  --g-youtube-soft: linear-gradient(90deg, var(--youtube-soft-a), var(--youtube-soft-b));
  --g-other: linear-gradient(90deg, var(--other-a), var(--other-b));
  --g-mid: linear-gradient(90deg, var(--mid-a), var(--mid-b));
  --g-highlight: linear-gradient(90deg, var(--highlight-a), var(--highlight-b));
}

/* ================= podstawy ================= */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background-color: var(--bg-canvas); background-image: var(--bg-wash); background-repeat: no-repeat; background-attachment: fixed; color: var(--text-primary); font-family: var(--font-sans); font-size: 14px; line-height: 20px; -webkit-font-smoothing: antialiased; }
a { color: var(--brand-coral-strong); }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--brand-coral); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; text-wrap: balance; }
.num, .kpi-value, table td.numeric { font-variant-numeric: tabular-nums; }

/* ================= górny pasek ================= */
.rail { position: sticky; top: 0; z-index: 30; background: var(--bg-surface); color: var(--text-primary); border-bottom: 1px solid var(--border-default); }
.rail-in { display: flex; align-items: center; gap: 22px; padding: 10px max(16px, 3vw); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text-primary); flex: none; }
.brand b { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: .02em; display: block; line-height: 1.1; }
.brand b em { font-style: normal; font-weight: 800; background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand small { display: block; font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.ticker { flex: 1; min-width: 0; display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; font-family: var(--font-display); font-size: 13px; white-space: nowrap; align-items: center; }
.ticker::-webkit-scrollbar { display: none; }
.ticker .lab { font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.ticker span { color: var(--text-secondary); }
.ticker b { font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; margin-left: 2px; }
.ticker b.sel { color: var(--brand-coral-strong); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 1000px) { .rail .brand { display: none; } }

/* ================= filtry ================= */
.filters { position: sticky; top: var(--rail-h, 56px); z-index: 20; background: var(--bg-surface); border-bottom: 1px solid var(--border-default); }
.filters-in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding: 12px max(16px, 3vw); }
.fgroup { display: flex; align-items: center; gap: 8px; }
.flab { font-family: var(--font-display); font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
/* pigułki wyboru jednego z wielu */
.seg { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.seg button { height: 32px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--bg-surface); color: var(--text-secondary);
  font-family: var(--font-sans); font-weight: 500; font-size: 13px; cursor: pointer; white-space: nowrap; }
.seg button:hover { background: var(--bg-subtle); }
.seg button[aria-pressed="true"] { background: var(--brand-tint); border-color: transparent; color: var(--brand-primary); font-weight: 600; }
/* pigułki wielokrotnego wyboru (kanały, media): włączone = zwykła pigułka, wyłączone = wyblakła */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--bg-surface);
  color: var(--text-secondary); font-family: var(--font-sans); font-size: 13px; font-weight: 500; cursor: pointer; }
.chip:hover { background: var(--bg-subtle); }
.chip[aria-pressed="false"] { background: transparent; border-style: dashed; color: var(--text-muted); }
.chip[aria-pressed="false"] i { opacity: .35; }
.chip i { width: 8px; height: 8px; border-radius: var(--radius-pill); display: inline-block; flex: none; }
select.sel, input.search { height: 32px; font-family: var(--font-sans); font-size: 13px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text-primary); min-width: 0; }
input.search { padding: 0 12px; background: var(--bg-subtle); }
select.sel.active { border-color: transparent; background: var(--brand-tint); color: var(--brand-primary); font-weight: 600; }
.reset { background: none; border: 0; color: var(--brand-coral-strong); font-family: var(--font-sans); font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px; }
.scope { margin-left: auto; font-family: var(--font-sans); font-size: 12px; line-height: 16px; color: var(--text-muted); }
.scope .warn { color: var(--status-warning); font-weight: 600; }

/* ================= treść ================= */
main { padding: 28px max(16px, 3vw) 72px; }
.wrap { max-width: 1240px; margin: 0 auto; display: grid; gap: var(--space-8); }
.page-h { display: grid; gap: 6px; }
.eyebrow { font-family: var(--font-display); font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.page-h h1 { font-weight: 700; font-size: 28px; line-height: 34px; letter-spacing: -.02em; color: var(--text-primary); }
/* słowo-akcent: Instrument Serif italic wypełniony gradientem marki */
.page-h h1 span { font-family: var(--font-accent); font-style: italic; font-weight: 400; font-size: 32px; letter-spacing: 0;
  background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .08em; }
.page-h p { max-width: 75ch; margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 20px; }

/* KPI */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.stat { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-6); display: grid; gap: 6px; align-content: start; }
.stat .k { font-family: var(--font-sans); font-weight: 500; font-size: 13px; line-height: 18px; color: var(--text-muted); }
.stat .v { font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 48px; letter-spacing: -.03em; color: var(--text-primary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat .v.txt { font-size: 30px; line-height: 36px; }
.stat .s { font-size: 12.5px; line-height: 18px; color: var(--text-muted); }
/* ciemna karta-wyróżnik: jedna na widok, liczba w gradiencie */
.stat.ink { background: var(--panel-ink); border-color: var(--panel-ink); }
.stat.ink .k, .stat.ink .s { color: rgba(255,255,255,.62); }
.stat.ink .v { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* karty – tytuł w karcie, bez zakładek */
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.card { position: relative; min-width: 0; display: grid; gap: var(--space-4); align-content: start; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-6); }
.wrap > *, .card > *, .grid2 > *, .grid3 > * { min-width: 0; }
.card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.card .card-h:not(:first-child) { border-top: 1px solid var(--border-default); padding-top: var(--space-4); }
.card-h h2 { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 24px; color: var(--text-primary); }
.card-h .sub { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-muted); }
.card-h a { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--brand-coral-strong); text-decoration: none; white-space: nowrap; }
.card-h a:hover { text-decoration: underline; }
.cap { font-family: var(--font-sans); font-size: 13px; line-height: 18px; color: var(--text-muted); }
.empty { padding: 28px; text-align: center; color: var(--text-muted); font-size: 14px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--bg-subtle); }

/* poziome paski */
.bars { display: grid; gap: 8px; }
.bar { display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr) minmax(4.6em, auto); align-items: center; gap: 12px; font-family: var(--font-sans); font-size: 14px; line-height: 20px; padding: 2px 0; border-radius: var(--radius-sm); }
.bar .l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--text-primary); }
.bar.click { cursor: pointer; }
.bar.click:hover { background: var(--bg-subtle); }
.bar.click:hover .l { color: var(--brand-coral-strong); }
.bar.sel { background: var(--brand-coral-tint); box-shadow: 0 0 0 6px var(--brand-coral-tint); }
.bar.sel .l { color: var(--brand-coral-strong); }
.bar .tr { height: 8px; background: var(--bg-subtle); border-radius: var(--radius-pill); position: relative; display: flex; overflow: hidden; }
.bar .f { height: 100%; background: var(--g-other); }
.bar .f + .f { margin-left: 2px; }
.bar .f:first-child { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.bar .f:last-child { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
.bar .f:only-child { border-radius: var(--radius-pill); }
.bar .n { text-align: right; font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar .n small { color: var(--text-muted); font-family: var(--font-sans); font-size: 12px; font-weight: 400; margin-left: 4px; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-secondary); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 8px; height: 8px; border-radius: var(--radius-pill); display: inline-block; }

/* oś czasu */
.timeline { position: relative; }
.timeline svg { display: block; width: 100%; height: 240px; overflow: visible; }
.timeline .grid line { stroke: var(--chart-grid); stroke-width: 1; }
.timeline .ax text { fill: var(--text-muted); font-family: var(--font-sans); font-size: 11.5px; font-weight: 500; }
.timeline .col rect.hit { fill: transparent; }
.timeline .col:hover rect.hit { fill: var(--bg-subtle); }
.timeline .tot { fill: var(--text-primary); font-family: var(--font-display); font-size: 11px; font-weight: 700; text-anchor: middle; }
.timeline .maxdot { fill: var(--brand-violet); stroke: var(--bg-surface); stroke-width: 2; }
.tip { position: absolute; pointer-events: none; background: var(--brand-graphite); color: var(--text-on-graphite); font-family: var(--font-sans); font-size: 12.5px; padding: 10px 12px; min-width: 160px; z-index: 5; border-radius: var(--radius-md); box-shadow: var(--shadow-pop); display: none; }
.tip b { display: block; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .75; margin-bottom: 4px; }
.tip div { display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.tip i { width: 8px; height: 8px; border-radius: var(--radius-pill); display: inline-block; margin-right: 6px; }
.tip .t { border-top: 1px solid rgba(255,255,255,.18); margin-top: 4px; padding-top: 4px; font-weight: 700; }

/* tabele */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-surface); }
table.tbl { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: 13.5px; }
.tbl th { text-align: left; font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); padding: 10px 12px; border-bottom: 1px solid var(--border-default); background: var(--bg-subtle); position: sticky; top: 0; white-space: nowrap; }
.tbl th.r, .tbl td.r { text-align: right; }
.tbl th[data-sort] { cursor: pointer; }
.tbl th[data-sort]:hover { color: var(--text-primary); }
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--border-default); vertical-align: top; color: var(--text-secondary); }
.tbl td b { color: var(--text-primary); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: var(--bg-subtle); }
.tbl td.num, .tbl td.r { font-variant-numeric: tabular-nums; font-family: var(--font-display); font-weight: 600; color: var(--text-primary); }
.tbl .t a { color: var(--text-primary); text-decoration: none; font-weight: 600; }
.tbl .t a:hover { color: var(--brand-coral-strong); text-decoration: underline; }
.tbl .t small { display: block; color: var(--text-muted); font-weight: 400; font-size: 12px; margin-top: 2px; overflow-wrap: anywhere; }
.tbl td.wbest { font-weight: 700; color: var(--brand-coral-strong); }
.tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--radius-sm); font-weight: 600; font-size: 12px; background: var(--bg-subtle); color: var(--text-secondary); border: 1px solid var(--border-default);
  margin: 1px 3px 1px 0; white-space: nowrap; text-decoration: none; cursor: pointer; font-family: var(--font-sans); }
.tag:hover { border-color: var(--border-strong); color: var(--text-primary); }
.tag.main { background: var(--brand-coral-tint); border-color: var(--brand-coral); color: var(--brand-coral-strong); }
.tag.race { background: transparent; border: 1px dashed var(--border-strong); color: var(--text-muted); cursor: default; }
.tag i { width: 7px; height: 7px; border-radius: var(--radius-pill); display: inline-block; }
.pl { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12.5px; }
.pl i { width: 8px; height: 8px; border-radius: var(--radius-pill); }

/* mapa ciepła */
.heat td.h { text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; min-width: 64px; color: var(--text-primary); }
.heat td.h.z { color: var(--text-muted); font-weight: 400; }
.heat td.h.dk { color: var(--heat-text-strong); }

/* karty mediów */
.mcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.mcard { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-6); display: grid; gap: 14px; align-content: start; }
.mcard h3 { font-family: var(--font-display); font-weight: 650; font-size: 17px; line-height: 24px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; color: var(--text-primary); }
.mcard h3 span { color: var(--text-primary); font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mlinks { display: flex; flex-wrap: wrap; gap: 12px; font-family: var(--font-sans); font-size: 13px; font-weight: 500; }
.mlinks a { text-decoration: none; color: var(--brand-coral-strong); }
.mlinks a:hover { text-decoration: underline; }

/* status, komunikaty, przyciski */
.st { font-family: var(--font-sans); font-weight: 600; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 2px 8px; border-radius: var(--radius-sm); }
.st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st.ok { color: var(--status-positive); background: var(--status-positive-tint); }
.st.err { color: var(--status-negative); background: var(--status-negative-tint); }
.st.warn { color: var(--status-warning); background: var(--status-warning-tint); }
.st.off { color: var(--text-muted); background: var(--bg-subtle); }
.log { background: var(--bg-subtle); color: var(--text-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); font-family: ui-monospace, Menlo, monospace; font-size: 12px; padding: 14px 16px; max-height: 280px; overflow: auto; white-space: pre-wrap; }
.so { background: var(--bg-surface); border: 1px solid var(--border-default); border-left: 3px solid var(--brand-coral); border-radius: var(--radius-md); padding: 14px 18px; font-size: 14px; color: var(--text-secondary); }
.so b { font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); display: block; margin-bottom: 4px; }
.so code, .note code { font-size: 12.5px; background: var(--bg-subtle); padding: 1px 5px; border-radius: 4px; }
.btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; background: var(--gradient-brand); box-shadow: var(--shadow-glow); color: #ffffff; border: 1px solid transparent; padding: 0 18px; border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-weight: 600; font-size: 13px; cursor: pointer; text-decoration: none; }
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: var(--bg-surface); color: var(--text-secondary); border-color: var(--border-strong); box-shadow: none; }
.btn.ghost:hover { background: var(--bg-subtle); color: var(--text-primary); filter: none; }
.btn:disabled { opacity: .45; cursor: default; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.insights { font-size: 15px; line-height: 1.65; display: grid; gap: 8px; }
.pager { display: flex; gap: 8px; align-items: center; justify-content: space-between; font-size: 13px; color: var(--text-muted); flex-wrap: wrap; }
footer.foot { border-top: 1px solid var(--border-default); padding: 22px max(16px, 3vw); font-size: 12px; color: var(--text-muted); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* plakietki zmian (wzrost / spadek) */
.gdelta, .wd { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-sm); font: 600 12px var(--font-sans); white-space: nowrap; }
.gdelta.up, .wd.up { color: var(--status-positive); background: var(--status-positive-tint); }
.gdelta.dn, .wd.dn { color: var(--status-negative); background: var(--status-negative-tint); }
.gdelta.eq { color: var(--text-muted); background: var(--bg-subtle); }

@media (max-width: 1000px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid2, .grid3 { grid-template-columns: minmax(0, 1fr); }
  .mcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .filters { position: static; }
  .scope { margin-left: 0; flex-basis: 100%; }
  .mcards { grid-template-columns: minmax(0, 1fr); }
  .bar { grid-template-columns: minmax(0, 7em) minmax(0, 1fr) minmax(3.8em, auto); font-size: 13px; }
  main { padding-top: 20px; }
  .card { padding: var(--space-4); }
  .stat { padding: var(--space-4); }
  .stat .v { font-size: 34px; line-height: 40px; }
  .stats { gap: 10px; }
}

/* ================= wybór zakresu dat ================= */
.rwrap { position: relative; }
.rangebtn { display: inline-flex; align-items: center; gap: 8px; height: 32px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--bg-surface); color: var(--text-primary); font-family: var(--font-sans); font-size: 13px; padding: 0 12px; cursor: pointer; }
.rangebtn:hover, .rangebtn[aria-expanded="true"] { background: var(--bg-subtle); }
.rangebtn svg { width: 15px; height: 15px; stroke: var(--text-muted); flex: none; }
.rangebtn b { font-weight: 600; }
.rangebtn span { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rangebtn i { font-style: normal; color: var(--text-muted); font-size: 11px; }
.rpop { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; display: grid; grid-template-columns: 190px auto; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); overflow: hidden; }
.rpop[hidden] { display: none; }
.rpre { display: grid; align-content: start; border-right: 1px solid var(--border-default); padding: 8px; gap: 2px; }
.rpre button { text-align: left; border: 0; background: none; color: var(--text-secondary); font-family: var(--font-sans); font-size: 13.5px; padding: 8px 12px; cursor: pointer; border-radius: var(--radius-sm); }
.rpre button:hover { background: var(--bg-subtle); }
.rpre button.on { background: var(--brand-coral-tint); font-weight: 600; color: var(--brand-coral-strong); }
.rcal { padding: 12px 16px 14px; display: grid; gap: 10px; }
.rnav { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rnav button { border: 1px solid var(--border-strong); background: var(--bg-surface); color: var(--text-primary); width: 30px; height: 30px; font-size: 18px; line-height: 1; cursor: pointer; border-radius: var(--radius-sm); }
.rnav button:hover { background: var(--bg-subtle); }
.rmonths { display: grid; grid-template-columns: repeat(2, 224px); gap: 22px; }
.calh { font-family: var(--font-display); font-weight: 600; font-size: 13px; text-align: center; margin-bottom: 6px; color: var(--text-primary); }
.calw, .cald { display: grid; grid-template-columns: repeat(7, 32px); }
.calw span { font-size: 11px; font-weight: 500; color: var(--text-muted); text-align: center; padding: 3px 0; text-transform: uppercase; }
.cald button, .cald span { height: 30px; }
.cald button { border: 0; background: none; color: var(--text-primary); font-family: var(--font-sans); font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer; border-radius: var(--radius-sm); }
.cald button:hover:not(:disabled) { background: var(--bg-subtle); }
.cald button:disabled { color: var(--border-strong); cursor: default; }
.cald button.t { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.cald button.in { background: var(--brand-coral-tint); border-radius: 0; }
.cald button.s, .cald button.e { background: var(--brand-coral-strong); color: var(--text-on-brand); font-weight: 700; border-radius: var(--radius-sm); }
.rfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--border-default); padding-top: 10px; }
.rsel { font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .rpop { position: fixed; left: 8px; right: 8px; top: 120px; grid-template-columns: minmax(0, 1fr); max-height: calc(100vh - 140px); overflow: auto; }
  .rpre { grid-template-columns: repeat(2, minmax(0, 1fr)); border-right: 0; border-bottom: 1px solid var(--border-default); }
  .rmonths { grid-template-columns: minmax(0, 224px); justify-content: center; }
  .rmonths .cal:first-child { display: none; }
}

/* ================= gauge: średnie zaangażowanie mediów ================= */
.gauges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 20px; }
.gauge { display: grid; justify-items: center; gap: 6px; padding: 6px 4px 10px; position: relative; }
.gauge h3 { font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--text-primary); }
.gauge svg { width: 100%; max-width: 240px; height: auto; display: block; overflow: visible; }
.gauge .trk { fill: none; stroke: var(--bg-subtle); stroke-linecap: round; }
.gauge .hit { fill: transparent; cursor: default; }
.gauge .ctr-k { font-family: var(--font-sans); font-size: 11px; fill: var(--text-muted); text-anchor: middle; }
.gauge .ctr-v { font-family: var(--font-display); font-size: 30px; font-weight: 600; fill: var(--text-primary); text-anchor: middle; font-variant-numeric: tabular-nums; }
.gauge .ax { font-family: var(--font-sans); font-size: 10px; fill: var(--text-muted); }
.gvals { display: flex; gap: 18px; font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; flex-wrap: wrap; justify-content: center; }
.gvals b { color: var(--text-primary); font-weight: 700; }
.gvals i { width: 8px; height: 8px; border-radius: var(--radius-pill); display: inline-block; margin-right: 5px; }
.gauge .gtip { position: absolute; top: 34%; left: 50%; transform: translate(-50%, -100%); display: none; pointer-events: none; background: var(--brand-graphite); color: var(--text-on-graphite); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); padding: 8px 10px; font-size: 12px; white-space: nowrap; z-index: 4; }
.gauge:hover .gtip { display: block; }
.gtip div { display: flex; justify-content: space-between; gap: 14px; }
@media (max-width: 1000px) { .gauges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .gauges { grid-template-columns: minmax(0, 1fr); } }

/* ================= YouTube: media ================= */
.ytm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.ytm-card { border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-4) 18px; display: grid; gap: 10px; align-content: start; background: var(--bg-surface); }
.ytm-card h3 { font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--text-primary); }
.ytm-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; align-items: end; }
.ytm-v { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ytm-v span { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 2.8vw, 34px); line-height: 1; letter-spacing: -.02em; color: var(--text-primary); }
.ytm-v small { font-size: 12px; color: var(--text-muted); }
.ytm-v.avg { border-left: 1px solid var(--border-default); padding-left: 12px; }
.ytm-v.avg span { font-size: clamp(20px, 2vw, 24px); color: var(--text-primary); }
.ytm-bar { display: flex; gap: 2px; height: 8px; background: var(--bg-subtle); border-radius: var(--radius-pill); overflow: hidden; }
.ytm-bar.thin { height: 6px; }
.ytm-bar span { height: 100%; }
.ytm-bar .lg { background: var(--g-youtube); } .ytm-bar .sh { background: var(--g-youtube-soft); } .ytm-bar .uk { background: var(--g-other); }
.ytm-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 0; border-top: 1px solid var(--border-default); padding-top: 10px; }
.ytm-dl div { min-width: 0; display: grid; gap: 2px; }
.ytm-dl dt { font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.ytm-dl dd { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 600; display: flex; align-items: center; gap: 6px; color: var(--text-primary); }
.ytm-dl dd i { width: 8px; height: 8px; border-radius: var(--radius-pill); display: inline-block; }
.ytm-dl dd small { font-size: 12px; font-weight: 500; color: var(--text-muted); margin-left: 4px; }
.ytm-dl .wide { grid-column: 1 / -1; }
@media (max-width: 1000px) { .ytm { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ytm { grid-template-columns: minmax(0, 1fr); } .ytm-dl dd { font-size: 16px; } }

/* ================= Wnioski ================= */
.wlead { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; margin: 0; max-width: 75ch; color: var(--text-primary); }
.wpoints { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; }
.wpoints article { border-top: 1px solid var(--border-default); padding-top: 12px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-content: start; }
.wnum { grid-row: span 2; font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--brand-coral-strong); line-height: 1.2; }
.wpoints h3 { font-family: var(--font-display); font-size: 15px; font-weight: 650; line-height: 1.35; color: var(--text-primary); }
.wpoints p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
.wmov { display: grid; gap: 10px; }
.wrow { display: grid; grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr) auto 5.4em; gap: 10px; align-items: center; font-size: 14px; }
.wrow > b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.wpair { display: grid; gap: 3px; }
.wbar { height: 7px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; display: block; min-width: 2px; }
.wbar.prev { background: var(--chart-other); }
.wbar.now.up { background: var(--status-positive); } .wbar.now.dn { background: var(--status-negative); }
.wrow .num { white-space: nowrap; color: var(--text-muted); }
.wrow .num b { color: var(--text-primary); }
.wrow .wd { justify-self: end; }
.wmedia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.wm { border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 14px 16px; display: grid; gap: 9px; align-content: start; background: var(--bg-surface); }
.wm h3 { font-family: var(--font-sans); font-size: 14px; font-weight: 600; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; color: var(--text-primary); }
.wm h3 span { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--text-primary); }
.wm .legend { font-size: 12px; gap: 4px 12px; }
.whits { list-style: none; margin: 0; padding: 0; counter-reset: h; display: grid; }
.whits li { counter-increment: h; display: grid; grid-template-columns: 2em minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--border-default); align-items: baseline; }
.whits li:last-child { border-bottom: 0; }
.whits li::before { content: counter(h); grid-row: span 2; font-family: var(--font-display); font-weight: 700; color: var(--brand-coral-strong); font-size: 15px; }
.whits a { color: var(--text-primary); text-decoration: none; font-weight: 600; font-size: 14px; line-height: 1.4; }
.whits a:hover { color: var(--brand-coral-strong); text-decoration: underline; }
.wmeta { grid-column: 2; font-size: 12px; color: var(--text-muted); }
.wval { grid-column: 3; grid-row: 1 / span 2; text-align: right; font-family: var(--font-display); font-weight: 600; font-size: 16px; white-space: nowrap; color: var(--text-primary); }
.wval small { display: block; font-family: var(--font-sans); font-weight: 500; font-size: 11px; color: var(--text-muted); }
@media (max-width: 1000px) { .wpoints, .wmedia { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .wrow { grid-template-columns: minmax(0, 7em) minmax(0, 1fr) 5em; } .wrow .num { display: none; } }

/* ================= boczne menu ================= */
body.has-side { padding-left: var(--side-w); }
.side { position: fixed; inset: 0 auto 0 0; width: var(--side-w); z-index: 40; background: var(--bg-surface); border-right: 1px solid var(--border-default);
  display: flex; flex-direction: column; align-items: stretch; padding: 14px 8px 12px; gap: 10px; }
.side-brand { display: flex; justify-content: center; padding: 2px 0 8px; }
.side-brand img { width: 40px; height: 40px; border-radius: 8px; display: block; }
.side .nav { display: flex; flex-direction: column; gap: 4px; flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.side .nav::-webkit-scrollbar { display: none; }
.side .nav a, .side .refresh { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 2px 8px; border: 0; background: none;
  color: var(--text-muted); text-decoration: none; font-family: var(--font-sans); font-size: 11.5px; font-weight: 500; border-radius: var(--radius-md); cursor: pointer; text-align: center; line-height: 1.15; }
.side .ic { display: grid; place-items: center; width: 40px; height: 28px; }
.side .ic svg { width: 22px; height: 22px; display: block; }
.side .nav a:hover, .side .refresh:hover { color: var(--text-primary); background: var(--bg-subtle); }
.side .nav a[aria-current="page"] { position: relative; background: var(--brand-tint); color: var(--brand-primary); font-weight: 600; }
.side .nav a[aria-current="page"]::after { content: ""; position: absolute; left: 26%; right: 26%; bottom: 2px; height: 3px; border-radius: 3px; background: var(--gradient-brand); }
.side .refresh { margin-top: auto; }
.side .refresh .ic svg { stroke: currentColor; width: 20px; height: 20px; }
.side .refresh:hover { color: var(--brand-coral-strong); }
.side .refresh.busy .ic svg { animation: spin 1s linear infinite; }
.side .refresh .lb { font-size: 10.5px; }
.side-user { display: grid; justify-items: center; gap: 4px; padding-top: 8px; border-top: 1px solid var(--border-default); }
.side-user .av { width: 34px; height: 34px; border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--brand-graphite); color: var(--text-on-graphite);
  font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .04em; cursor: default; }
.side-user .logout { border: 0; background: none; color: var(--text-muted); font-family: var(--font-sans); font-size: 10.5px; font-weight: 600; cursor: pointer; padding: 2px; }
.side-user .logout:hover { color: var(--brand-coral-strong); }
@media (max-width: 760px) {
  body.has-side { padding-left: 0; padding-bottom: 70px; }
  .side { inset: auto 0 0 0; width: auto; height: 64px; flex-direction: row; padding: 4px 6px; border-right: 0; border-top: 1px solid var(--border-default); gap: 0; }
  .side-brand { display: none; }
  .side .nav { flex-direction: row; overflow-x: auto; overflow-y: hidden; gap: 2px; order: 1; }
  .side .nav a, .side .refresh { min-width: 62px; padding: 4px 2px; font-size: 10px; }
  .side .ic { width: 40px; height: 26px; }
  .side .refresh { margin-top: 0; order: 2; border-left: 1px solid var(--border-default); border-radius: 0; }
  .side .refresh .lb { display: none; }
  .side-user { order: 3; border-top: 0; border-left: 1px solid var(--border-default); padding: 0 6px; align-content: center; }
  .side-user .logout { display: none; }
}
@media (min-width: 761px) and (max-height: 820px) {
  .side { padding: 10px 8px 8px; gap: 6px; }
  .side-brand img { width: 34px; height: 34px; }
  .side .nav a, .side .refresh { padding: 4px 2px 5px; gap: 2px; font-size: 11px; }
  .side .ic { height: 26px; }
  .side .ic svg { width: 20px; height: 20px; }
}

/* ================= logowanie ================= */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--bg-canvas); }
.login-card { width: min(400px, 100%); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 28px 26px; display: grid; gap: 16px; }
.login-card .lg { display: flex; align-items: center; gap: 12px; }
.login-card .lg img { width: 42px; height: 42px; border-radius: 8px; }
.login-card h1 { font-family: var(--font-display); font-size: 22px; font-weight: 900; line-height: 1.05; color: var(--text-primary); }
.login-card h1 span { display: block; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-top: 4px; }
.login-card label { display: grid; gap: 6px; font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.login-card input { font: 15px var(--font-sans); height: 42px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); color: var(--text-primary); background: var(--bg-surface); }
.login-card input:focus { outline: 2px solid var(--brand-coral); outline-offset: 0; border-color: transparent; }
.login-card .btn { justify-content: center; height: 42px; }
.login-err { color: var(--status-negative); font-size: 13px; min-height: 1.2em; }

/* ================= panel użytkowników ================= */
.ufrm { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px; align-items: end; }
.ufrm label { display: grid; gap: 5px; font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.ufrm input, .ufrm select { font: 14px var(--font-sans); height: 36px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text-primary); }
.bchk { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px; max-height: 220px; overflow: auto; padding: 10px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-surface); }
.bchk label { display: flex; gap: 6px; align-items: center; font: 13px var(--font-sans); text-transform: none; letter-spacing: 0; color: var(--text-primary); font-weight: 500; }
.pwbox { background: var(--status-warning-tint); border: 1px solid var(--status-warning); border-radius: var(--radius-md); padding: 12px 14px; font-size: 14px; color: var(--text-primary); }
.pwbox code { font-size: 16px; font-weight: 700; background: var(--bg-surface); padding: 2px 8px; border-radius: 4px; user-select: all; }
.rtag { display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm); font: 600 12px var(--font-sans); }
.rtag.admin { background: var(--brand-graphite); color: var(--text-on-graphite); }
.rtag.team { background: var(--bg-subtle); color: var(--text-secondary); border: 1px solid var(--border-strong); }
.rtag.client { background: var(--brand-coral-tint); color: var(--brand-coral-strong); }
.lnk { background: none; border: 0; padding: 0 0 0 8px; color: var(--brand-coral-strong); font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; text-transform: none; letter-spacing: 0; }
.pg-note { margin: 6px 0 0; color: var(--status-warning); min-height: 0; }
.pg-note:empty { display: none; }
@media (max-width: 900px) { .ufrm { grid-template-columns: minmax(0, 1fr); } }

/* ================= druk / PDF ================= */
.print-only { display: none !important; }
@media print {
  /* margines strony 0 = przeglądarka nie dokleja nagłówka i stopki z adresem serwera, datą i numerem strony */
  @page { margin: 0; size: A4; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; box-shadow: none !important; }
  .rail, .filters, .refresh, .actions, footer.foot, .ticker, .side { display: none !important; }
  body, body.has-side { background: #fff; padding-left: 0; }
  html { zoom: .74; }
  main { padding: 12mm 13mm 14mm !important; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .wrap { gap: 18px; max-width: none; }
  .page-h { gap: 6px; }
  .page-h::before { content: "motomonitoring.app · Monitoring mediów motocyklowych"; font-family: var(--font-display); font-weight: 600; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border-default); padding-bottom: 6px; margin-bottom: 4px; }
  .page-h h1 { font-size: 26px; line-height: 32px; }
  .page-h p { font-size: 13px; }
  .card { border: 1px solid var(--border-default); padding: 14px 16px 16px; }
  .grid2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 14px; }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px; }
  .stat { border: 1px solid var(--border-default); padding: 12px; }
  .stat .v { font-size: 32px; line-height: 36px; }
  /* łamanie stron: nie rozrywaj kafelków, punktów, wierszy list i tabel; nagłówek zostaje z treścią */
  .stat, .wm, .mcard, .ytm-card, .gauge, .wpoints article, .whits li, .bar, .wrow, .tbl tr, .so, .stats, .grid2 > .card, .keep { break-inside: avoid; }
  .card-h, h1, h2, h3 { break-after: avoid; }
  .wlead { font-size: 16px; margin-bottom: 2px; }
  .wpoints { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 10px 20px; }
  .wpoints article { padding-top: 9px; }
  .wpoints p { font-size: 13px; line-height: 1.5; }
  .wmedia, .ytm, .mcards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px; }
  .wm { padding: 10px 12px; gap: 6px; }
  /* tabele w całości: bez przewijania, ciaśniej, zawijanie nagłówków */
  .tbl-wrap { overflow: visible !important; border: 1px solid var(--border-default); }
  table.tbl { font-size: 11.5px; table-layout: auto; }
  .tbl th { position: static; white-space: normal; font-size: 9px; letter-spacing: .06em; padding: 6px 7px; }
  .tbl td { padding: 5px 7px; }
  .heat td.h { min-width: 0; }
  .whits li { padding: 7px 0; }
  .whits a { font-size: 12.5px; }
  a { text-decoration: none !important; }
  .pb { break-before: page; }
  .print-only { display: revert !important; }
  .wmedia.print-only { display: grid !important; }
  .screen-only, #media { display: none !important; }
  #commentCard { break-inside: auto; }
  #sovCard, .wrace > .card { break-inside: avoid; }
  .wrace .bars { gap: 3px; }
  .wrace .bar { padding: 0; font-size: 12.5px; }
  .wrace .bar .tr { height: 10px; }
  .wrace .whits li { padding: 5px 0; }
  .wrace .card { gap: 10px; }
  .wrace table.tbl { font-size: 10.5px; }
  .wrace .tbl th, .wrace .tbl td { padding: 4px 5px; }
  #sovCard .bars { gap: 4px; }
  #sovCard .bar { padding: 0; font-size: 12px; }
  #sovCard .bar .tr { height: 10px; }
}

/* ================= styl Insights24: tło, karty, wykres warstwowy ================= */
:root { --bg-wash: radial-gradient(900px 520px at 88% -12%, rgba(176,110,230,.13), transparent 60%), radial-gradient(760px 480px at -6% 22%, rgba(240,122,60,.09), transparent 60%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg-wash: radial-gradient(900px 520px at 88% -12%, rgba(176,110,230,.18), transparent 60%), radial-gradient(760px 480px at -6% 22%, rgba(240,122,60,.10), transparent 60%); } }
[data-theme="dark"] { --bg-wash: radial-gradient(900px 520px at 88% -12%, rgba(176,110,230,.18), transparent 60%), radial-gradient(760px 480px at -6% 22%, rgba(240,122,60,.10), transparent 60%); }
.rail, .filters { background: color-mix(in srgb, var(--bg-surface) 86%, transparent); backdrop-filter: saturate(1.4) blur(10px); }
.card, .stat, .mcard { border-color: var(--border-default); box-shadow: var(--shadow-card); }
.card-h h2 { letter-spacing: -.01em; }
/* wykres warstwowy */
.timeline .area { stroke: var(--bg-surface); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.timeline .topline { fill: none; stroke: var(--brand-violet); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.timeline .guide { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; opacity: 0; }
.timeline .col:hover .guide { opacity: .7; }
.timeline .col:hover rect.hit { fill: transparent; }
.timeline .hdot { fill: var(--bg-surface); stroke: var(--brand-violet); stroke-width: 2; opacity: 0; }
.timeline .col:hover .hdot { opacity: 1; }
@media print { body { background-image: none; } .rail, .filters { backdrop-filter: none; } }

/* wykres nakładany: kolory linii kanałów (ciemniejsze niż wypełnienia, czytelne na białym) */
:root, [data-theme="light"] { --www-line: #8650df; --facebook-line: #de571f; --instagram-line: #c886e4; --youtube-line: #eba13a; }
[data-theme="dark"] { --www-line: #a77df3; --facebook-line: #f2793f; --instagram-line: #e6b8f7; --youtube-line: #ffc76e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --www-line: #a77df3; --facebook-line: #f2793f; --instagram-line: #e6b8f7; --youtube-line: #ffc76e; } }
@media print { :root, :root:not([data-theme="light"]), [data-theme="dark"] { --www-line: #8650df; --facebook-line: #de571f; --instagram-line: #c886e4; --youtube-line: #eba13a; } }
.timeline .ofill { stroke: none; }
.timeline .oline { fill: none; stroke-width: 2.25; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.timeline .hdot { fill: var(--bg-surface); stroke-width: 2; }

/* ================= logotyp motomonitoring.app ================= */
.brand img { height: 26px; width: auto; display: block; }
.logo-d { display: none !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-l { display: none !important; } :root:not([data-theme="light"]) .logo-d { display: block !important; } }
[data-theme="dark"] .logo-l { display: none !important; } [data-theme="dark"] .logo-d { display: block !important; }
@media print { .logo-l { display: block !important; } .logo-d { display: none !important; } }
.side-brand img { width: 44px; height: 44px; border-radius: 0; }
.login-card .lg h1 { display: grid; gap: 8px; }
.login-card .lg h1 img { height: 30px; width: auto; }
.login-card .lg h1 span { margin-top: 0; }