: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;
--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);
}
@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;
}
}
: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));
}
* { 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; }
.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; } }
.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); }
.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; }
.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; }
main { padding: 28px max(16px, 3vw) 72px; }
.wrap { max-width: 1240px; margin: 0 auto; display: grid; gap: var(--space-8); }
#view { display: grid; gap: var(--space-8); align-content: start; min-width: 0; }  
.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); }
.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; }
.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); }
.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; }
.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); }
.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; }
.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; }
.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.model { background: transparent; color: var(--text-muted); font-weight: 500; cursor: default; }
.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); }
.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); }
.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; }
.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; }
.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; }
}
.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; }
}
.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); } }
.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; } }
.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; } }
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: calc(70px + env(safe-area-inset-bottom)); }
.side { inset: auto 0 0 0; width: auto; height: calc(62px + env(safe-area-inset-bottom)); flex-direction: row; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); 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 { display: none; }
.side .refresh { display: none; }
.side .nav { overflow: visible; flex: 5 1 0; justify-content: space-around; gap: 0; }
.side .nav a { flex: 1 1 0; min-width: 0; padding: 5px 0 4px; }
.side .nav .lb, .m-more .lb { font-size: 9.5px; letter-spacing: -.01em; }
.side .nav a.m-extra { display: none; }
.side .nav .lb, .m-more .lb { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-more { order: 2; display: flex; flex: 1 1 0; min-width: 0; flex-direction: column; align-items: center; gap: 4px; padding: 4px 2px; border: 0; background: none; color: var(--text-muted); font-family: var(--font-sans); font-size: 10px; font-weight: 500; border-radius: var(--radius-md); cursor: pointer; }
.m-more.on { background: var(--brand-tint); color: var(--brand-primary); font-weight: 600; }
.m-more .ic svg { width: 22px; height: 22px; }
.filters { position: sticky; top: var(--rail-h, 48px); backdrop-filter: none !important; }  
.filters.open { z-index: 70; }
.rail { backdrop-filter: none !important; }
.fbar { display: flex; gap: 8px; padding: 8px 12px; }
.fbar button { display: flex; align-items: center; gap: 8px; height: 44px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text-primary); font: inherit; padding: 0 12px; cursor: pointer; }
.fbar svg { width: 18px; height: 18px; stroke: var(--text-muted); flex: none; }
.fbar-range { flex: 1; min-width: 0; text-align: left; }
.fbar-range span { display: grid; min-width: 0; line-height: 1.15; }
.fbar-range b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fbar-range small { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.fbar-btn { font-weight: 600; font-size: 13.5px; flex: none; }
.fbar-btn i { font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--gradient-brand); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.fsheet { position: fixed; inset: auto 0 0 0; z-index: 60; max-height: 88vh; display: none; flex-direction: column; background: var(--bg-surface); border-radius: 18px 18px 0 0; box-shadow: 0 -12px 40px rgba(23,23,28,.25); }
.filters.open .fsheet { display: flex; }
.filters.open::before { content: ""; position: fixed; inset: 0; z-index: 55; background: rgba(23,23,28,.45); }
.fsheet .filters-in { overflow-y: auto; flex-direction: column; align-items: stretch; gap: 16px; padding: 4px 16px 16px; }
.fsheet .fgroup { flex-direction: column; align-items: flex-start; gap: 8px; }
.fsheet .fgroup .sel, .fsheet .rangebtn { width: 100%; }
.fsheet .reset { align-self: flex-start; }
.fsheet-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border-default); }
.fsheet-foot .btn { width: 100%; justify-content: center; height: 46px; }
body.sheet-open { overflow: hidden; }
.ticker { display: none; }
.rail .brand { display: flex; }
.rail .brand img { height: 28px; }
.rail-in { padding: 8px 14px; }
}
@media (min-width: 761px) {
.fbar, .fsheet-head, .fsheet-foot, .m-more, .msheet { display: none !important; }
.fsheet { display: contents; }
}
.fsheet-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 10px; font-family: var(--font-display); font-size: 17px; }
.fsheet-x { width: 36px; height: 36px; border: 0; border-radius: 99px; background: var(--bg-subtle); font-size: 22px; line-height: 1; color: var(--text-secondary); cursor: pointer; }
.msheet { position: fixed; inset: 0; z-index: 60; background: rgba(23,23,28,.45); display: flex; align-items: flex-end; }
.msheet[hidden] { display: none; }
.msheet-in { width: 100%; max-height: 88vh; overflow-y: auto; background: var(--bg-surface); border-radius: 18px 18px 0 0; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.msheet-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 4px 16px 12px; }
.msheet-nav a { display: grid; justify-items: center; gap: 6px; padding: 12px 4px; border-radius: var(--radius-md); text-decoration: none; color: var(--text-secondary); font-size: 12.5px; font-weight: 500; text-align: center; background: var(--bg-subtle); }
.msheet-nav a[aria-current="page"] { background: var(--brand-tint); color: var(--brand-primary); font-weight: 600; }
.msheet-nav .ic svg, .msheet-row .ic svg { width: 22px; height: 22px; display: block; }
.msheet-row { display: flex; align-items: center; gap: 12px; width: calc(100% - 32px); margin: 0 16px 8px; padding: 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: none; font: inherit; color: var(--text-secondary); cursor: pointer; }
.msheet-row .ic svg { stroke: currentColor; }
.msheet-user { display: flex; align-items: center; gap: 12px; margin: 8px 16px 0; padding-top: 14px; border-top: 1px solid var(--border-default); }
.msheet-user .av { width: 40px; height: 40px; flex: none; border-radius: 99px; display: grid; place-items: center; background: var(--brand-graphite); color: var(--text-on-graphite); font-weight: 700; font-size: 14px; }
.msheet-user span:nth-child(2) { flex: 1; min-width: 0; display: grid; } .msheet-user small { color: var(--text-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msheet-user .btn { flex: 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; }
}
.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; }
.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); } }
.print-only { display: none !important; }
@media print {
@page {
size: A4; margin: 13mm 12mm 16mm;
@bottom-left { content: "PROOFER01  ·  Visibility attracts. Trust retains."; font-family: "Plus Jakarta Sans", Inter, sans-serif; font-size: 7pt; font-weight: 600; letter-spacing: .06em; color: #8a5cf5; vertical-align: top; padding-top: 4mm; }
@bottom-right { content: "strona " counter(page) " z " counter(pages); font-family: Inter, sans-serif; font-size: 7pt; color: #696d7b; vertical-align: top; padding-top: 4mm; }
}
* { -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: 0 !important; }
.wrap { gap: 22px; max-width: none; }
.page-h { gap: 8px; padding-bottom: 4px; }
.page-h::before { content: "Raport  ·  monitoring mediów motocyklowych"; display: block; height: 30px; line-height: 30px; text-align: right;
background: url("/assets/logo/logo-horizontal-light.svg") left center / auto 28px no-repeat;
font-family: var(--font-display); font-weight: 600; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted);
padding-bottom: 12px; margin-bottom: 14px; border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, #7a4fe6, #a656c9 55%, #e8743b) 1; }
.page-h .eyebrow { color: var(--brand-violet); }
.page-h h1 { font-size: 34px; line-height: 40px; }
.page-h h1 span { font-size: 38px; }
.page-h p { font-size: 13.5px; line-height: 1.55; }
.card { border: 1px solid var(--border-default); padding: 18px 20px 20px; gap: 14px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.card-h { padding-bottom: 8px; border-bottom: 1px solid var(--border-default); }
.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; }
.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: 16.5px; line-height: 1.6; margin-bottom: 6px; padding-left: 14px; border-left: 3px solid #a656c9; }
.wpoints { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 18px 30px; }
.wpoints article { padding-top: 12px; }
.wpoints h3 { margin-bottom: 4px; }
.wpoints p { font-size: 13px; line-height: 1.6; }
.stat .k { margin-bottom: 4px; }
.card.keep:has(#mediaPrint) { break-inside: auto; }
.wai { break-inside: avoid; }
.wai .tbl td:first-child { white-space: nowrap; }
.wai-k { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.wai-k .stat { padding: 10px 12px; }
.wai-k .stat .v { font-size: 26px; line-height: 30px; }
.wai-g { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) !important; }
.so { margin-top: 4px; }
.wmedia, .ytm, .mcards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px; }
.wm { padding: 10px 12px; gap: 6px; }
.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; }
}
.wai-g { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.wai-g > div { display: grid; gap: 8px; align-content: start; }
.wai-k { margin: 0; }
@media (max-width: 1000px) { .wai-g { grid-template-columns: minmax(0, 1fr); } }
.card[hidden], .inf-g2[hidden], .stats[hidden], .inf-lead[hidden], details[hidden] { display: none !important; }  
.inf-add { display: grid; grid-template-columns: minmax(0, 1.6fr) 170px minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.inf-add label { display: grid; gap: 6px; }
.inf-add input, .inf-add select { height: 40px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 0 12px; font: inherit; background: var(--bg-surface); color: var(--text-primary); min-width: 0; }
.inf-who { display: flex; gap: 10px; align-items: center; }
.inf-av { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: #fff; background: linear-gradient(135deg, #7a4fe6, #e8743b); }
.inf-av.l { width: 72px; height: 72px; font-size: 26px; }
img.inf-av { object-fit: cover; background: var(--bg-subtle); border: 1px solid var(--border-default); }
.inf-pl { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted); margin-right: 10px; text-decoration: none; }
a.inf-pl:hover { color: var(--brand-primary); }
.inf-pl i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.inf-st { font-style: normal; color: var(--status-warning); font-weight: 600; }
.inf-sug { grid-template-columns: minmax(0, 1.4fr) 170px minmax(0, 1.4fr) auto; }
.inf-sgst { font-weight: 600; font-size: 12.5px; color: var(--status-warning); }
.inf-sgst.zaakceptowane { color: var(--status-positive); } .inf-sgst.odrzucone { color: var(--text-muted); }
.inf-up { color: var(--status-positive); font-weight: 600; } .inf-dn { color: var(--status-negative); font-weight: 600; }
.inf-rank tbody tr { cursor: pointer; }
.inf-rank tbody tr.sel td { background: var(--brand-tint); }
.inf-prof { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; }
.inf-prof h2 { margin: 0; font-family: var(--font-display); font-size: 24px; line-height: 30px; }
.inf-prof p { margin: 4px 0 0; }
.inf-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.stats.inf-k { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.inf-k .stat { padding: 16px; } .inf-k .stat .v { font-size: 28px; line-height: 32px; }
.inf-g2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-6, 24px); align-items: start; }
.inf-svg { width: 100%; height: auto; display: block; }
.inf-svg text { font-size: 10px; fill: var(--text-muted); font-family: var(--font-sans); }
.inf-svg .inf-lab { fill: var(--text-primary); font-weight: 700; font-size: 11px; }
.inf-posts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.inf-post { border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-surface); display: grid; grid-template-rows: auto 1fr; text-decoration: none; color: inherit; }
.inf-post:hover { border-color: var(--border-strong); box-shadow: var(--shadow-card); }
.inf-ph { height: 64px; position: relative; background: linear-gradient(120deg, var(--c), #8a5cf5 70%, #f07a3c); }
.inf-ph.img { height: auto; aspect-ratio: 4 / 5; background: var(--bg-subtle); }
.inf-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.inf-ph span { z-index: 1; position: absolute; left: 10px; top: 10px; font-size: 11px; font-weight: 600; color: #fff; background: rgba(0,0,0,.3); padding: 2px 8px; border-radius: 99px; }
.inf-ph em { z-index: 1; position: absolute; right: 10px; top: 10px; font-style: normal; font-size: 11px; font-weight: 700; color: #fff; background: #e8743b; padding: 2px 8px; border-radius: 99px; }
.inf-bd { padding: 12px 14px; display: grid; gap: 8px; font-size: 13px; align-content: start; }
.inf-bd p { margin: 0; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.inf-d { font-size: 12px; color: var(--text-muted); }
.inf-m { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 12px; padding-top: 8px; border-top: 1px solid var(--border-default); font-size: 11.5px; color: var(--text-muted); margin-top: auto; }
.inf-m b { display: block; font-family: var(--font-display); font-size: 15px; color: var(--text-primary); }
@media (max-width: 1200px) { .inf-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats.inf-k { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .inf-add, .inf-g2, .inf-prof { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .inf-posts, .stats.inf-k { grid-template-columns: minmax(0, 1fr); } }
.inf-ov { display: grid; gap: var(--space-6, 24px); }
.inf-ov[hidden] { display: none !important; }
.inf-ov .inf-share { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; row-gap: 14px; }
@media (max-width: 900px) { .inf-ov .inf-share { grid-template-columns: minmax(0, 1fr); } }
#infEmpty:empty { display: none; }
#infProf, #infCardsBox { scroll-margin-top: calc(var(--rail-h, 64px) + 16px); }
.inf-q { height: 36px; min-width: 220px; }
.stats.inf-k6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.inf-k6 .stat { padding: 16px; } .inf-k6 .stat .v { font-size: 28px; line-height: 32px; }
.inf-lead { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.inf-ld { position: relative; overflow: hidden; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 16px; display: grid; gap: 10px; align-content: start; cursor: pointer; color: inherit; text-decoration: none; }
.inf-ld::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, #7a4fe6, #a656c9 55%, #e8743b); }
.inf-ld:hover { border-color: var(--brand-violet); }
.inf-ld .k { font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.inf-ld .big { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 32px; letter-spacing: -.02em; color: var(--text-primary); }
.inf-ld .s { font-size: 12.5px; color: var(--text-muted); }
.inf-ld.post { grid-template-columns: 92px minmax(0, 1fr); align-items: start; }
.inf-ld.post img { width: 92px; height: 115px; object-fit: cover; border-radius: 10px; background: var(--bg-subtle); }
.inf-ld.post > div { display: grid; gap: 6px; } .inf-ld.post .big { font-size: 24px; line-height: 28px; }
.inf-sc .q { font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; fill: var(--text-muted); opacity: .7; }
.inf-sc .inf-lab { fill: var(--text-primary); font-weight: 600; font-size: 11px; }
.inf-dot { cursor: pointer; } .inf-dot:hover circle { fill-opacity: .85; }
.inf-share { display: grid; gap: 10px; }
.inf-sh { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 10px; row-gap: 4px; align-items: center; font-size: 13.5px; cursor: pointer; }
.inf-sh .inf-av { width: 32px; height: 32px; grid-row: span 2; font-size: 12px; }
.inf-sh .inf-av.rest { background: var(--bg-subtle); color: var(--text-muted); font-size: 11px; }
.inf-sh .nm { display: flex; justify-content: space-between; gap: 8px; } .inf-sh .nm span { color: var(--text-muted); white-space: nowrap; }
.inf-sh .tr { height: 8px; border-radius: 99px; background: var(--bg-subtle); overflow: hidden; }
.inf-sh .tr i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #8a5cf5, #f07a3c); } .inf-sh .tr i.o { background: var(--chart-other); }
.inf-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.inf-pc { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 14px; display: grid; gap: 12px; align-content: start; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.inf-pc:hover { border-color: var(--brand-violet); box-shadow: var(--shadow-card); }
.inf-pc .top { display: flex; gap: 10px; align-items: center; min-width: 0; } .inf-pc .top > div { min-width: 0; } .inf-pc .top b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inf-pc .rk { margin-left: auto; font-family: var(--font-display); font-weight: 700; color: var(--text-muted); font-size: 13px; }
.inf-pls { display: flex; gap: 4px; margin-top: 3px; } .inf-pls i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.inf-pc .pm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; font-size: 11.5px; color: var(--text-muted); }
.inf-pc .pm b { display: block; font-family: var(--font-display); font-size: 16px; color: var(--text-primary); } .inf-pc .pm em { font-style: normal; font-size: 11px; }
.inf-pc .erb { display: grid; gap: 4px; font-size: 11.5px; color: var(--text-muted); }
.inf-pc .erb .tr { height: 6px; border-radius: 99px; background: var(--bg-subtle); overflow: hidden; } .inf-pc .erb .tr i { display: block; height: 100%; background: linear-gradient(90deg, #8a5cf5, #f07a3c); }
.inf-pc .th { display: flex; gap: 4px; } .inf-pc .th img { width: calc((100% - 8px) / 3); aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; background: var(--bg-subtle); }
.inf-pc.quiet { opacity: .7; } .inf-wait { font-size: 12px; color: var(--text-muted); }
.inf-more { justify-self: center; }
details.inf-full { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
details.inf-full summary { list-style: none; cursor: pointer; padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-display); font-weight: 700; font-size: 17px; }
details.inf-full summary::-webkit-details-marker { display: none; }
details.inf-full summary span { font-family: var(--font-sans); font-weight: 500; font-size: 13px; color: var(--brand-primary); }
details.inf-full[open] summary span { font-size: 0; } details.inf-full[open] summary span::after { content: "zwiń ▲"; font-size: 13px; }
.inf-full-in { padding: 0 22px 22px; }
@media (max-width: 1200px) { .stats.inf-k6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .inf-lead, .inf-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .stats.inf-k6, .inf-lead, .inf-cards { grid-template-columns: minmax(0, 1fr); } .inf-q { min-width: 0; width: 100%; } }
: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; }
.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; } }
: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; }
.brand img { height: 38px; 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 { width: 100%; max-width: 340px; height: auto; }
.login-card .lg h1 span { margin-top: 0; }
.sp { min-height: 100vh; background: var(--bg-canvas); overflow-x: clip; position: relative; }
.sp::before { content: ""; position: absolute; width: 900px; height: 900px; right: -260px; top: -200px; border-radius: 50%;
background: radial-gradient(closest-side, rgba(138,92,245,.13), rgba(242,145,63,.07) 55%, transparent 75%); pointer-events: none; }
.sp-top { position: relative; max-width: 1240px; margin: 0 auto; padding: 26px 32px 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.sp-top img { height: 64px; width: auto; }
.sp-nav { display: flex; gap: 30px; font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--text-secondary); }
.sp-nav span:first-child { color: var(--text-primary); box-shadow: 0 2px 0 var(--brand-violet); padding-bottom: 4px; }
.sp-top .btn.ghost { height: 44px; padding: 0 24px; font-weight: 600; }
.sp-hero { position: relative; max-width: 1240px; margin: 0 auto; padding: 72px 32px 40px; display: grid; grid-template-columns: 1.12fr 1fr; gap: 40px; align-items: center; }
.sp-copy { display: grid; gap: 26px; justify-items: start; }
.sp-copy h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 3.9vw, 54px); line-height: 1.06; letter-spacing: -.035em; color: var(--text-primary); max-width: 19ch; }
.sp-copy h1 em { font-family: var(--font-accent); font-style: italic; font-weight: 400; font-size: 1.12em; letter-spacing: -.01em;
background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.sp-copy p { margin: 0; max-width: 48ch; font-size: 17px; line-height: 1.65; color: var(--text-secondary); }
.sp-cta { display: inline-flex; align-items: center; gap: 14px; height: 56px; padding: 0 6px 0 26px; border-radius: 999px; background: var(--gradient-brand);
color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 16px; text-decoration: none; box-shadow: var(--shadow-glow); }
.sp-cta i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #6d4ae8; }
.sp-cta i svg { width: 20px; height: 20px; transition: transform .2s; }
.sp-cta:hover i svg { transform: translateX(3px); }
.sp-facts { display: flex; gap: 28px; padding-top: 6px; }
.sp-facts div { display: grid; gap: 2px; }
.sp-facts b { font-family: var(--font-display); font-weight: 800; font-size: 28px; letter-spacing: -.02em; color: var(--text-primary); }
.sp-facts span { font-size: 13px; color: var(--text-muted); }
.sp-art { position: relative; aspect-ratio: 1 / .9; }
.sp-shot { position: absolute; right: 0; top: 4%; width: 86%; aspect-ratio: 16 / 11; border-radius: 22px; overflow: hidden; background: #fff;
box-shadow: 0 30px 70px -24px rgba(60,40,120,.35), 0 0 0 1px var(--border-default); }
.sp-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 0 30%; transform: scale(1.16); transform-origin: 78% 62%; }
.sp-dark { position: absolute; left: 6%; top: 26%; width: 60px; height: 46%; border-radius: 32px; background: var(--panel-ink); color: #fff;
display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 18px 0; box-shadow: var(--shadow-pop); z-index: 3; }
.sp-dark b { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-display); font-weight: 800; font-size: 20px;
background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sp-dark span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; font-weight: 600; letter-spacing: .04em; opacity: .75; }
.sp-grad { position: absolute; left: 0; bottom: 4%; width: 27%; border-radius: 22px; padding: 18px 20px 14px; color: #fff; z-index: 2;
background: linear-gradient(140deg, #8a5cf5, #b866df 55%, #e8703d); box-shadow: 0 24px 50px -20px rgba(138,92,245,.6); display: grid; align-content: space-between; }
.sp-grad small { font-size: 12px; font-weight: 600; opacity: .85; }
.sp-grad b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 40px; letter-spacing: -.03em; line-height: 1; }
.sp-grad em { font-style: normal; font-size: 13px; opacity: .9; }
.sp-grad svg { width: 100%; height: 44px; margin-top: 6px; }
.sp-chip { position: absolute; z-index: 4; display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 18px; border-radius: 16px;
background: color-mix(in srgb, var(--bg-surface) 92%, transparent); backdrop-filter: blur(12px); box-shadow: var(--shadow-pop); border: 1px solid var(--border-default);
font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--text-primary); }
.sp-chip small { display: block; font-family: var(--font-sans); font-weight: 500; font-size: 12px; color: var(--text-muted); }
.sp-chip .pill { margin-left: 6px; padding: 7px 14px; border-radius: 999px; background: var(--panel-ink); color: #fff; font-size: 12px; }
.sp-chip-a { right: 5%; top: 0; }
.sp-chip-b { right: 0; bottom: 2%; }
.sp-chip-b i { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--gradient-brand); color: #fff; }
.sp-arrow { position: absolute; left: 29%; bottom: 0; width: 11%; color: var(--text-primary); opacity: .55; z-index: 1; transform: rotate(-70deg); }
.sp-spark { position: absolute; left: 6%; top: 8%; width: 46px; color: var(--text-primary); }
.sp-brands { position: relative; max-width: 1240px; margin: 0 auto; padding: 36px 32px 64px; border-top: 1px solid var(--border-default); text-align: center; }
.sp-brands h2 { font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 28px; }
.sp-brands ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px 26px; }
.sp-brands img { display: block; height: var(--h); width: auto; filter: grayscale(1) contrast(1.1); opacity: .5; }
.sp-brands img.inv { filter: grayscale(1) invert(1); }
.sp-channels ul { justify-content: center; gap: 12px; }
.sp-channels li { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px 0 14px; border: 1px solid var(--border-default); border-radius: 99px; background: var(--bg-surface); box-shadow: var(--shadow-card); font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--text-primary); }
.sp-channels svg { width: 22px; height: 22px; flex: none; }
.sp-channels svg { color: var(--brand-violet); }  
.sp-channels li.sep { width: 1px; height: 28px; padding: 0; border: 0; background: var(--border-strong); box-shadow: none; }
@media (max-width: 560px) { .sp-channels ul { gap: 8px; } .sp-channels li { height: 40px; padding: 0 14px 0 11px; font-size: 13.5px; gap: 8px; } .sp-channels svg { width: 18px; height: 18px; } .sp-channels li.sep { display: none; } }
@media (prefers-color-scheme: dark) { .sp-brands img { filter: grayscale(1) invert(1); opacity: .55; } .sp-brands img.inv { filter: grayscale(1); } }
.sp-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.sp-cta2 { height: 56px; padding: 0 26px; border-radius: 999px; border: 1.5px solid var(--border-strong); background: var(--bg-surface); color: var(--text-primary);
font-family: var(--font-display); font-weight: 700; font-size: 16px; cursor: pointer; transition: border-color .2s, background .2s; }
.sp-cta2:hover { border-color: var(--brand-violet); background: var(--brand-tint); }
button.sp-cta { border: 0; cursor: pointer; }
.ipad { position: absolute; right: 0; top: 9%; width: 84%; padding: 2.3%; background: #121217; border-radius: 34px;
box-shadow: 0 0 0 1.5px #3b3b45 inset, 0 0 0 1px #0a0a0e, 0 40px 80px -28px rgba(60,40,120,.45); }
.ipad-screen { border-radius: 16px; overflow: hidden; aspect-ratio: 2360 / 1640; background: #fff; }
.ipad-screen picture, .win picture { display: contents; }  
.ipad-screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ipad-cam { position: absolute; top: .9%; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #2a2a33; box-shadow: 0 0 0 1.5px #1a1a20; }
.of-back { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(17,17,25,.55); backdrop-filter: blur(6px); }
.of-back[hidden], .of [hidden] { display: none !important; }
.of { position: relative; width: min(480px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--bg-surface); border-radius: 24px; padding: 34px 32px 26px; box-shadow: 0 30px 80px rgba(0,0,0,.35); animation: of-in .22s ease-out; }
@keyframes of-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.of-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--bg-subtle); color: var(--text-secondary); font-size: 22px; line-height: 1; cursor: pointer; }
.of form, .of-ok { display: grid; gap: 14px; }
.of-eyebrow { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.of h2 { font-family: var(--font-display); font-weight: 800; font-size: 30px; letter-spacing: -.03em; color: var(--text-primary); }
.of h2 em { font-family: var(--font-accent); font-style: italic; font-weight: 400; font-size: 1.12em; background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.of-lead { margin: 0 0 4px; color: var(--text-secondary); font-size: 15px; line-height: 1.5; }
.of label { display: grid; gap: 6px; font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--text-secondary); }
.of input { height: 48px; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--border-strong); background: var(--bg-canvas); color: var(--text-primary); font: 500 16px var(--font-sans); outline: none; transition: border-color .15s, box-shadow .15s; }
.of input:focus { border-color: var(--brand-violet); box-shadow: 0 0 0 4px var(--brand-tint); }
.of label.bad input { border-color: var(--status-negative); }
.of-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.of-err { margin: 0; min-height: 0; color: var(--status-negative); font-size: 13px; }
.of-err:empty { display: none; }
.of-send { justify-content: space-between; width: 100%; margin-top: 4px; }
.of-send:disabled { opacity: .6; }
.of-info { font-size: 12px; line-height: 1.5; color: var(--text-muted); text-align: center; }
.of-info p { margin: 0; }
.of-more { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--brand-primary); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.of-rodo { margin-top: 8px !important; padding: 10px 12px; border-radius: 12px; background: var(--bg-subtle); text-align: left; }
.of-ok { justify-items: center; text-align: center; padding: 16px 0 6px; }
.of-ok p { margin: 0; color: var(--text-secondary); }
.of-ok-ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--gradient-brand); color: #fff; }
.of-ok-ico svg { width: 32px; height: 32px; }
@media (max-width: 560px) { .sp-actions { width: 100%; } .sp-cta2 { width: 100%; } .ipad { border-radius: 22px; } .ipad-screen { border-radius: 10px; } .of { padding: 28px 20px 20px; } }
@media (max-width: 980px) {
.sp-nav { display: none; }
.sp-hero { grid-template-columns: 1fr; padding-top: 48px; gap: 56px; }
.sp-art { max-width: 620px; width: 100%; justify-self: center; }
.sp-brands ul { justify-content: center; }
}
@media (max-width: 560px) {
.sp-top, .sp-hero, .sp-brands { padding-left: 16px; padding-right: 16px; }
.sp-top img { height: 24px; } .sp-top .btn.ghost { height: 38px; padding: 0 16px; font-size: 13px; }
.sp-cta { width: 100%; justify-content: space-between; }
.sp-facts { gap: 20px; } .sp-facts b { font-size: 24px; }
.sp-dark { width: 52px; } .sp-chip-a { display: none; } .sp-arrow { display: none; }
.sp-grad { padding: 16px; } .sp-grad b { font-size: 30px; }
.sp-brands img { height: calc(var(--h) * .8); }
}
.sp-logo img { height: 60px; width: auto; display: block; }  
.sp-foot { position: relative; max-width: 1240px; margin: 0 auto; padding: 24px 32px 36px; display: flex; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--text-muted); border-top: 1px solid var(--border-default); }
.sp-foot a { color: var(--text-secondary); text-decoration: none; }
.sp-foot > span:last-child { white-space: nowrap; }
@media (max-width: 900px) { .sp-foot { flex-direction: column; } .sp-foot > span:last-child { white-space: normal; } }
.pp { max-width: 820px; margin: 0 auto; padding: 32px 32px 56px; color: var(--text-secondary); font-size: 15px; line-height: 1.65; }
.pp h1 { font-family: var(--font-display); font-size: 38px; line-height: 44px; letter-spacing: -.02em; color: var(--text-primary); margin: 6px 0 4px; }
.pp .pp-meta { color: var(--text-muted); font-size: 13px; margin: 0 0 28px; }
.pp h2 { font-family: var(--font-display); font-size: 21px; color: var(--text-primary); margin: 34px 0 10px; }
.pp h3 { font-family: var(--font-display); font-size: 16px; color: var(--text-primary); margin: 20px 0 6px; }
.pp p { margin: 0 0 12px; } .pp ul { margin: 0 0 12px; padding-left: 20px; } .pp li { margin: 4px 0; }
.pp a { color: var(--brand-primary); } .pp b { color: var(--text-primary); }
@media (max-width: 560px) { .pp { padding: 20px 16px 40px; } .pp h1 { font-size: 30px; line-height: 36px; } }
.sp-foot a:hover { color: var(--brand-primary); }
@media (max-width: 560px) { .sp-logo img { height: 46px; } .sp-foot { padding: 20px 16px 28px; flex-direction: column; } }
.fts { position: relative; max-width: 1240px; margin: 0 auto; padding: 40px 32px 32px; display: grid; gap: 120px; }
.ft { display: grid; grid-template-columns: 1fr 1.25fr; gap: 72px; align-items: center; }
.ft.rev { grid-template-columns: 1.25fr 1fr; }
.ft.rev .ft-copy { order: 2; }
.ft-copy { display: grid; gap: 18px; justify-items: start; }
.ft-tag { margin: 0; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.ft-tag b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--brand-tint); color: var(--brand-primary); font-weight: 800; letter-spacing: 0; font-size: 12px; }
.ft h2, .ft-soon h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -.03em; color: var(--text-primary); max-width: 14ch; }
.ft-copy > p, .ft-soon-copy > p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--text-secondary); max-width: 44ch; }
.ft-chips { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ft-chips li { padding: 7px 14px; border-radius: 999px; background: var(--bg-surface); border: 1px solid var(--border-default); font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--text-secondary); }
.ft-link { margin-top: 6px; display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--brand-primary); }
.ft-link svg { width: 18px; height: 18px; transition: transform .2s; }
.ft-link:hover svg { transform: translateX(3px); }
.ft-shot { position: relative; margin: 0; }
.ft-shot::before { content: ""; position: absolute; inset: 10% -4% -8% 8%; background: var(--gradient-brand); filter: blur(70px); opacity: .18; border-radius: 40%; }
.ft.rev .ft-shot::before { inset: 10% 8% -8% -4%; }
.win { position: relative; border-radius: 18px; overflow: hidden; background: var(--bg-surface); border: 1px solid var(--border-default); box-shadow: 0 30px 60px -28px rgba(60,40,120,.35); }
.win-bar { display: flex; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--border-default); background: var(--bg-surface); }
.win-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.win img { display: block; width: 100%; height: auto; aspect-ratio: 2095 / 1260; object-fit: cover; object-position: top left; }
.ft-soon { position: relative; display: grid; grid-template-columns: 1fr 1.25fr; gap: 72px; align-items: center; padding: 48px; border-radius: 28px; background: var(--panel-ink); color: #fff; overflow: hidden; }
.ft-soon::before { content: ""; position: absolute; width: 520px; height: 520px; right: -120px; top: -180px; border-radius: 50%; background: var(--gradient-brand); filter: blur(90px); opacity: .35; }
.ft-soon > * { position: relative; }
.ft-soon-copy { display: grid; gap: 18px; justify-items: start; }
.ft-soon h2 { color: #fff; }
.ft-soon-copy > p { color: rgba(255,255,255,.75); }
.ft-soon .ft-tag { color: rgba(255,255,255,.6); }
.ft-soon .ft-tag b { background: var(--gradient-brand); color: #fff; }
.ft-soon-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.soon { display: grid; gap: 14px; justify-items: start; padding: 24px; border-radius: 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(8px); }
.soon-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--gradient-brand); color: #fff; }
.soon-ico svg { width: 26px; height: 26px; }
.soon b { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.soon em { font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.8); }
@media (max-width: 980px) {
.fts { gap: 80px; }
.ft, .ft-soon { grid-template-columns: 1fr; gap: 36px; }
.ft.rev { grid-template-columns: 1fr; }
.ft.rev .ft-copy { order: 0; }
.ft-soon { padding: 32px 24px; }
}
@media (max-width: 560px) {
.fts { padding: 24px 16px; gap: 64px; }
.ft-soon-cards { grid-template-columns: 1fr; }
}
.blur-name { filter: blur(4px); user-select: none; }
.tw-caret { display: inline-block; width: .06em; height: .82em; margin-left: .04em; vertical-align: -.04em; background: #e8703d; border-radius: 2px; animation: tw-blink 1s steps(1) infinite; }
@keyframes tw-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tw-caret { display: none; } }
.sp-copy h1 em { display: block; }
.inf-sc .card-h { flex-wrap: wrap; }
.inf-zoom { display: inline-flex; gap: 6px; margin-left: auto; }
.inf-zoom .btn { min-height: 32px; padding: 4px 12px; font-size: 13px; }
.inf-zoom .btn[data-z="in"], .inf-zoom .btn[data-z="out"] { min-width: 36px; font-size: 17px; line-height: 1; }
.inf-zoom[hidden], .inf-zoom .btn[hidden] { display: none !important; }
.inf-sc .inf-svg { user-select: none; cursor: crosshair; }
.inf-sc .inf-labs { pointer-events: none; }
.inf-mf, .inf-mf .filters-in, .inf-mf .fgroup { display: contents; }
.inf-mf { position: static; background: none; border: 0; backdrop-filter: none !important; }
.inf-plab { display: none; }
@media screen and (max-width: 760px) {
.inf-mf { display: block; width: 100%; position: static; }
.inf-mf .fbar { padding: 0; }
.inf-mf.open .fsheet { display: flex; }
.inf-mf.open::before { content: ""; position: fixed; inset: 0; z-index: 55; background: rgba(23,23,28,.45); }
.inf-mf .filters-in { display: flex; }
.inf-mf .fgroup { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.inf-mf .fgroup .sel { width: 100%; }
.inf-mf .seg { flex-wrap: wrap; }
.inf-plab { display: block; }
body.pg-infl .pin-bar { gap: 10px; }
body.pg-infl .pin-bar .inf-q { width: 100%; min-width: 0; flex: 1 1 100%; }
body.pg-infl .pin-bar > .btn { flex: 1 1 0; justify-content: center; }
}
@media screen and (max-width: 760px) {
.tbl-wrap:has(> table.tbl-cards) { overflow: visible; }
table.tbl-cards, table.tbl-cards tbody { display: block; width: 100%; }
table.tbl-cards thead { display: none; }
table.tbl-cards tr { display: block; padding: 10px 14px; border-bottom: 1px solid var(--border-default); }
table.tbl-cards tr:last-child { border-bottom: 0; }
table.tbl-cards td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0; border: 0 !important; text-align: right; white-space: normal; min-width: 0; overflow-wrap: anywhere; }
table.tbl-cards td::before { content: attr(data-l); flex: none; max-width: 48%; text-align: left; font-family: var(--font-display); font-weight: 600; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); }
table.tbl-cards td[data-l=""]::before { display: none; }
table.tbl-cards td:first-child { display: block; text-align: left; padding: 0 0 6px; font-size: 14px; }
table.tbl-cards td:first-child::before { display: none; }
table.tbl-cards td[data-l=""] { justify-content: flex-start; text-align: left; }
table.tbl-cards tbody tr:hover td { background: none; }
table.tbl-cards td .sel, table.tbl-cards td select { max-width: 60%; }
table.tbl.heat { font-size: 10.5px; table-layout: fixed; }
table.tbl.heat th { white-space: normal; font-size: 8.5px; letter-spacing: .02em; padding: 6px 2px; overflow-wrap: anywhere; hyphens: auto; vertical-align: bottom; }
table.tbl.heat td { padding: 6px 2px; text-align: center; }
table.tbl.heat th:first-child, table.tbl.heat td:first-child { width: 28%; text-align: left; padding-left: 8px; overflow-wrap: anywhere; }
}
@media screen and (max-width: 760px) {
table.tbl-cards td > * { min-width: 0; max-width: 100%; }
table.tbl-cards td > span:not(.tag), table.tbl-cards td > div { text-align: right; }
table.tbl-cards .tag { white-space: normal; }
table.tbl-cards td:has(.tag) { flex-wrap: wrap; justify-content: flex-end; }
table.tbl-cards td:has(.tag)::before { margin-right: auto; }
table.tbl-rk td:first-child { display: inline-block; vertical-align: middle; padding: 0 10px 0 0; font-family: var(--font-display); font-weight: 700; color: var(--text-muted); }
table.tbl-rk td:nth-child(2) { display: inline-flex; vertical-align: middle; width: calc(100% - 40px); justify-content: flex-start; text-align: left; padding: 0 0 6px; }
table.tbl-rk td:nth-child(2)::before { display: none; }
}
@media screen and (max-width: 760px) { table.tbl-rk td:nth-child(2) > *, table.tbl-rk td:nth-child(2) span { text-align: left; } }
@media screen and (max-width: 760px) {
table.tbl.heat th:not(:first-child) { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; hyphens: none; overflow-wrap: normal; text-align: left; vertical-align: middle; padding: 8px 0; height: auto; max-height: 130px; font-size: 9px; }
table.tbl.heat td { padding: 6px 1px; font-size: 10px; }
table.tbl.heat th:first-child, table.tbl.heat td:first-child { width: 25%; padding-left: 6px; }
}
@media screen and (max-width: 760px) {
table.tbl.heat th:not(:first-child) { max-height: none; overflow: visible; text-overflow: clip; }
table.tbl.heat td { font-size: 9px; letter-spacing: -.02em; padding: 6px 0; }
table.tbl.heat th:first-child, table.tbl.heat td:first-child { width: 22%; font-size: 10px; letter-spacing: 0; }
}
.inf-back { display: inline-block; margin-bottom: 14px; font-size: 13px; color: var(--text-muted); text-decoration: none; }
.inf-back:hover { color: var(--text-primary); }
.page-h .inf-prof { grid-template-columns: auto minmax(0, 1fr); margin-bottom: 4px; }
.page-h .inf-prof h1 { margin: 2px 0 0; }
.page-h .inf-prof .eyebrow { display: block; }
.inf-m span[title] b { color: var(--brand-violet); }
.inf-emv { margin-top: 20px; }
.inf-emv p { max-width: 900px; }
.inf-emv summary span { font-weight: 400; }
.inf-cpm { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; margin-top: 12px; }
.ms-bc { width: 18%; min-width: 120px; }
.ms-bar { display: block; height: 8px; border-radius: 99px; background: var(--bg-subtle); overflow: hidden; }
.ms-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #8a5cf5, #f07a3c); }
.ms-tbl tbody tr { cursor: pointer; }
.ms-tbl small { font-size: 11px; }
#msBest { margin-top: 14px; }
@media screen and (max-width: 760px) {
.inf-cpm { grid-template-columns: 1fr 1fr; }
.ms-bc { width: auto; min-width: 0; }
table.tbl-cards td.ms-bc::before { display: none; }
.page-h .inf-prof { gap: 12px; }
.page-h .inf-prof .inf-av.l { width: 56px; height: 56px; }
}
.pl-icos { display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; }
.pl-ico { width: 14px; height: 14px; color: var(--text-muted); flex: none; }
.pl-icos .inf-st { margin-left: -3px; }
.inf-tip { cursor: help; text-decoration: underline dotted; text-underline-offset: 2px; }
.pin-bar { position: sticky; top: var(--rail-h, 56px); z-index: 20; margin: 0 0 20px; padding: 12px 0; background: var(--bg-surface);
box-shadow: 0 0 0 100vmax var(--bg-surface), 0 1px 0 100vmax var(--border-default); clip-path: inset(0 -100vmax -1px); }  
@media screen and (max-width: 760px) {
.pin-bar { padding: 8px 0; margin-bottom: 14px; }
}
.pin-sub { margin: -8px 0 20px; }
.pin-sub:not(:has(.btn:not([hidden]), .cap:not(:empty), .inf-actions:not(:empty))) { display: none; }
body.pg-infl .pin-sub > .btn { flex: 0 0 auto; }
@media screen and (max-width: 760px) { body.pg-infl .pin-sub > .btn { flex: 1 1 0; justify-content: center; } }
.nri { margin-top: 20px; }
.nri-k { margin: 4px 0 18px; }
.nri-list { margin-top: 14px; }
.nri-month { margin: 0 0 18px; }
.nri-month svg text { font-size: 11px; fill: var(--text-muted); }
.nri-k { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 2px 0 14px; }
.nri-kc { border: 1px solid var(--border-default); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nri-kc .k { font-size: 12px; color: var(--text-muted); }
.nri-kc b { font-family: var(--font-display); font-size: 18px; line-height: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nri-kc .s { font-size: 12px; color: var(--text-muted); }
.nri-month { margin: 0 0 12px; }
.nri-svg { display: block; width: 100%; height: auto; }
.nri-svg text { font-size: 11px; fill: var(--text-muted); }
.nri-svg .nri-n { fill: var(--text-primary); font-weight: 600; }
@media screen and (max-width: 1100px) { .nri-k { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media screen and (max-width: 760px) { .nri-k { grid-template-columns: 1fr; } }
.side .lw, .side .nav-sec, .side-user .nm { display: none; }
.side-brand .sb-logo { display: none; }
@media (min-width: 761px) {
:root { --side-w: 232px; }
.side { padding: 16px 12px 12px; gap: 6px; }
.side-brand { justify-content: flex-start; padding: 2px 8px 10px; }
.side-brand .sb-icon { display: none; }
.side-brand .sb-logo.logo-l { display: block; width: 100%; max-width: 190px; height: auto; border-radius: 0; }
.rail .brand { display: none; }
.side .nav { gap: 2px; }
.side .nav a, .side .nav-gh, .side .refresh { flex-direction: row; align-items: center; gap: 10px; padding: 7px 10px; font-size: 14px; color: var(--text-secondary); text-align: left; line-height: 1.25; width: 100%; }
.side .nav-gh { display: flex; border: 0; background: none; border-radius: var(--radius-md); cursor: pointer; font-family: var(--font-sans); font-weight: 500; }
.side .nav-gh:hover { background: var(--bg-subtle); color: var(--text-primary); }
.side .ic { width: 20px; height: 20px; flex: none; }
.side .ic svg { width: 18px; height: 18px; }
.side .lb { display: none; }
.side .lw { display: inline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side .nav a[aria-current="page"]::after { display: none; }
.side .nav-sec { display: block; font-family: var(--font-display); font-weight: 600; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); padding: 14px 10px 4px; }
.side .nav-gh .chev { width: 14px; height: 14px; margin-left: auto; transition: transform .18s; flex: none; }
.side .nav-grp.open .nav-gh .chev { transform: rotate(90deg); }
.side .nav-sub { display: none; flex-direction: column; gap: 1px; margin: 2px 0 4px 19px; padding-left: 10px; border-left: 1px solid var(--border-default); }
.side .nav-grp.open .nav-sub { display: flex; }
.side .nav-sub a { padding: 6px 10px; font-size: 13.5px; }
.side .nav-sub a .ic { display: none; }
.side .refresh .lb { display: inline; font-size: 13px; }
.side-user { display: flex; align-items: center; gap: 10px; justify-items: initial; padding: 10px 6px 0; }
.side-user .nm { display: grid; min-width: 0; flex: 1; line-height: 1.25; }
.side-user .nm b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user .nm small { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user .logout { font-size: 11px; }
}
@media (prefers-color-scheme: dark) { @media (min-width: 761px) { :root:not([data-theme="light"]) .side-brand .sb-logo.logo-l { display: none; } :root:not([data-theme="light"]) .side-brand .sb-logo.logo-d { display: block; width: 100%; max-width: 190px; height: auto; } } }
@media (max-width: 760px) {
.side .nav-grp, .side .nav-sub { display: contents; }
.side .nav-gh, .side .nav-sec { display: none; }
}
.st-wrap { gap: 18px; }
.st-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; }
.st-top h1 { margin: 0; font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--text-secondary); }
.st-top h1 b { color: var(--text-primary); }
.st-ctrl { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.st-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.st-chip { height: 34px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--border-strong); background: var(--bg-surface); font: 600 13px var(--font-sans); color: var(--text-secondary); cursor: pointer; }
.st-chip.on { background: var(--text-primary); border-color: var(--text-primary); color: var(--bg-surface); }
.st-hero { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 20px; padding: 18px 22px; box-shadow: var(--shadow-card); display: grid; gap: 16px; }
.st-hl { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.32; letter-spacing: -.015em; margin: 0; max-width: 1000px; }
.st-hl em { font-style: normal; background: var(--gradient-brand, linear-gradient(90deg, #8a5cf5, #f07a3c)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.st-hl small { display: block; font-family: var(--font-sans); font-weight: 400; font-size: 13.5px; letter-spacing: 0; color: var(--text-muted); margin-top: 6px; }
.st-k { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--border-default); padding-top: 14px; }
.st-k > div { padding: 0 16px; border-left: 1px solid var(--border-default); display: grid; gap: 3px; align-content: start; min-width: 0; }
.st-k > div:first-child { padding-left: 0; border-left: 0; }
.st-k .k { font-size: 12px; color: var(--text-muted); }
.st-k .v { font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 26px; letter-spacing: -.02em; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.st-k .s { font-size: 12px; color: var(--text-muted); }
.st-dl { font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 99px; letter-spacing: 0; }
.st-dl.up { background: #e6f6ec; color: #1a7f43; } .st-dl.dn { background: #fdecec; color: #b42318; } .st-dl.ne { background: var(--bg-subtle); color: var(--text-muted); }
.st-q { display: flex; align-items: baseline; gap: 4px 10px; margin: 8px 0 -6px; flex-wrap: wrap; }
.st-q h2 { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.st-q > span:last-child { font-size: 13px; color: var(--text-muted); }
.st-q .n { width: 24px; height: 24px; border-radius: 50%; background: var(--text-primary); color: var(--bg-surface); display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; align-self: center; }
.st-g2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; }
.st-g2b { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; }
.st-cd { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 16px; padding: 18px 20px; box-shadow: var(--shadow-card); display: grid; gap: 12px; align-content: start; min-width: 0; }
.st-cd h3 { margin: 0; font-family: var(--font-display); font-size: 15px; font-weight: 700; }
.st-cd .sub, .st-wrap p.sub { font-size: 12px; color: var(--text-muted); margin: 0; }
.st-cdh { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.st-lg { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-secondary); }
.st-lg i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.st-svg { width: 100%; height: auto; display: block; }
.st-svg text { font-size: 11px; fill: var(--text-muted); font-family: var(--font-sans); }
.st-svg .st-n { fill: var(--text-primary); font-weight: 700; font-size: 12px; }
.st-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.st-mini > div { background: var(--bg-subtle); border-radius: 12px; padding: 9px 12px; display: grid; gap: 2px; }
.st-mini .k { font-size: 11.5px; color: var(--text-muted); }
.st-mini b { font-family: var(--font-display); font-size: 17px; }
.st-sov { display: grid; gap: 8px; }
.st-sov .r { display: grid; grid-template-columns: 22px minmax(0, 120px) 1fr 54px; align-items: center; gap: 10px; font-size: 13px; }
.st-sov .r b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-sov .t { height: 10px; border-radius: 99px; background: var(--bg-subtle); overflow: hidden; }
.st-sov .t i { display: block; height: 100%; border-radius: 99px; background: var(--border-strong); }
.st-sov .r.me .t i { background: var(--gradient-brand, linear-gradient(90deg, #8a5cf5, #f07a3c)); }
.st-sov .r.me b { font-weight: 800; }
.st-sov .p { text-align: right; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.st-sov .ix { color: var(--text-muted); font-size: 12px; }
.st-sb { display: inline-block; width: 56px; height: 6px; border-radius: 99px; background: var(--bg-subtle); vertical-align: middle; margin-left: 8px; overflow: hidden; }
.st-sb i { display: block; height: 100%; background: var(--gradient-brand, linear-gradient(90deg, #8a5cf5, #f07a3c)); border-radius: 99px; }
.st-bd { font-size: 11px; font-weight: 600; border-radius: 99px; padding: 2px 8px; white-space: nowrap; }
.b-go { background: #e6f6ec; color: #1a7f43; } .b-op { background: #fff4e5; color: #a35b00; } .b-lo, .b-ok { background: var(--bg-subtle); color: var(--text-muted); }
.st-ip { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; text-decoration: none; color: inherit; }
.st-ip .av { width: 34px; height: 34px; border-radius: 50%; background: var(--bg-subtle); display: grid; place-items: center; font-weight: 700; color: var(--text-secondary); font-size: 13px; }
.st-ip b { font-size: 13.5px; } .st-ip small { display: block; font-size: 12px; color: var(--text-muted); }
.st-ip:hover b { color: var(--brand-primary); }
.st-tg { font-size: 11px; color: var(--text-secondary); background: var(--bg-subtle); border-radius: 99px; padding: 2px 8px; white-space: nowrap; }
.st-ih { margin-top: 8px !important; }
.st-recs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.st-rec { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 16px; padding: 16px 18px; display: grid; grid-template-columns: 40px 1fr; gap: 12px; box-shadow: var(--shadow-card); }
.st-rec .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; }
.st-rec.hi .ic { background: #fdecec; } .st-rec.md .ic { background: #fff4e5; } .st-rec.ok .ic { background: #e6f6ec; }
.st-rec h4 { margin: 0 0 4px; font-family: var(--font-display); font-size: 15px; font-weight: 700; line-height: 1.3; }
.st-rec p { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.st-rec .act { display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--brand-primary); text-decoration: none; }
.st-rec .pr { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.st-pubs { display: grid; }
.st-pub { display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-default); align-items: center; text-decoration: none; color: inherit; }
.st-pub:last-child { border-bottom: 0; }
.st-pub .m { font-size: 12px; color: var(--text-muted); }
.st-pub b { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.st-pub:hover b { color: var(--brand-primary); }
.st-pub .i { font-size: 12px; color: var(--text-secondary); text-align: right; white-space: nowrap; }
.st-tr { font-size: 10.5px; color: #a35b00; background: #fff4e5; border-radius: 99px; padding: 1px 6px; margin-left: 6px; font-weight: 600; }
.st-more { font-size: 13px; font-weight: 600; color: var(--brand-primary); text-decoration: none; }
.st-mt td, .st-mt th, .st-ot td { padding: 9px 8px; }
.st-foot { margin-top: 4px; }
@media (max-width: 1100px) { .st-k { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; } .st-k > div:nth-child(4) { border-left: 0; padding-left: 0; } .st-g2, .st-g2b, .st-recs { grid-template-columns: 1fr; } }
@media screen and (max-width: 760px) {
.st-k { grid-template-columns: repeat(2, minmax(0, 1fr)); } .st-k > div { border-left: 0; padding: 0; }
.st-q > span:last-child { flex-basis: 100%; padding-left: 34px; }
.st-pub { grid-template-columns: 1fr; gap: 4px; } .st-pub .i { text-align: left; }
.st-sov .r { grid-template-columns: 20px minmax(0, 90px) 1fr 48px; }
.st-ctrl, .st-ctrl .sel { width: 100%; }
}
.st-nw { white-space: nowrap; }
@media (min-width: 761px) { :root { --side-w: 240px; } .side .nav-gh { font-size: 13.5px; } }
.st-mt { font-size: 12.5px; } .st-mt td, .st-mt th { padding: 8px 6px; } .st-mt .st-sb { width: 44px; margin-left: 6px; }
.fd-wrap { max-width: 860px; }
.fd-top { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 10px; }
.fd-top h1 { font-size: 28px; line-height: 1.15; margin: 4px 0 6px; }
.fd-top h1 span { color: var(--brand-coral-strong, var(--text-primary)); }
.fd-lead { margin: 0; color: var(--text-secondary); font-size: 14px; max-width: 560px; }
.fd-day { font-size: 13px; font-weight: 600; color: var(--text-muted); margin: 22px 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--border-default); }
.fd-day::first-letter { text-transform: uppercase; }
#fdList > .fd-day:first-child { margin-top: 4px; }
.fd-it { display: grid; grid-template-columns: 136px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border-default); }
.fd-it:last-child { border-bottom: 0; }
.fd-th { position: relative; display: block; width: 136px; height: 90px; border-radius: 8px; overflow: hidden; background: var(--bg-subtle); }
.fd-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: var(--bg-subtle); }
.fd-ph { display: flex; width: 100%; height: 100%; align-items: flex-end; padding: 8px; }
.fd-ph b { font: 700 12px/1.2 var(--font-display); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.fd-bd { min-width: 0; }
.fd-bd h3 { font-size: 16px; line-height: 1.3; font-weight: 700; margin: 0 0 4px; }
.fd-bd h3 a { color: var(--text-primary); text-decoration: none; }
.fd-bd h3 a:hover { text-decoration: underline; }
.fd-meta { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 12.5px; color: var(--text-muted); }
.fd-meta > span + span::before { content: "·"; margin: 0 7px; }
.fd-pl { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.fd-pl svg { width: 14px; height: 14px; }
.fd-pl.pl-www { color: var(--s-www); } .fd-pl.pl-facebook { color: var(--s-facebook); } .fd-pl.pl-instagram { color: var(--s-instagram); } .fd-pl.pl-youtube { color: var(--s-youtube); }
.fd-ex { margin: 6px 0 8px; font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fd-ex:empty { display: none; }
.fd-ft { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fd-st { font-size: 12px; color: var(--text-muted); margin-left: auto; }
.fd-more { text-align: center; margin: 18px 0 8px; }
@media (max-width: 640px) {
.fd-it { grid-template-columns: 96px 1fr; gap: 12px; }
.fd-th { width: 96px; height: 68px; }
.fd-top h1 { font-size: 22px; }
.fd-st { margin-left: 0; width: 100%; }
}
.filters.fx { backdrop-filter: none; background: var(--bg-surface); }
.fx .fb2 { display: flex; align-items: center; gap: 12px; padding: 10px max(16px, 3vw); }
.fx .fsp { flex: 1; }
.fbrand-w, .fx .rwrap { position: relative; }
.fbrand { display: flex; align-items: center; gap: 10px; height: 44px; min-width: 230px; padding: 0 12px 0 6px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--bg-surface); color: var(--text-primary); cursor: pointer; font: inherit; text-align: left; }
.fbrand:hover, .fbrand[aria-expanded="true"] { background: var(--bg-subtle); }
.fbrand.on { border-color: var(--brand-primary); }
.fbrand .fav { width: 32px; height: 32px; border-radius: 9px; background: var(--gradient-brand); color: #fff; display: grid; place-items: center; font: 800 13px var(--font-display); flex: none; }
.fbrand .fbt { display: flex !important; flex-direction: column; align-items: flex-start; line-height: 1.15; min-width: 0; flex: 1; }
.fbrand .fbt small { display: block; font-size: 11px; color: var(--text-muted); }
.fbrand .fbt b { display: block; max-width: 100%; font: 700 14.5px var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbrand svg { width: 16px; height: 16px; stroke: var(--text-muted); margin-left: auto; flex: none; }
.fbrand-pop { position: absolute; z-index: 45; top: calc(100% + 6px); left: 0; width: 300px; padding: 8px; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 14px; box-shadow: var(--shadow-pop, 0 12px 32px rgba(23,23,28,.14)); }
.fbrand-pop[hidden] { display: none; }
.fbrand-pop input.search { width: 100%; height: 36px; margin-bottom: 6px; }
.fbrand-list { max-height: 360px; overflow-y: auto; display: grid; }
.fbrand-list button { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13.5px; color: var(--text-primary); text-align: left; cursor: pointer; }
.fbrand-list button:hover { background: var(--bg-subtle); }
.fbrand-list button.on { background: var(--brand-tint); color: var(--brand-primary); font-weight: 600; }
.fbrand-list button.zero { color: var(--text-muted); }
.fbrand-list small { margin-left: auto; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.fbrand-cap, .fbrand-none { margin: 6px 10px 2px; font-size: 11.5px; color: var(--text-muted); }
.fseg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 12px; background: var(--bg-subtle); }
.fseg button, .fmore { height: 36px; padding: 0 12px; border: 0; border-radius: 9px; background: none; color: var(--text-secondary); font: 500 13px var(--font-sans); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.fseg button:hover, .fmore:hover { color: var(--text-primary); }
.fseg button[aria-pressed="true"], .fmore.on { background: var(--bg-surface); color: var(--text-primary); font-weight: 600; box-shadow: 0 1px 3px rgba(23,23,28,.1); }
.fmore svg { width: 15px; height: 15px; stroke: currentColor; }
.fseg.wide { display: flex; width: 100%; }
.fseg.wide button { flex: 1; justify-content: center; }
.fbtn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--bg-surface); color: var(--text-primary); font: 600 13.5px var(--font-sans); cursor: pointer; flex: none; }
.fbtn:hover { background: var(--bg-subtle); }
.fbtn.on { border-color: var(--brand-primary); }
.fbtn svg { width: 17px; height: 17px; stroke: currentColor; }
.fbtn i { font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--brand-primary); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.fx .fctx { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 0 max(16px, 3vw) 9px; font-size: 12.5px; color: var(--text-muted); }
.fx #fctxTxt { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; }
.fx #fctxTxt > b { color: var(--text-secondary); font-weight: 600; }
.fx #fctxTxt > b + span::before, .fx #fctxTxt > span + span::before { content: "·"; margin: 0 7px; color: var(--border-strong); }
.fdots { display: inline-flex; gap: 3px; margin-right: 8px; }
.fdots i { width: 8px; height: 8px; border-radius: 50%; }
.fx .scope { margin-left: auto; text-align: right; }
.filters.fx .fsheet { display: none; position: fixed; z-index: 85; flex-direction: column; background: var(--bg-surface); }
.filters.fx.open .fsheet { display: flex; }
.filters.fx.open { z-index: 90; }
.filters.fx.open::before { content: ""; position: fixed; inset: 0; z-index: 80; background: rgba(23,23,28,.35); }
.filters.fx .fsheet-head, .filters.fx .fsheet-foot { display: flex !important; }
.filters.fx .fsheet-head { border-bottom: 1px solid var(--border-default); }
.filters.fx .filters-in { display: flex; flex-direction: column; align-items: stretch; gap: 20px; padding: 16px 20px; overflow-y: auto; flex: 1; }
.filters.fx .fgroup { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.filters.fx .fsheet-foot { gap: 10px; align-items: center; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border-default); }
.filters.fx .fsheet-foot .btn { flex: 1; justify-content: center; height: 44px; }
.ftiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ftiles button { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg-surface); font: 500 13px var(--font-sans); color: var(--text-muted); cursor: pointer; text-align: left; }
.ftiles button i { width: 10px; height: 10px; border-radius: 50%; flex: none; opacity: .4; }
.ftiles button small { margin-left: auto; color: var(--text-muted); font-weight: 400; }
.ftiles button[aria-pressed="true"] { border-color: var(--brand-primary); background: var(--brand-tint); color: var(--brand-primary); font-weight: 600; }
.ftiles button[aria-pressed="true"] i { opacity: 1; }
.fchecks { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; }
.fchecks button { display: flex; align-items: center; gap: 9px; padding: 7px 0; border: 0; background: none; font: 13.5px var(--font-sans); color: var(--text-primary); cursor: pointer; text-align: left; }
.fchecks small { margin-left: auto; color: var(--text-muted); font-size: 12px; }
.fchecks .cb { width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--border-strong); display: grid; place-items: center; flex: none; }
.fchecks [aria-pressed="true"] .cb { background: var(--brand-primary); border-color: var(--brand-primary); }
.fchecks [aria-pressed="true"] .cb::after { content: ""; width: 8px; height: 4px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.fchecks [aria-pressed="false"] { color: var(--text-muted); }
.fhint { margin: 2px 0 0; font-size: 11.5px; color: var(--text-muted); }
@media (min-width: 761px) {
.filters.fx .fsheet { top: 0; right: 0; bottom: 0; width: 400px; max-width: 92vw; border-left: 1px solid var(--border-default); box-shadow: -16px 0 40px rgba(23,23,28,.14); }
.filters.fx .fg-m { display: none; }
}
@media (max-width: 1180px) and (min-width: 761px) {
.fseg button[data-r="tm"], .fseg button[data-r="ty"] { display: none; }
.fbrand { min-width: 190px; }
}
@media (max-width: 760px) {
.fx .fb2 { gap: 8px; padding: 8px 12px; }
.fx .fper, .fx .fsp { display: none; }
.fbrand-w { flex: 1; min-width: 0; }
.fbrand { width: 100%; min-width: 0; }
.fbrand-pop { width: calc(100vw - 24px); }
.fx .fctx { padding: 0 12px 8px; }
.fx .scope { margin-left: 0; text-align: left; }
.filters.fx .fsheet { inset: auto 0 0 0; max-height: 88vh; border-radius: 18px 18px 0 0; box-shadow: 0 -12px 40px rgba(23,23,28,.25); }
}
.fchecks .fgrp { grid-column: 1 / -1; width: 100%; flex-basis: 100%; margin: 8px 0 2px; font: 600 11px/1.4 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.tw-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.tw-ctl { display: grid; gap: 4px; }
.tw-sp { flex: 1; }
.tw-k { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tw-k .stat .v { font-size: clamp(22px, 2.1vw, 32px); white-space: nowrap; }
.tw-pt.nl text { display: none; }
.tw-pt.nl circle { opacity: .55; }
.tw-rank td, .tw-rank th { white-space: nowrap; }
.tw-rank td small { white-space: normal; }
.tw-lead { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tw-lead > div { display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--radius-lg, 14px); background: var(--bg-surface); border: 1px solid var(--border-default); }
.tw-lead b { font: 700 17px/1.25 var(--font-display); }
.tw-lead span:last-child { font-size: 13px; color: var(--text-muted); }
.tw-ch { display: flex; align-items: center; gap: 10px; color: var(--text-primary); text-decoration: none; }
.tw-ch span { display: grid; line-height: 1.2; }
.tw-ch small { color: var(--text-muted); font-size: 12px; }
.tw-rank th.sortable { cursor: pointer; }
.tw-rank th.on { color: var(--brand-primary); }
.tw-rank td small { color: var(--text-muted); }
.tw-paid { font-style: normal; font-size: 11px; font-weight: 600; color: var(--status-warning, #b54708); white-space: nowrap; }
.tw-map td.num { text-align: center; }
.tw-sc { width: 100%; height: auto; display: block; }
.tw-gl { stroke: var(--border-default); stroke-width: 1; }
.tw-diag { stroke: var(--border-strong); stroke-width: 1.5; stroke-dasharray: 4 4; }
.tw-ax { font-size: 11px; fill: var(--text-muted); font-family: var(--font-sans); }
.tw-pt circle { fill: var(--chart-youtube, #eba13a); stroke: var(--bg-surface); stroke-width: 2; }
.tw-pt text { font-size: 11.5px; fill: var(--text-secondary); font-family: var(--font-sans); font-weight: 600; }
.tw-vids { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.tw-vid { display: grid; gap: 6px; align-content: start; color: var(--text-primary); text-decoration: none; }
.tw-vid > b { font: 700 14.5px/1.3 var(--font-display); }
.tw-vid:hover > b { text-decoration: underline; }
.tw-th { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--g-youtube, var(--bg-subtle)); }
.tw-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tw-th em { position: absolute; left: 8px; top: 8px; font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: rgba(23,23,28,.75); color: #fff; }
.tw-th em.p { left: auto; right: 8px; background: #b54708; }
.tw-m, .tw-s { font-size: 12.5px; color: var(--text-muted); }
.tw-s b { color: var(--text-primary); }
.tw-b { display: flex; flex-wrap: wrap; gap: 4px; }
@media (max-width: 1100px) { .tw-k { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tw-vids { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tw-k, .tw-lead { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .tw-lead { grid-template-columns: minmax(0, 1fr); } .tw-vids { grid-template-columns: minmax(0, 1fr); } }
.pg-tworcy .filters.fx #fctxTxt > span, .pg-tworcy .filters.fx .fdots, .pg-tworcy .filters.fx #scope { display: none; }
.pg-tworcy .filters.fx .filters-in > .fgroup:not(.fg-m) { display: none; }
@media (min-width: 761px) { .pg-tworcy .filters.fx #fbarBtn { display: none; } }
.pg-tworcy .tw-bar { display: flex; align-items: center; gap: 12px; }
.pg-infl .filters.fx .fdots, .pg-infl .filters.fx #scope { display: none; }  
.ms-tbl tr.sel td, .inf-rank tr.sel td { background: var(--brand-tint); }
.inf-bar2 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.inf-bar2 .inf-q { width: 240px; }
@media (max-width: 760px) { .inf-bar2 .fseg { width: 100%; overflow-x: auto; } .inf-bar2 .inf-q { width: 100%; } .inf-bar2 .tw-sp { display: none; } }
[hidden] { display: none !important; }
.fs-ring { position: relative; display: inline-grid; place-items: center; width: var(--fs-size, 40px); height: var(--fs-size, 40px); vertical-align: middle; }
.fs-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.fs-ring .fs-track { fill: none; stroke: var(--bg-subtle); stroke-width: 3.2; }
.fs-ring .fs-arc { fill: none; stroke-width: 3.2; stroke-linecap: round; }
.fs-ring .fs-g0 { stop-color: #8a5cf5; }
.fs-ring .fs-g1 { stop-color: #b866df; }
.fs-ring .fs-g2 { stop-color: #e8703d; }
.fs-ring.lo .fs-arc { opacity: .55; }
.fs-ring b { position: relative; font: 700 calc(var(--fs-size, 40px) * .34) var(--font-display); color: var(--text-primary); }
:root { --sp-a: #8a5cf5; --sp-b: #b866df; --sn-a: #e8703d; --sn-b: #f2913f; --sb-a: #6e6460; --sb-b: #9d928c; }  
:root[data-theme="dark"] { --sn-a: #e46c38; --sn-b: #ee8a52; --sb-a: #8a807b; --sb-b: #a69c97; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sn-a: #e46c38; --sn-b: #ee8a52; --sb-a: #8a807b; --sb-b: #a69c97; } }
.sg-pozytywny { background: linear-gradient(90deg, var(--sp-a), var(--sp-b)); }
.sg-neutralny { background: linear-gradient(90deg, var(--sn-a), var(--sn-b)); }
.sg-negatywny { background: linear-gradient(90deg, var(--sb-a), var(--sb-b)); }
.sent-ring { position: relative; display: inline-grid; place-items: center; width: var(--sr-size, 150px); height: var(--sr-size, 150px); flex: none; }
.sent-ring .sr-g { position: absolute; inset: 0; border-radius: 50%; background: var(--sr-bg, var(--bg-subtle));
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--sr-w, 16px)), #000 calc(100% - var(--sr-w, 16px) + 1px));
mask: radial-gradient(farthest-side, transparent calc(100% - var(--sr-w, 16px)), #000 calc(100% - var(--sr-w, 16px) + 1px)); }
.sent-ring .sr-c { position: relative; display: grid; justify-items: center; text-align: center; line-height: 1.1; }
.sent-ring .sr-c b { font: 800 calc(var(--sr-size, 150px) * .23) var(--font-display); letter-spacing: -.02em;
background: linear-gradient(120deg, var(--sp-a), var(--sp-b) 55%, var(--sn-a)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sent-ring.neg .sr-c b { background: linear-gradient(120deg, var(--sb-a), var(--sb-b)); -webkit-background-clip: text; background-clip: text; }
.sent-bar .t-neg { color: var(--sb-a); }
.sent-ring .sr-c small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-top: 2px; }
.sent-lg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sent-lg span { position: relative; display: grid; gap: 1px; padding: 14px 12px 10px; border-radius: 12px; background: var(--bg-subtle); overflow: hidden; font-size: 12.5px; color: var(--text-secondary); }
.sent-lg span::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--g); }
.sent-lg .k-pozytywny { --g: linear-gradient(90deg, var(--sp-a), var(--sp-b)); }
.sent-lg .k-neutralny { --g: linear-gradient(90deg, var(--sn-a), var(--sn-b)); }
.sent-lg .k-negatywny { --g: linear-gradient(90deg, var(--sb-a), var(--sb-b)); }
.sent-lg b { font: 800 24px/1.1 var(--font-display); background: var(--g); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sent-lg small { color: var(--text-muted); font-size: 11.5px; }
.sent-bar { display: inline-flex; align-items: center; gap: 8px; min-width: 150px; }
.sent-bar .sb-tr { flex: 1; height: 8px; border-radius: 99px; background: var(--bg-subtle); }
.sent-bar .sb-n { font-size: 11.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sent-bar em { font-style: normal; font-weight: 600; } .sent-bar .t-pos { color: var(--sp-a); } .sent-bar .t-neg { color: var(--sb-a); }
.sent-tag { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 600; color: #fff; }
.sent-tag.st-pozytywny { background: linear-gradient(90deg, var(--sp-a), var(--sp-b)); }
.sent-tag.st-neutralny { background: linear-gradient(90deg, var(--sn-a), var(--sn-b)); }
.sent-tag.st-negatywny { background: linear-gradient(90deg, var(--sb-a), var(--sb-b)); }
.st-sent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 26px; align-items: center; }
.st-sent .d { font-size: 12.5px; color: var(--text-muted); margin: 10px 0 0; }
.st-sent .dl { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 600; }
.st-sent .dl.up { background: var(--brand-tint); color: var(--sp-a); } .st-sent .dl.dn { background: var(--brand-tint-sky); color: var(--sb-a); }
.st-neg .rs { display: block; font-size: 12.5px; font-weight: 400; color: var(--text-secondary); margin-top: 3px; }
@media (max-width: 640px) { .st-sent { grid-template-columns: 1fr; justify-items: center; } .sent-lg { width: 100%; } }
.mk-sent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 720px) { .mk-sent { grid-template-columns: 1fr; justify-items: center; } }
.fd-sent { margin: -6px 0 14px; }
.fd-sent .fd-sd { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: 0; }
.fd-sent small { color: var(--text-muted); margin-left: 3px; }
.fd-sent-it { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-secondary); margin-right: 8px; }
.fs-ring, .fs-h { cursor: help; outline-offset: 3px; }
.fs-h { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.fs-h i { display: inline-grid; place-items: center; width: 15px; height: 15px; border: 1.5px solid currentColor; border-radius: 50%; font: italic 700 10px/1 Georgia, serif; opacity: .7; }
.fs-bubble { position: fixed; z-index: 1000; padding: 12px 14px; border-radius: 12px; background: #1f2433; color: #fff; font-size: 13.5px; line-height: 1.45; text-align: center; box-shadow: 0 12px 32px -8px rgba(20,20,40,.35); pointer-events: none; }
.fs-bubble::before { content: ""; position: absolute; top: -6px; left: calc(var(--ax, 50%) - 6px); border: 6px solid transparent; border-top: 0; border-bottom-color: #1f2433; }
.fs-bubble.up::before { top: auto; bottom: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: #1f2433; }
.mt-tbl td { vertical-align: middle; }
.mt-bar { min-width: 220px; width: 34%; }
.mt-bar .tr { display: inline-flex; vertical-align: middle; width: calc(100% - 92px); height: 8px; background: var(--bg-subtle); border-radius: var(--radius-pill); overflow: hidden; gap: 2px; }
.mt-bar .tr .f { height: 100%; }
.mt-bar .n { display: inline-block; width: 86px; margin-left: 6px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.mt-bar .n small { display: block; font-weight: 400; color: var(--text-muted); font-size: 11.5px; }
.mt-0 { color: var(--text-muted); }