/* ============================================================================
   Mondo Leaderboard — Design System
   Mirrors the sandbox-leaderboard Tailwind tokens: soft neutrals,
   blue→purple gradients, light shadows, rounded corners.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap');

/* Light theme — values mirror the reference app's :root tokens in
   src/index.css exactly. HSL space-separated so it stays legible. */
:root {
	/* Backgrounds */
	--background: hsl(0 0% 97.5%);            /* #F8F8F8 */
	--card: hsl(0 0% 100%);                   /* #FFFFFF */
	--card-alt: hsl(220 14% 99%);
	--popover: hsl(0 0% 100%);

	/* Text */
	--foreground: hsl(0 0% 9%);               /* near-black */
	--muted: hsl(220 14% 96%);
	--muted-foreground: hsl(0 0% 45%);

	/* Brand */
	--primary: hsl(217 91% 60%);              /* vibrant blue */
	--primary-hover: hsl(217 91% 55%);
	--primary-foreground: hsl(0 0% 100%);
	--accent: hsl(262 83% 58%);               /* purple */
	--accent-foreground: hsl(0 0% 100%);
	--accent-soft: hsl(262 83% 58% / 0.06);
	--accent-soft-strong: hsl(262 83% 58% / 0.12);

	/* Semantic */
	--success: hsl(152 69% 40%);
	--success-foreground: hsl(0 0% 100%);
	--success-bg: hsl(152 69% 40% / 0.10);
	--destructive: hsl(0 72% 51%);
	--destructive-foreground: hsl(0 0% 100%);
	--destructive-bg: hsl(0 72% 51% / 0.10);

	/* Borders & inputs */
	--border: hsl(220 13% 91%);
	--border-strong: hsl(220 13% 84%);
	--border-soft: hsl(0 0% 0% / 0.06);
	--input: hsl(220 13% 91%);
	--ring: hsl(217 91% 60%);

	/* Layout */
	--radius: 0.75rem;
	--radius-sm: 0.5rem;
	--radius-lg: 1rem;

	/* Gradients — exact reference values */
	--gradient-primary: linear-gradient(135deg, hsl(217 91% 60%), hsl(262 83% 58%));
	--gradient-hero: linear-gradient(135deg, hsl(217 91% 60%), hsl(200 85% 55%));
	--gradient-success: linear-gradient(135deg, hsl(152 69% 40%), hsl(152 69% 50%));
	--gradient-accent: linear-gradient(135deg, hsl(262 83% 58%), hsl(343 81% 58%));
	--gradient-card: linear-gradient(180deg, hsl(0 0% 100%), hsl(220 14% 99%));

	/* Shadows */
	--shadow-card: 0 1px 3px 0 hsl(0 0% 0% / 0.04), 0 1px 2px -1px hsl(0 0% 0% / 0.04);
	--shadow-md: 0 4px 6px -1px hsl(0 0% 0% / 0.05), 0 2px 4px -2px hsl(0 0% 0% / 0.05);
	--shadow-lg: 0 10px 15px -3px hsl(0 0% 0% / 0.06), 0 4px 6px -4px hsl(0 0% 0% / 0.06);
	--shadow-colored: 0 4px 14px -3px hsl(217 91% 60% / 0.25);
	--shadow-post: 0 6px 20px hsl(0 0% 0% / 0.08);
	--shadow-post-hover: 0 8px 28px hsl(0 0% 0% / 0.12);

	/* Chart palette — used by the post-column accent bars */
	--chart-1: hsl(217 91% 60%);     /* blue   — Top Views */
	--chart-2: hsl(262 83% 58%);     /* purple — Top Eng Rate */
	--chart-3: hsl(152 69% 40%);     /* green */
	--chart-4: hsl(25 95% 53%);      /* orange — Top Sponsored */
	--chart-5: hsl(343 81% 58%);     /* pink   — Top Engagements */

	/* Translucent surface for the fixed top bar (light) */
	--surface-translucent: hsl(0 0% 100% / 0.9);

	--transition: 150ms ease;

	/* Layout dimensions — responsive commandbar height matching reference */
	--commandbar-h: 64px;
	--ticker-h: 36px;
	--sidebar-w: 224px;
}

@media (max-width: 960px) {
	:root { --commandbar-h: 56px; --ticker-h: 32px; }
}
@media (max-width: 640px) {
	:root { --commandbar-h: 48px; --ticker-h: 28px; }
}

/* Dark theme — values mirror the reference's `.dark` block exactly. */
:root.dark {
	--background: hsl(224 71% 4%);
	--card: hsl(224 71% 6%);
	--card-alt: hsl(224 71% 7%);
	--popover: hsl(224 71% 6%);

	--foreground: hsl(0 0% 95%);
	--muted: hsl(215 28% 17%);
	--muted-foreground: hsl(0 0% 64%);

	--primary: hsl(217 91% 65%);
	--primary-hover: hsl(217 91% 70%);
	--primary-foreground: hsl(0 0% 100%);
	--accent: hsl(262 83% 65%);
	--accent-foreground: hsl(0 0% 100%);
	--accent-soft: hsl(262 83% 65% / 0.12);
	--accent-soft-strong: hsl(262 83% 65% / 0.20);

	--success: hsl(152 69% 45%);
	--success-foreground: hsl(0 0% 100%);
	--success-bg: hsl(152 69% 45% / 0.15);
	--destructive: hsl(0 63% 51%);
	--destructive-foreground: hsl(0 0% 95%);
	--destructive-bg: hsl(0 63% 51% / 0.18);

	--border: hsl(215 28% 17%);
	--border-strong: hsl(215 28% 22%);
	--border-soft: hsl(0 0% 100% / 0.06);
	--input: hsl(215 28% 17%);
	--ring: hsl(217 91% 65%);

	--gradient-primary: linear-gradient(135deg, hsl(217 91% 60%), hsl(262 83% 58%));
	--gradient-hero: linear-gradient(135deg, hsl(217 91% 55%), hsl(200 80% 50%));
	--gradient-success: linear-gradient(135deg, hsl(152 69% 45%), hsl(152 69% 55%));
	--gradient-accent: linear-gradient(135deg, hsl(262 83% 60%), hsl(343 81% 60%));
	--gradient-card: linear-gradient(180deg, hsl(224 71% 7%), hsl(224 71% 9%));

	--shadow-card: 0 1px 3px 0 hsl(0 0% 0% / 0.2);
	--shadow-md: 0 4px 6px -1px hsl(0 0% 0% / 0.25);
	--shadow-lg: 0 10px 15px -3px hsl(0 0% 0% / 0.3);
	--shadow-colored: 0 4px 14px -3px hsl(217 91% 60% / 0.35);
	--shadow-post: 0 6px 20px hsl(0 0% 0% / 0.15);
	--shadow-post-hover: 0 8px 28px hsl(0 0% 0% / 0.2);

	--chart-1: hsl(217 91% 65%);
	--chart-2: hsl(262 83% 65%);
	--chart-3: hsl(152 69% 50%);
	--chart-4: hsl(25 95% 58%);
	--chart-5: hsl(343 81% 63%);

	--surface-translucent: hsl(224 71% 4% / 0.85);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Thin dark scrollbars */
* {
	scrollbar-width: thin;
	scrollbar-color: hsl(215 28% 22%) transparent;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
	background: hsl(215 28% 22%);
	border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: hsl(215 28% 30%); }

html, body {
	/* Exact body rule from the reference's `src/index.css` @layer base */
	font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
	font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
	letter-spacing: -0.011em;
	background: var(--background);
	color: var(--foreground);
	line-height: 1.5;
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
	letter-spacing: -0.02em;
}

[hidden] { display: none !important; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

button {
	font: inherit;
	cursor: pointer;
	border: 0;
	background: transparent;
	color: inherit;
}

input, select { font: inherit; }

/* Visible focus ring for keyboard navigation.
   `:focus-visible` targets keyboard focus only — mouse clicks don't
   trigger it — so the ring doesn't flash on every click. Applied to
   every interactive element so tab-key users always see where they
   are. */
*:focus { outline: none; }
*:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 4px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* ─── Login overlay ─────────────────────────────────────────────────────── */

.overlay {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--background);
	z-index: 100;
	padding: 16px;
}

.login-card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 36px 32px;
	width: 100%;
	max-width: 380px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-shadow: var(--shadow-lg);
}

.login-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin-bottom: 4px;
}

.login-logo {
	width: 56px;
	height: 56px;
	object-fit: contain;
	margin-bottom: 4px;
}

.login-card h1 {
	font-size: 24px;
	font-weight: 600;
	text-align: center;
	margin: 0;
	background: var(--gradient-primary);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.login-sub {
	font-size: 13px;
	color: var(--muted-foreground);
	text-align: center;
	margin: 0;
}

.login-card label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 12px;
	font-weight: 500;
	color: var(--muted-foreground);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.login-card input[type='text'],
.login-card input[type='password'] {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 10px 14px;
	color: var(--foreground);
	font-size: 14px;
	outline: none;
	transition: border-color var(--transition), box-shadow var(--transition);
}

.login-card input:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px hsl(217 91% 60% / 0.15);
}

.login-card .show-password {
	flex-direction: row;
	align-items: center;
	gap: 8px;
	text-transform: none;
	letter-spacing: 0;
	color: var(--muted-foreground);
	font-size: 13px;
}

.login-card button[type='submit'] {
	background: var(--gradient-primary);
	color: var(--primary-foreground);
	padding: 12px;
	border-radius: var(--radius-sm);
	font-weight: 600;
	font-size: 14px;
	transition: opacity var(--transition), box-shadow var(--transition);
	box-shadow: var(--shadow-colored);
}

.login-card button[type='submit']:hover:not(:disabled) { opacity: 0.92; }
.login-card button[type='submit']:disabled { opacity: 0.6; cursor: not-allowed; }

.error {
	color: var(--destructive);
	font-size: 13px;
	padding: 8px 12px;
	background: var(--destructive-bg);
	border-radius: var(--radius-sm);
}

/* Brief shake animation applied to the login card on a failed attempt
   so the error state is visually obvious even when the same message
   was already on screen. JS adds .shake; CSS animates and self-clears. */
@keyframes login-shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-6px); }
	40% { transform: translateX(6px); }
	60% { transform: translateX(-4px); }
	80% { transform: translateX(4px); }
}
.login-card.shake {
	animation: login-shake 0.32s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

/* ─── App shell ─────────────────────────────────────────────────────────── */

.app {
	min-height: 100vh;
	padding-top: calc(var(--commandbar-h) + var(--ticker-h));
}

/* CommandBar — fixed at top */
.commandbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--commandbar-h);
	background: var(--surface-translucent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--border);
	z-index: 50;
	box-shadow: var(--shadow-card);
}

.commandbar-inner {
	height: 100%;
	max-width: 1480px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.commandbar-left { display: flex; align-items: center; gap: 16px; }
.commandbar-right { display: flex; align-items: center; gap: 12px; }

.brand {
	display: flex;
	align-items: center;
	height: 32px;
	text-decoration: none;
}
.brand img {
	height: 28px;
	width: auto;
	display: block;
}
.brand:hover { opacity: 0.85; }

.commandbar-divider {
	width: 1px;
	height: 24px;
	background: var(--border-soft);
}

.view-nav { display: flex; gap: 2px; }
.view-nav-item {
	font-size: 14px;
	font-weight: 500;
	color: var(--muted-foreground);
	padding: 4px 12px;
	border-radius: var(--radius-sm);
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: color var(--transition), background var(--transition);
}
.view-nav-item svg { width: 14px; height: 14px; }
.view-nav-item:hover { color: var(--foreground); background: var(--border-soft); }
.view-nav-item.active { color: var(--foreground); background: var(--muted); }
.view-nav-item[data-disabled='true'] { opacity: 0.5; }
.view-nav-item[data-disabled='true']:hover { opacity: 0.7; }

.env-label {
	font-size: 11px;
	font-weight: 500;
	color: var(--muted-foreground);
	background: var(--muted);
	padding: 4px 10px;
	border-radius: 999px;
}

.user-menu-wrap {
	position: relative;
	display: flex;
	align-items: center;
}
.user-button {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 3px 6px 3px 3px;
	border-radius: 999px;
	background: var(--card);
	border: 1px solid var(--border);
	color: var(--foreground);
	font-size: 13px;
	font-weight: 600;
	box-shadow: var(--shadow-card);
	transition: background var(--transition), box-shadow var(--transition);
	cursor: pointer;
}
.user-button:hover { background: var(--muted); box-shadow: var(--shadow-md); }
.user-button #user-initial {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: var(--gradient-primary);
	color: var(--primary-foreground);
	font-weight: 700;
}
.user-chevron { width: 14px; height: 14px; color: var(--muted-foreground); }
.user-menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	min-width: 220px;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	z-index: 60;
	padding: 6px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.user-menu[hidden] { display: none; }
.user-menu-header {
	padding: 10px 12px 8px;
	border-bottom: 1px solid var(--border);
	margin-bottom: 4px;
}
.user-menu-email {
	font-size: 13px;
	font-weight: 600;
	color: var(--foreground);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.user-menu-env {
	font-size: 11px;
	color: var(--muted-foreground);
	margin-top: 2px;
	font-family: ui-monospace, monospace;
}
.user-menu-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	background: transparent;
	border: 0;
	border-radius: var(--radius-sm);
	cursor: pointer;
	color: var(--foreground);
	font-size: 13px;
	text-align: left;
}
.user-menu-item:hover { background: var(--muted); }
.user-menu-item svg { width: 14px; height: 14px; color: var(--muted-foreground); }

/* AccountTicker — fixed below commandbar. Reference uses bg-accent/10
   for the strip and bg-accent/20 for the label area. */
.account-ticker {
	position: fixed;
	top: var(--commandbar-h);
	left: 0;
	right: 0;
	height: var(--ticker-h);
	background: var(--background);
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: center;
	z-index: 40;
	overflow: hidden;
}
:root.dark .account-ticker {
	background: hsl(224 71% 6%);
}
.account-ticker-label {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	background: hsl(from var(--accent) h s l / 0.15);
	padding: 0 12px;
	height: 100%;
	border-right: 1px solid var(--border);
	font-size: 11px;
	font-weight: 600;
	color: var(--accent);
}
.account-ticker-label svg {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
}
.ticker-dots { display: flex; gap: 3px; margin-left: 6px; }
.ticker-dot {
	width: 5px;
	height: 5px;
	border-radius: 999px;
	background: hsl(from var(--accent) h s l / 0.3);
	padding: 0;
	cursor: pointer;
	border: 0;
	transition: background var(--transition);
}
.ticker-dot:hover { background: hsl(from var(--accent) h s l / 0.5); }
.ticker-dot.active { background: var(--accent); }

.account-ticker-track {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	position: relative;
}
.account-ticker-items {
	display: flex;
	gap: 16px;
	padding: 0 16px;
	white-space: nowrap;
	animation: ticker-scroll 120s linear infinite;
	width: max-content;
	will-change: transform;
}
.account-ticker-items:hover { animation-play-state: paused; }
/* Static mode: when the rendered content fits without overflow there's
   nothing to scroll past, so disable the marquee animation entirely.
   ticker.js sets this class for the first render, then removes it on
   the next frame if measurement shows the content actually overflows. */
.account-ticker-items-static {
	animation: none;
	transform: none;
	width: auto;
}
.account-ticker-item {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	flex-shrink: 0;
}
.ticker-rank { color: var(--muted-foreground); font-family: ui-monospace, monospace; }
.ticker-name {
	font-weight: 500;
	color: var(--foreground);
	max-width: 140px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ticker-value { font-weight: 600; color: var(--accent); }

@keyframes ticker-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* App body — sidebar + main */
.app-body {
	display: flex;
	max-width: 1480px;
	margin: 0 auto;
	min-height: calc(100vh - var(--commandbar-h) - var(--ticker-h));
}

main {
	flex: 1;
	min-width: 0;
	padding: 24px 24px 64px;
}

/* ─── Filter sidebar ────────────────────────────────────────────────────── */

.filter-sidebar {
	width: var(--sidebar-w);
	flex-shrink: 0;
	border-right: 1px solid hsl(from var(--border) h s l / 0.4);
	background: var(--card);
	padding: 16px;
	display: flex;
	flex-direction: column;
	position: sticky;
	top: calc(var(--commandbar-h) + var(--ticker-h));
	height: calc(100vh - var(--commandbar-h) - var(--ticker-h));
	overflow-y: auto;
	/* Intentionally no width/padding transition — Chrome has been
	   observed to stall flex-item width transitions mid-flight when
	   combined with `position: sticky`, leaving the element pinned
	   to its starting width. Instant collapse is also clearer UX. */
}
/* Collapsed sidebar: narrow icon-only strip matching reference */
.app-body.sidebar-collapsed .filter-sidebar {
	width: 48px;
	min-width: 48px;
	padding: 8px 0;
	overflow: hidden;
}
.app-body.sidebar-collapsed .filter-sidebar .filter-sidebar-header,
.app-body.sidebar-collapsed .filter-sidebar .filter-sections {
	display: none;
}
.app-body.sidebar-collapsed .filter-sidebar-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 0;
	border-top: 0;
	margin-top: 0;
}
.app-body.sidebar-collapsed .filter-sidebar-actions .filter-actions-label {
	display: none;
}
.app-body.sidebar-collapsed .filter-sidebar-actions .action-btn {
	width: 36px;
	height: 36px;
	padding: 0;
	justify-content: center;
	border-radius: var(--radius);
}
.app-body.sidebar-collapsed .filter-sidebar-actions .action-btn span {
	display: none;
}
/* Collapsed reopen icon is only visible when sidebar is collapsed */
.collapsed-reopen-btn { display: none !important; }
.app-body.sidebar-collapsed .collapsed-reopen-btn { display: flex !important; }
/* (Floating sidebar-reopen-btn removed — redundant with the
   collapsed-reopen-btn in the icon strip.) */

.filter-sidebar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}
.filter-sidebar-header h2 {
	font-size: 18px;
	font-weight: 600;
	color: var(--foreground);
}
.filter-sidebar-header-actions {
	display: flex;
	align-items: center;
	gap: 4px;
}

.icon-btn {
	width: 32px;
	height: 32px;
	border-radius: var(--radius-sm);
	color: var(--muted-foreground);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: color var(--transition), background var(--transition);
}
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn:hover { color: var(--foreground); background: hsl(from var(--muted) h s l / 0.5); }

/* Sections list */
.filter-sections {
	display: flex;
	flex-direction: column;
}

.filter-section {
	border-bottom: 1px solid hsl(from var(--border) h s l / 0.4);
	position: relative;
}
.filter-section-summary {
	width: 100%;
	display: flex;
	align-items: center;
	padding: 12px 4px;
	font-size: 12px;
	font-weight: 600;
	color: var(--foreground);
	letter-spacing: 0.02em;
	cursor: default;
	pointer-events: none;
}
.filter-section-summary .chevron { display: none; }

.filter-section-body {
	padding: 0 4px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.filter-helper-text {
	font-size: 11px;
	color: var(--muted-foreground);
}

/* ── Date-range picker: trigger + popover (presets + dual calendar) ── */
.date-picker-wrap { position: relative; }
.date-trigger { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; cursor: pointer; }
.date-trigger svg { width: 14px; height: 14px; opacity: 0.6; flex-shrink: 0; }
.date-trigger-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.date-popover {
	position: fixed; z-index: 1000; /* portaled to body + high z so it sits above posts/search */
	background: var(--card, #16181d); border: 1px solid var(--border, #2a2d35);
	border-radius: var(--radius, 10px); box-shadow: 0 12px 32px rgba(0,0,0,0.45);
	padding: 10px; width: max-content; max-width: 92vw;
}
.dp-body { display: flex; gap: 12px; }
.dp-presets { display: flex; flex-direction: column; gap: 2px; min-width: 132px; border-right: 1px solid var(--border, #2a2d35); padding-right: 8px; }
.dp-preset { display: flex; align-items: center; gap: 8px; text-align: left; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--foreground, #e6e8ec); background: transparent; border: 0; }
.dp-preset:hover { background: hsl(from var(--muted, #23262e) h s l / 0.6); }
.dp-preset.active { background: hsl(from var(--accent, #6d5efc) h s l / 0.18); color: var(--accent, #8b7dff); }
.dp-radio { width: 13px; height: 13px; border-radius: 50%; border: 2px solid currentColor; flex-shrink: 0; position: relative; opacity: 0.45; }
.dp-preset.active .dp-radio { opacity: 1; }
.dp-preset.active .dp-radio::after { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: currentColor; }

.dp-cal-months { display: flex; gap: 16px; }
.dp-month { width: 198px; }
.dp-month-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dp-month-name { font-size: 13px; font-weight: 600; }
.dp-nav { background: transparent; border: 0; color: var(--muted-foreground, #9aa0aa); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 6px; }
.dp-nav:hover { background: var(--muted, #23262e); color: var(--foreground, #e6e8ec); }
.dp-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 2px; }
.dp-dow span { text-align: center; font-size: 10px; color: var(--muted-foreground, #9aa0aa); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-day { aspect-ratio: 1; border: 0; background: transparent; color: var(--foreground, #e6e8ec); font-size: 12px; border-radius: 6px; cursor: pointer; padding: 0; }
.dp-day.dp-empty { visibility: hidden; cursor: default; }
.dp-day:hover:not(.dp-empty):not(.end) { background: var(--muted, #23262e); }
.dp-day.in-range { background: hsl(from var(--accent, #6d5efc) h s l / 0.18); border-radius: 0; }
.dp-day.end { background: var(--accent, #6d5efc); color: #fff; }
.dp-day.today:not(.end) { outline: 1px solid var(--accent, #6d5efc); outline-offset: -1px; }
.dp-day.dp-future { opacity: 0.3; cursor: not-allowed; }
.dp-day.dp-future:hover { background: transparent; }
.dp-nav-spacer { display: inline-block; width: 28px; }

.dp-foot { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border, #2a2d35); }
.dp-input { width: 122px; font-size: 12px; }
.dp-dash { color: var(--muted-foreground, #9aa0aa); }
.dp-actions { display: flex; gap: 6px; margin-left: auto; }
.dp-clear, .dp-cancel, .dp-update { font-size: 12px; padding: 5px 12px; border-radius: 6px; cursor: pointer; border: 1px solid var(--border, #2a2d35); background: transparent; color: var(--foreground, #e6e8ec); }
.dp-clear:hover, .dp-cancel:hover { background: var(--muted, #23262e); }
.dp-update { background: var(--accent, #6d5efc); border-color: var(--accent, #6d5efc); color: #fff; }

/* Multi-select + regular select triggers share the same chrome */
.ms-trigger {
	width: 100%;
	height: 36px;
	background: var(--background);
	border: 1px solid hsl(from var(--border) h s l / 0.6);
	border-radius: var(--radius-sm);
	padding: 0 10px;
	color: var(--foreground);
	font-size: 13px;
	font-weight: 400;
	outline: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
}
.ms-trigger svg {
	width: 14px;
	height: 14px;
	color: var(--muted-foreground);
	flex-shrink: 0;
	opacity: 0.5;
}
.ms-trigger:hover { border-color: var(--border-strong); }
.ms-trigger:focus,
.ms-trigger.active {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px hsl(217 91% 60% / 0.12);
}

select.ms-trigger {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='7 15 12 20 17 15'/><polyline points='7 9 12 4 17 9'/></svg>");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 14px 14px;
	padding-right: 30px;
}

.ms-trigger-label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Multi-select popover (shared; positioned in JS) */
.ms-popover {
	position: fixed;
	background: var(--popover);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-lg);
	z-index: 200;
	display: flex;
	flex-direction: column;
	min-width: 220px;
	max-width: 280px;
	max-height: 300px;
	overflow: hidden;
}

.ms-popover-search {
	position: relative;
	padding: 8px;
	border-bottom: 1px solid hsl(from var(--border) h s l / 0.4);
}
.ms-popover-search svg {
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
	height: 14px;
	color: var(--muted-foreground);
}
.ms-popover-search input {
	width: 100%;
	background: var(--background);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 6px 10px 6px 28px;
	color: var(--foreground);
	font-size: 13px;
	outline: none;
}

.ms-popover-options {
	overflow-y: auto;
	padding: 4px;
	flex: 1;
}
.ms-option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	border-radius: var(--radius-sm);
	font-size: 13px;
	color: var(--foreground);
	cursor: pointer;
	transition: background var(--transition);
}
.ms-option:hover { background: hsl(from var(--muted) h s l / 0.5); }
.ms-option-toggle {
	justify-content: space-between;
	color: var(--accent);
	font-weight: 500;
	font-size: 12px;
	padding: 6px 10px;
	margin-bottom: 4px;
	border-bottom: 1px solid var(--border);
	border-radius: 0;
}
.ms-option-toggle-count {
	font-size: 11px;
	color: var(--muted-foreground);
	font-weight: 400;
}
.ms-option-check {
	width: 14px;
	height: 14px;
	border: 1px solid var(--border-strong);
	border-radius: 3px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.ms-option[data-selected='true'] .ms-option-check {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--primary-foreground);
}
.ms-option-check svg { width: 10px; height: 10px; }
.ms-option[data-selected='false'] .ms-option-check svg { display: none; }
.ms-option-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--muted-foreground);
}
.ms-option-icon svg { width: 16px; height: 16px; }
.ms-option-icon-ig      { color: #C13584; }
.ms-option-icon-tiktok  { color: var(--foreground); }
.ms-option-icon-twitter { color: #1DA1F2; }
.ms-option-icon-fb      { color: #1877F2; }
.ms-option-icon-yt      { color: #FF0000; }
.ms-option-label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Actions */
.filter-sidebar-actions {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid hsl(from var(--border) h s l / 0.4);
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.filter-actions-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--muted-foreground);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0 2px 4px;
}
.action-btn {
	width: 100%;
	height: 36px;
	padding: 0 12px;
	background: var(--background);
	border: 1px solid hsl(from var(--border) h s l / 0.6);
	border-radius: var(--radius-sm);
	color: var(--foreground);
	font-size: 13px;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	transition: background var(--transition), border-color var(--transition), color var(--transition);
	font-family: inherit;
}
.action-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.action-btn:hover {
	background: hsl(from var(--muted) h s l / 0.5);
	border-color: var(--border-strong);
}
.action-btn.active {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--primary-foreground);
}

/* Theme icon/label swap based on current theme */
.theme-icon-light, .theme-label-light { display: none; }
:root.dark .theme-icon-dark, :root.dark .theme-label-dark { display: none; }
:root.dark .theme-icon-light, :root.dark .theme-label-light { display: inline-flex; }
:root.dark .theme-label-light { display: inline; }

/* ─── Overview — breadcrumb / movers / top posts ───────────────────────── */

.overview {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.overview-breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--muted-foreground);
}
.crumb { font-weight: 500; }
.crumb:last-of-type { color: var(--foreground); font-weight: 600; }
.crumb-sep { opacity: 0.4; }

/* Movers grid */
.movers-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.mover-card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 16px;
	display: flex;
	flex-direction: column;
	box-shadow: var(--shadow-card);
	transition: box-shadow var(--transition);
}
.mover-card:hover { box-shadow: var(--shadow-md); }
.mover-card header {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	flex-wrap: wrap;
}
.mover-card h3 {
	font-size: 13px;
	font-weight: 600;
}
.mover-icon {
	display: flex;
	align-items: center;
}
.mover-header-icon {
	width: 16px;
	height: 16px;
}
.mover-header-icon-up { color: hsl(152 69% 45%); }
.mover-header-icon-down { color: hsl(0 72% 51%); }
.mover-meta {
	margin-left: auto;
	font-size: 10px;
	color: var(--muted-foreground);
	text-transform: lowercase;
}

.metric-toggle {
	margin-left: auto;
	display: inline-flex;
	gap: 2px;
	background: var(--muted);
	border-radius: 6px;
	padding: 2px;
}
.metric-toggle-btn {
	font-size: 10px;
	font-weight: 600;
	color: var(--muted-foreground);
	padding: 3px 8px;
	border-radius: 4px;
	transition: color var(--transition), background var(--transition), box-shadow var(--transition);
	text-transform: capitalize;
}
.metric-toggle-btn.active {
	background: var(--card);
	color: var(--foreground);
	box-shadow: var(--shadow-card);
}
.metric-toggle-btn:not(.active):hover { color: var(--foreground); }

.mover-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.mover-list li {
	display: flex;
	align-items: center;
	gap: 10px;
}
.mover-rank {
	width: 16px;
	text-align: right;
	font-size: 11px;
	font-weight: 700;
	color: var(--muted-foreground);
	flex-shrink: 0;
}
.mover-body {
	flex: 1;
	min-width: 0;
}
.mover-name {
	font-size: 12px;
	font-weight: 600;
	color: var(--foreground);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: flex;
	align-items: center;
	gap: 4px;
}
.mover-platforms {
	display: inline-flex;
	gap: 2px;
	flex-shrink: 0;
}
.mover-platform-icon {
	display: inline-flex;
	align-items: center;
	width: 12px;
	height: 12px;
	color: var(--muted-foreground);
}
.mover-platform-icon svg { width: 12px; height: 12px; }
.mover-platform-icon[data-platform="instagram"], .mover-platform-icon[data-platform="ig"] { color: #C13584; }
.mover-platform-icon[data-platform="tiktok"]    { color: #000; }
:root.dark .mover-platform-icon[data-platform="tiktok"] { color: var(--foreground); }
.mover-platform-icon[data-platform="twitter"]   { color: #1DA1F2; }
.mover-platform-icon[data-platform="facebook"], .mover-platform-icon[data-platform="fb"]  { color: #1877F2; }
.mover-platform-icon[data-platform="youtube"], .mover-platform-icon[data-platform="yt"]   { color: #FF0000; }
.mover-sub {
	font-size: 10px;
	color: var(--muted-foreground);
}
.pct-up { color: var(--success); background: var(--success-bg); }
.pct-down { color: var(--destructive); background: var(--destructive-bg); }

/* Mover-row delta: abs change + % change merged into a single coloured
   pill ("[+5.7M │ +33%]"). Direction class lives on the wrapper so the
   shell carries the bg/text colour and the two halves are transparent
   text with a hairline divider — same pattern as .mover-toggles. */
.mover-deltas {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 0;
	padding: 2px 8px;
	border-radius: 999px;
	white-space: nowrap;
	flex-shrink: 0;
}
.mover-abs { font-size: 11px; font-weight: 700; white-space: nowrap; }
.mover-pct { font-size: 12px; font-weight: 700; white-space: nowrap; }
.mover-delta-divider {
	width: 1px;
	align-self: stretch;
	background: currentColor;
	opacity: 0.3;
	margin: 1px 6px;
}

/* Top Movers toggles: one single pill containing both pairs
   (Total/Avg and Engagements/Views) separated by a thin divider.
   Two separate pills wrapped unpredictably and looked crammed even
   when they did fit; merging them eliminates the gap entirely. */
.mover-toggles {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	margin-left: auto;
	background: var(--muted);
	border-radius: 6px;
	padding: 2px;
	gap: 0;
}
.mover-toggles .metric-toggle {
	margin-left: 0;
	background: transparent;
	padding: 0;
	border-radius: 0;
}
.mover-toggles .mover-toggle-divider {
	width: 1px;
	align-self: stretch;
	background: var(--border);
	margin: 2px 6px;
}
.scope-toggle { /* same shape as .metric-toggle */ }
.scope-toggle-btn {
	font: inherit; background: transparent; border: 0;
	padding: 2px 8px; border-radius: 999px; cursor: pointer;
	font-size: 11px; font-weight: 600; color: var(--muted-foreground);
}
.scope-toggle-btn.active { background: var(--muted); color: var(--foreground); }
.scope-toggle-btn:not(.active):hover { color: var(--foreground); }

/* Compare-page Avg KPI row above the accounts table. */
.compare-kpis {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
	padding: 8px 12px 12px;
	border-bottom: 1px solid var(--border);
}
.compare-kpi {
	display: flex; flex-direction: column; gap: 2px;
	padding: 8px 10px;
	background: hsl(from var(--muted) h s l / 0.4);
	border-radius: 8px;
}
.compare-kpi-label {
	font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
	color: var(--muted-foreground); text-transform: uppercase;
}
.compare-kpi-value { font-size: 16px; font-weight: 700; color: var(--foreground); }

.empty-text {
	font-size: 12px;
	color: var(--muted-foreground);
}

/* Top performing posts */
.top-posts-section {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.section-title {
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.01em;
}
.section-toggle {
	font-size: 12px;
	color: var(--muted-foreground);
	font-weight: 500;
	padding: 4px 8px;
	border-radius: var(--radius-sm);
}
.section-toggle:hover { color: var(--foreground); background: var(--muted); }

.top-posts-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
.top-posts-grid:has(.post-column:nth-child(4)) {
	grid-template-columns: repeat(4, 1fr);
}

.post-column {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.post-column-header {
	display: flex;
	align-items: center;
	gap: 8px;
}
.col-bar {
	width: 4px;
	height: 16px;
	border-radius: 999px;
}
.col-views { background: var(--chart-1); }
.col-eng { background: var(--chart-5); }
.col-rate { background: var(--chart-2); }
.col-sponsored { background: var(--chart-4); }
.post-column h3 {
	font-size: 11px;
	font-weight: 600;
	color: var(--muted-foreground);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.post-column-tiles {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.post-tile {
	position: relative;
	aspect-ratio: 3 / 4;
	border-radius: var(--radius);
	overflow: hidden;
	cursor: pointer;
	background: var(--muted);
	box-shadow: var(--shadow-post);
	transition: transform var(--transition), box-shadow var(--transition);
}
.post-tile:hover {
	box-shadow: var(--shadow-post-hover);
}
.post-tile:hover .tile-img {
	transform: scale(1.05);
}

.tile-img,
.tile-placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.tile-img {
	object-fit: cover;
	z-index: 1;
	transition: transform 300ms ease;
}
.tile-img.thumb-broken { display: none; }
.tile-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 56px;
	font-weight: 700;
	z-index: 0;
}
.tile-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(0 0 0 / 0.85) 0%, rgb(0 0 0 / 0.2) 50%, transparent 100%);
	z-index: 2;
}
.tile-rank {
	position: absolute;
	top: 6px;
	left: 6px;
	width: 28px;
	height: 28px;
	z-index: 3;
	filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.55));
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	line-height: 1;
}
.tile-rank-num {
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	background: rgb(0 0 0 / 0.5);
	padding: 2px 6px;
	border-radius: 10px;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.tile-platform {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: rgb(0 0 0 / 0.55);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: 999px;
	z-index: 3;
}
.tile-platform svg { width: 13px; height: 13px; }
.tile-platform-ig      { background: linear-gradient(135deg, #833AB4, #E1306C, #F77737); }
.tile-platform-tiktok  { background: #000; }
.tile-platform-twitter { background: #000; }
.tile-platform-fb      { background: #1877F2; }
.tile-platform-yt      { background: #FF0000; }
.tile-platform-label {
	position: absolute;
	top: 8px;
	right: 8px;
	font-size: 10px;
	font-weight: 600;
	color: rgb(255 255 255 / 0.8);
	background: rgb(0 0 0 / 0.4);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	padding: 2px 6px;
	border-radius: var(--radius-sm);
	z-index: 3;
}
.tile-platform-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
}
.tile-platform-icon svg { width: 14px; height: 14px; }
.tile-footer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 12px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px;
	z-index: 3;
}
.tile-text {
	min-width: 0;
	flex: 1;
}
.tile-account {
	font-size: 11px;
	font-weight: 600;
	color: #ffffff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tile-caption {
	font-size: 10px;
	color: rgb(255 255 255 / 0.7);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 2px;
}
.tile-metric {
	flex-shrink: 0;
	text-align: right;
}
.tile-metric-value {
	font-size: 13px;
	font-weight: 700;
	color: #ffffff;
	line-height: 1;
}
.tile-metric-label {
	font-size: 9px;
	color: rgb(255 255 255 / 0.55);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-top: 2px;
}

.post-tile-empty {
	background: hsl(215 28% 17% / 0.30);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--muted-foreground);
	font-size: 12px;
	cursor: default;
}
.post-tile-empty:hover { transform: none; box-shadow: var(--shadow-card); }

/* ─── Accounts table ─────────────────────────────────────────────────── */

.accounts-view {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.accounts-table-wrap {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow-x: auto;
	box-shadow: var(--shadow-card);
}

.accounts-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.accounts-table thead {
	background: var(--muted);
}

.accounts-table th {
	padding: 10px 12px;
	text-align: left;
	font-size: 12px;
	font-weight: 600;
	color: var(--muted-foreground);
	letter-spacing: 0.02em;
	border-bottom: 1px solid var(--border);
	white-space: nowrap;
}

.accounts-table td {
	padding: 12px;
	border-bottom: 1px solid var(--border);
	color: var(--foreground);
	vertical-align: middle;
}

.accounts-table tbody tr {
	cursor: pointer;
	transition: background var(--transition);
}
.accounts-table tbody tr:hover { background: hsl(from var(--muted) h s l / 0.5); }
.accounts-table tbody tr:last-child td { border-bottom: 0; }

.accounts-table .col-rank {
	width: 48px;
	text-align: center;
	color: var(--muted-foreground);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.accounts-table .col-name {
	font-weight: 500;
	min-width: 180px;
}
.accounts-table .col-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.accounts-table th.col-rank,
.accounts-table th.col-num { text-align: right; }
.accounts-table th.col-rank { text-align: center; }

.delta-up    { color: var(--success); font-weight: 600; }
.delta-down  { color: var(--destructive); font-weight: 600; }
.delta-none  { color: var(--muted-foreground); }

/* ─── Posts view ─────────────────────────────────────────────────────── */

.posts-view {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.posts-header {
	flex-wrap: wrap;
	gap: 12px;
}

.posts-search {
	position: relative;
	flex-shrink: 0;
}
.posts-search svg {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	color: var(--muted-foreground);
	pointer-events: none;
}
.posts-search input {
	width: 220px;
	max-width: 100%;
	height: 40px;
	background: hsl(from var(--card) h s l);
	border: 1px solid hsl(from var(--border) h s l / 0.6);
	border-radius: var(--radius);
	padding: 0 12px 0 36px;
	color: var(--foreground);
	font-size: 14px;
	outline: none;
}
.posts-search-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}
.posts-search-row .posts-search-full { margin-bottom: 0; flex: 1; }
.posts-search-full input { width: 100%; }
.emoji-picker-btn {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	border-radius: var(--radius);
	cursor: pointer;
	color: var(--primary);
	transition: background var(--transition), color var(--transition);
}
.emoji-picker-btn svg { width: 20px; height: 20px; }
.emoji-picker-btn:hover { background: hsl(217 91% 60% / 0.1); }
.emoji-opt {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	background: transparent;
	border: 0;
	border-radius: var(--radius-sm);
	cursor: pointer;
}
.emoji-opt:hover { background: var(--muted); }
.posts-search input:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px hsl(217 91% 60% / 0.12);
}
.posts-controls-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}
.posts-controls-left {
	display: flex;
	align-items: center;
	gap: 8px;
}
.posts-controls-right {
	display: flex;
	align-items: center;
	gap: 8px;
}
.posts-account-select-label {
	font-size: 13px;
	color: var(--muted-foreground);
}
.posts-account-select {
	height: 32px;
	width: 180px;
	font-size: 13px;
	background: var(--background);
	color: var(--foreground);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 0 8px;
}

.posts-top10-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 32px;
	padding: 0 12px;
	font-size: 12px;
	font-weight: 600;
	color: var(--muted-foreground);
	background: transparent;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.posts-top10-btn svg { width: 14px; height: 14px; }
.posts-top10-btn:hover { color: var(--foreground); border-color: var(--foreground); }
.posts-top10-btn.active {
	background: var(--primary);
	color: var(--primary-foreground);
	border-color: var(--primary);
}

.posts-table-wrap {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow-x: auto;
	box-shadow: var(--shadow-card);
}

.posts-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.posts-table thead { background: var(--muted); }
.posts-table th {
	padding: 10px 12px;
	text-align: left;
	font-size: 12px;
	font-weight: 600;
	color: var(--muted-foreground);
	letter-spacing: 0.02em;
	border-bottom: 1px solid var(--border);
	white-space: nowrap;
}
.posts-table th.col-num { text-align: right; }

.posts-table td {
	padding: 12px;
	border-bottom: 1px solid var(--border);
	color: var(--foreground);
	vertical-align: middle;
}
.posts-table tbody tr {
	cursor: pointer;
	transition: background var(--transition);
}
.posts-table tbody tr:hover { background: hsl(from var(--muted) h s l / 0.4); }
.posts-table tbody tr:last-child td { border-bottom: 0; }

.posts-table .col-thumb { width: 80px; padding: 8px; }
.posts-table .col-post { min-width: 300px; }
.posts-table .col-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.posts-table .col-date { color: var(--muted-foreground); }

.post-cell-thumb {
	position: relative;
	width: 64px;
	height: 64px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--muted);
}
.post-cell-thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}
.post-cell-thumb-placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	font-size: 22px;
	z-index: 0;
}

.post-cell-account {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 4px;
}
.post-cell-name {
	font-weight: 600;
	color: var(--foreground);
}
.post-cell-platform {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 999px;
	color: #fff;
	flex-shrink: 0;
}
.post-cell-platform svg { width: 11px; height: 11px; }
.post-cell-platform-ig      { background: linear-gradient(135deg, #833AB4, #E1306C, #F77737); }
.post-cell-platform-tiktok  { background: #000; }
.post-cell-platform-twitter { background: #000; }
.post-cell-platform-fb      { background: #1877F2; }
.post-cell-platform-yt      { background: #FF0000; }
.post-cell-caption {
	font-size: 12px;
	color: var(--muted-foreground);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.4;
}

/* ─── Trends view ────────────────────────────────────────────────────── */

.trends-hero { margin-bottom: 24px; }
.trends-hero[hidden] { display: none; }
.trends-hero-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 14px;
	gap: 16px;
}
.trends-hero-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
/* ── AI Content Trends — card layout mirrors reference TrendCard.tsx ── */

.trends-hero-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .trends-hero-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .trends-hero-grid { grid-template-columns: 1fr; } }

.trends-hero-title-row {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.trends-hero-sparkles { color: hsl(262 83% 58%); flex-shrink: 0; }
.trends-hero-chip {
	font-size: 11px; font-weight: 600;
	background: var(--muted); color: var(--muted-foreground);
	padding: 2px 10px; border-radius: 999px;
	font-variant-numeric: tabular-nums;
}
.trends-hero-sub { margin: -8px 0 12px; }
.trends-hero-refresh {
	width: 28px; height: 28px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--border); border-radius: var(--radius-sm);
	background: var(--card); color: var(--foreground);
	cursor: pointer; transition: background .15s ease;
}
.trends-hero-refresh:hover { background: var(--muted); }
.trends-hero-refresh:disabled { opacity: 0.4; cursor: not-allowed; }
.trends-hero-refresh.is-loading svg { animation: aitrend-spin 1s linear infinite; }
@keyframes aitrend-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.aitrend-export-wrap { position: relative; display: inline-block; }
.aitrend-export-btn {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 10px; height: 28px; font-size: 12px;
}
.aitrend-export-menu {
	position: absolute; right: 0; top: calc(100% + 4px);
	background: var(--card); border: 1px solid var(--border);
	border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
	z-index: 20; min-width: 160px; padding: 4px;
}
.aitrend-export-menu button {
	display: block; width: 100%; padding: 8px 10px;
	background: transparent; border: 0; text-align: left;
	font-size: 13px; color: var(--foreground); cursor: pointer;
	border-radius: 4px;
}
.aitrend-export-menu button:hover { background: var(--muted); }

.aitrend-card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	display: flex; flex-direction: column;
	transition: box-shadow .15s ease;
}
.aitrend-card:hover { box-shadow: var(--shadow-md); }
.aitrend-card-head {
	display: flex; align-items: flex-start; gap: 10px;
	padding: 14px 16px 10px;
}
.aitrend-card-icon {
	width: 32px; height: 32px;
	border-radius: 999px;
	display: flex; align-items: center; justify-content: center;
	font-size: 16px; flex-shrink: 0;
	color: hsl(0 0% 18%);
}
/* Active list + computed date-range chips at the top of the hero —
   "📋 Underdog · 📅 May 14 – May 20, 2026". Hidden when no list and
   no date narrowing is active. */
.aitrend-context-chips {
	display: flex; flex-wrap: wrap; gap: 8px;
	margin: 4px 0 12px;
}
.aitrend-context-chip {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 10px;
	background: hsl(from var(--muted) h s l / 0.5);
	color: var(--muted-foreground);
	border-radius: 999px;
	font-size: 12px; font-weight: 500;
}

/* Section summary line between tabs and cards —
   "Cross-Platform Summary · 6 patterns · +12% avg lift" */
.aitrend-section-summary {
	font-size: 13px; color: var(--muted-foreground);
	margin: 0 0 12px;
}
.aitrend-section-summary strong {
	color: var(--foreground); font-weight: 600;
}
.aitrend-section-summary-lift {
	color: hsl(142 71% 32%); font-weight: 600;
}

/* Per-platform tab strip above the trend card grid — Cross-Platform /
   FB / X / IG / YT / TT. Clicking a tab triggers a fresh /trends call
   narrowed to that platform; mondo-svc's filter-signature cache returns
   the same answer on repeat clicks at no OpenRouter cost. */
.aitrend-platform-tabs {
	display: flex; flex-wrap: wrap; gap: 4px;
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--border);
}
.aitrend-platform-tabs button {
	display: inline-flex; align-items: center; gap: 6px;
	background: transparent; border: 1px solid transparent;
	border-radius: 8px; padding: 6px 12px;
	color: var(--muted-foreground);
	font-size: 13px; font-weight: 500;
	cursor: pointer; transition: background var(--transition), color var(--transition);
}
.aitrend-platform-tabs button:hover {
	background: hsl(from var(--muted) h s l / 0.3);
	color: var(--foreground);
}
.aitrend-platform-tabs button.active {
	background: var(--card);
	border-color: var(--border);
	color: var(--foreground); font-weight: 600;
}
.aitrend-platform-tabs button.is-loading {
	position: relative;
	padding-right: 28px;
}
.aitrend-platform-tabs button.is-loading::after {
	content: '';
	position: absolute; right: 10px; top: 50%;
	width: 12px; height: 12px; border-radius: 50%;
	border: 2px solid currentColor; border-top-color: transparent;
	opacity: 0.6;
	/* Merge the vertical-center translate INTO the spin keyframes;
	   otherwise `animation: spin` overwrites the transform property each
	   frame and the circle visibly bounces (loses translateY(-50%) while
	   the rotate is in flight). */
	transform: translateY(-50%) rotate(0deg);
	animation: spin-centered 0.9s linear infinite;
}
@keyframes spin-centered {
	from { transform: translateY(-50%) rotate(0deg); }
	to   { transform: translateY(-50%) rotate(360deg); }
}
.aitrend-platform-glyph { font-size: 14px; line-height: 1; }

.aitrend-card-title-block { flex: 1; min-width: 0; }
/* Tiny rank + (optional) platform stamp above the trend title — mirrors
   the reference TopTrends card header "🏆 #1 TREND / CROSS-PLATFORM". */
.aitrend-card-rank {
	display: flex; align-items: center; gap: 8px;
	font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
	color: var(--muted-foreground); margin-bottom: 2px;
}
.aitrend-card-platform {
	font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
	color: var(--muted-foreground);
	padding: 1px 6px; border-radius: 4px;
	background: hsl(from var(--muted) h s l / 0.6);
}
.aitrend-card-title {
	font-size: 14px; font-weight: 600;
	color: var(--foreground); line-height: 1.3; margin: 0;
}
.aitrend-card-pattern {
	font-size: 12px; color: var(--muted-foreground);
	margin: 2px 0 0;
}
.aitrend-lift-pill {
	display: inline-flex; align-items: center; gap: 6px;
	margin: 0 16px;
	padding: 6px 12px; align-self: flex-start;
	background: hsl(142 71% 45% / 0.12);
	color: hsl(142 71% 32%);
	font-size: 13px; font-weight: 600;
	border-radius: 8px;
}
:root.dark .aitrend-lift-pill { color: hsl(142 71% 60%); background: hsl(142 71% 45% / 0.15); }
.aitrend-card-insight {
	font-size: 12px; line-height: 1.55;
	color: var(--muted-foreground);
	padding: 10px 16px 14px; margin: 0;
}
.aitrend-card-examples { border-top: 1px solid var(--border); }
.aitrend-examples-toggle {
	width: 100%; padding: 8px 16px;
	display: flex; align-items: center; justify-content: space-between;
	background: transparent; border: 0; cursor: pointer;
	font-size: 12px; font-weight: 500;
	color: var(--muted-foreground);
	transition: background .15s ease;
}
.aitrend-examples-toggle:hover { background: var(--muted); color: var(--foreground); }
.aitrend-examples-list {
	display: flex; flex-direction: column; gap: 6px;
	padding: 0 16px 12px;
}
.aitrend-example-row {
	background: var(--muted); border-radius: 8px;
	padding: 8px 10px; cursor: pointer;
	transition: background .15s ease;
}
.aitrend-example-row:hover { background: var(--accent-soft); }
.aitrend-example-meta {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.aitrend-example-account {
	font-size: 12px; font-weight: 600; color: var(--foreground);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aitrend-example-tags {
	display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.aitrend-example-mult {
	font-size: 11px; font-weight: 600;
	color: hsl(160 84% 35%);
}
:root.dark .aitrend-example-mult { color: hsl(160 84% 55%); }
.aitrend-example-platform {
	font-size: 10px; font-weight: 600;
	letter-spacing: 0.06em; color: var(--muted-foreground);
	text-transform: uppercase;
}
.aitrend-example-eng {
	font-size: 12px; font-weight: 700;
	color: hsl(330 80% 45%);
	font-variant-numeric: tabular-nums;
}
:root.dark .aitrend-example-eng { color: hsl(330 80% 65%); }
.aitrend-example-caption {
	font-size: 12px; color: var(--muted-foreground);
	margin: 4px 0 0; line-height: 1.45;
}

/* Skeleton */
.aitrend-card-skeleton { padding: 14px 16px; }
.aitrend-skel { background: var(--muted); border-radius: 4px; animation: aitrend-pulse 1.4s ease-in-out infinite; }
.aitrend-skel-icon { width: 32px; height: 32px; border-radius: 999px; }
.aitrend-skel-stack { flex: 1; display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.aitrend-skel-line { height: 10px; }
.aitrend-skel-line.w-60 { width: 60%; }
.aitrend-skel-line.w-100 { width: 100%; }
.aitrend-skel-pill { width: 140px; height: 26px; border-radius: 8px; margin: 12px 0 8px; }
.aitrend-skel-block { height: 38px; border-radius: 4px; }
@keyframes aitrend-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }

/* Cross-post diff modal */
.aitrend-diff-backdrop {
	position: fixed; inset: 0; z-index: 100;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
	display: flex; align-items: center; justify-content: center;
	padding: 24px;
}
.aitrend-diff-modal {
	background: var(--card); border-radius: var(--radius);
	max-width: 1080px; width: 100%; max-height: 86vh;
	display: flex; flex-direction: column;
	box-shadow: var(--shadow-md);
}
.aitrend-diff-head {
	display: flex; align-items: flex-start; gap: 12px;
	padding: 18px 22px; border-bottom: 1px solid var(--border);
}
.aitrend-diff-title { display: flex; gap: 12px; flex: 1; align-items: center; }
.aitrend-diff-icon {
	width: 36px; height: 36px; border-radius: 999px;
	display: flex; align-items: center; justify-content: center;
	font-size: 18px; color: hsl(0 0% 18%); flex-shrink: 0;
}
.aitrend-diff-title h3 { margin: 0; font-size: 16px; }
.aitrend-diff-title p { margin: 2px 0 0; color: var(--muted-foreground); font-size: 12px; }
.aitrend-diff-close {
	background: transparent; border: 0; font-size: 22px; line-height: 1;
	color: var(--muted-foreground); cursor: pointer; padding: 4px 8px;
}
.aitrend-diff-close:hover { color: var(--foreground); }
.aitrend-diff-body {
	display: grid; gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	padding: 18px 22px; overflow-y: auto;
}
.aitrend-diff-post {
	background: var(--muted); border-radius: 8px; padding: 12px;
	display: flex; flex-direction: column; gap: 8px;
}
.aitrend-diff-post.is-focused { outline: 2px solid var(--accent); outline-offset: -2px; }
.aitrend-diff-post header {
	display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.aitrend-diff-post-account { font-weight: 700; font-size: 13px; }
.aitrend-diff-post-platform { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: var(--muted-foreground); }
.aitrend-diff-post-stats { display: flex; gap: 10px; font-size: 12px; }
.aitrend-diff-post-eng { font-weight: 700; color: hsl(330 80% 45%); }
:root.dark .aitrend-diff-post-eng { color: hsl(330 80% 65%); }
.aitrend-diff-post-mult { color: hsl(160 84% 35%); font-weight: 600; }
:root.dark .aitrend-diff-post-mult { color: hsl(160 84% 55%); }
.aitrend-diff-post-caption { font-size: 13px; line-height: 1.5; margin: 0; color: var(--foreground); }

.trends-view { display: flex; flex-direction: column; gap: 16px; }

.trends-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.trend-card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	box-shadow: var(--shadow-card);
}
.trend-card-header {
	display: flex;
	align-items: center;
	gap: 8px;
}
.trend-card-header h3 {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.trend-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.trend-list li {
	display: flex;
	align-items: center;
	gap: 10px;
}
.trend-rank {
	width: 18px;
	font-size: 11px;
	font-weight: 700;
	color: var(--muted-foreground);
	text-align: right;
	flex-shrink: 0;
}
.trend-body {
	flex: 1;
	min-width: 0;
}
.trend-name {
	font-size: 12px;
	font-weight: 600;
	color: var(--foreground);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.trend-sub {
	font-size: 10px;
	color: var(--muted-foreground);
}
.trend-metric {
	font-size: 12px;
	font-weight: 700;
	color: var(--primary);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	flex-shrink: 0;
}

@media (max-width: 960px) {
	.trends-grid { grid-template-columns: 1fr; }
}

/* ─── Loading / empty / toast ───────────────────────────────────────────── */

.loading {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 60px 0;
}
.spinner {
	width: 28px;
	height: 28px;
	border: 3px solid var(--border);
	border-top-color: var(--primary);
	border-radius: 50%;
	animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.toast-container {
	position: fixed;
	bottom: 24px;
	right: 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	z-index: 1000;
}
.toast {
	background: var(--card);
	color: var(--foreground);
	padding: 12px 18px;
	border-radius: var(--radius);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-lg);
	font-size: 14px;
	max-width: 360px;
	animation: toast-in 200ms ease;
}
.toast.error { border-color: var(--destructive); color: var(--destructive); }
.toast.info { border-color: var(--primary); color: var(--primary); }
@keyframes toast-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ─── Posts: Load more bar ───────────────────────────────────────────────── */

.posts-load-more {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 20px 0 8px;
}
.posts-load-more[hidden] { display: none; }
.posts-load-more-count {
	font-size: 11px;
	color: var(--muted-foreground);
}

/* ─── Posts view: KPI summary bar + card grid ──────────────────────────── */

.posts-kpis {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}
.posts-kpis[hidden] { display: none; }
.posts-kpi {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border: 1px solid hsl(from var(--border) h s l / 0.5);
	border-radius: var(--radius);
}
.posts-kpi-icon { display: inline-flex; }
.posts-kpi-icon svg { width: 14px; height: 14px; }
/* Per-colour backgrounds + text matching reference MetricsBar.tsx.
   Light: bg-blue-50 / text-blue-600 etc. Dark: bg-blue-950/40 / text-blue-400. */
.posts-kpi-views  { background: hsl(217 91% 96%); }
.posts-kpi-eng    { background: hsl(330 80% 96%); }
.posts-kpi-rate   { background: hsl(270 65% 96%); }
.posts-kpi-count  { background: hsl(172 65% 96%); }
.posts-kpi-views .posts-kpi-icon, .posts-kpi-views .posts-kpi-label { color: hsl(217 91% 40%); }
.posts-kpi-eng .posts-kpi-icon, .posts-kpi-eng .posts-kpi-label     { color: hsl(330 80% 40%); }
.posts-kpi-rate .posts-kpi-icon, .posts-kpi-rate .posts-kpi-label   { color: hsl(270 65% 40%); }
.posts-kpi-count .posts-kpi-icon, .posts-kpi-count .posts-kpi-label { color: hsl(172 65% 35%); }
:root.dark .posts-kpi-views  { background: hsl(217 91% 15% / 0.40); }
:root.dark .posts-kpi-eng    { background: hsl(330 80% 15% / 0.40); }
:root.dark .posts-kpi-rate   { background: hsl(270 65% 15% / 0.40); }
:root.dark .posts-kpi-count  { background: hsl(172 65% 15% / 0.40); }
:root.dark .posts-kpi-views .posts-kpi-icon, :root.dark .posts-kpi-views .posts-kpi-label { color: hsl(217 91% 65%); }
:root.dark .posts-kpi-eng .posts-kpi-icon, :root.dark .posts-kpi-eng .posts-kpi-label     { color: hsl(330 80% 65%); }
:root.dark .posts-kpi-rate .posts-kpi-icon, :root.dark .posts-kpi-rate .posts-kpi-label   { color: hsl(270 65% 65%); }
:root.dark .posts-kpi-count .posts-kpi-icon, :root.dark .posts-kpi-count .posts-kpi-label { color: hsl(172 65% 55%); }
.posts-kpi-label {
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.posts-kpi-value {
	font-size: 14px;
	font-weight: 700;
	color: var(--foreground);
	font-variant-numeric: tabular-nums;
}

.posts-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 16px;
}
.posts-cards[hidden] { display: none; }
.post-grid-card {
	background: var(--card);
	border: 1px solid hsl(from var(--border) h s l / 0.2);
	border-radius: 11px;
	overflow: hidden;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	box-shadow: var(--shadow-post);
	transition: transform var(--transition), box-shadow var(--transition);
}
.post-grid-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-post-hover);
}
.post-grid-thumb {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--muted);
}
.post-grid-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 48px;
	font-weight: 700;
	text-shadow: 0 2px 8px rgb(0 0 0 / 0.5);
}
.post-grid-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}
.post-grid-overlay-top {
	position: absolute;
	top: 8px;
	left: 8px;
	right: 8px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	pointer-events: none;
}
.post-grid-platform {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	color: #fff;
	box-shadow: 0 2px 4px rgb(0 0 0 / 0.4);
}
.post-grid-platform svg { width: 12px; height: 12px; }
.post-grid-overlay-bottom {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20px 10px 8px;
	z-index: 3;
	display: flex;
	gap: 10px;
	background: linear-gradient(to top, rgb(0 0 0 / 0.75), transparent);
	color: #fff;
	font-size: 10px;
}
.post-grid-stat {
	display: inline-flex;
	flex-direction: column;
	line-height: 1.1;
}
.post-grid-stat strong {
	font-size: 13px;
	font-weight: 700;
	color: #fff;
}
.post-grid-body {
	padding: 10px 12px 12px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.post-grid-account {
	font-size: 13px;
	font-weight: 700;
	color: var(--foreground);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.post-grid-meta {
	font-size: 10px;
	color: var(--muted-foreground);
}
.post-grid-caption {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--muted-foreground);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ─── Accounts page: Averages / Totals toggle ────────────────────────────── */

.accounts-breadcrumb-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}
.accounts-totals-toggle {
	display: inline-flex;
	background: var(--muted);
	border-radius: var(--radius);
	padding: 3px;
	flex-shrink: 0;
}
.accounts-totals-toggle button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: 0;
	padding: 6px 14px;
	font-size: 12px;
	font-weight: 600;
	color: var(--muted-foreground);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background var(--transition), color var(--transition);
}
.accounts-totals-toggle button svg {
	width: 14px;
	height: 14px;
}
.accounts-totals-toggle button:hover { color: var(--foreground); }
.accounts-totals-toggle button.active {
	background: var(--primary);
	color: var(--primary-foreground);
	box-shadow: var(--shadow-card);
}

/* ─── Accounts page: KPI cards + search ──────────────────────────────────── */

.account-kpis {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-bottom: 14px;
}
.account-kpis[hidden] { display: none; }
.account-kpi {
	background: var(--card);
	border-radius: var(--radius);
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	position: relative;
	overflow: hidden;
}
/* Gradient tint overlay */
.account-kpi::before {
	content: '';
	position: absolute;
	inset: 0;
	opacity: 0.06;
	pointer-events: none;
}
/* Per-card colour: border + gradient + label + value */
/* Subtle coloured borders + tint matching reference dark mode */
.account-kpi-views  { border: 1px solid hsl(217 50% 20%); }
.account-kpi-eng    { border: 1px solid hsl(330 40% 20%); }
.account-kpi-rate   { border: 1px solid hsl(270 40% 20%); }
.account-kpi-posts  { border: 1px solid hsl(172 40% 18%); }
.account-kpi-views::before { background: linear-gradient(135deg, hsl(217 91% 15% / 0.5), transparent 70%); }
.account-kpi-eng::before   { background: linear-gradient(135deg, hsl(330 80% 15% / 0.5), transparent 70%); }
.account-kpi-rate::before  { background: linear-gradient(135deg, hsl(270 65% 15% / 0.5), transparent 70%); }
.account-kpi-posts::before { background: linear-gradient(135deg, hsl(172 65% 12% / 0.5), transparent 70%); }

.account-kpi-header {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 4px;
}
.account-kpi-header svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
.account-kpi-views .account-kpi-header  { color: hsl(217 91% 65%); }
.account-kpi-eng .account-kpi-header    { color: hsl(330 80% 65%); }
.account-kpi-rate .account-kpi-header   { color: hsl(270 65% 65%); }
.account-kpi-posts .account-kpi-header  { color: hsl(172 65% 55%); }
.account-kpi-label {
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.account-kpi-body {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.account-kpi-value {
	font-size: 24px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.account-kpi-views .account-kpi-value { color: hsl(217 91% 72%); }
.account-kpi-eng .account-kpi-value   { color: hsl(330 80% 72%); }
.account-kpi-rate .account-kpi-value  { color: hsl(270 65% 72%); }
.account-kpi-posts .account-kpi-value { color: hsl(172 65% 62%); }
.account-kpi-delta {
	font-size: 10px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.accounts-search {
	position: relative;
	display: flex;
	align-items: center;
}
.accounts-search svg {
	position: absolute;
	left: 10px;
	width: 14px;
	height: 14px;
	color: var(--muted-foreground);
	pointer-events: none;
}
.accounts-search input {
	padding: 7px 10px 7px 30px;
	width: 200px;
	font-size: 13px;
	background: var(--background);
	color: var(--foreground);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
}
.accounts-search-full {
	margin-bottom: 12px;
}
.accounts-search-full input {
	width: 100%;
}
.accounts-search input:focus {
	outline: 2px solid var(--accent);
	outline-offset: -1px;
}

/* ─── Accounts table: medals, avatars, stacked cells, deltas ────────────── */

.accounts-table td.col-rank {
	text-align: center;
	vertical-align: middle;
	color: var(--muted-foreground);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.table-medal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	line-height: 1;
}
.account-name-cell {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}
.account-name-avatar {
	width: 34px;
	height: 34px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	font-size: 11px;
	flex-shrink: 0;
	box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
	position: relative;
	overflow: hidden;
}
.account-name-avatar-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.account-card-avatar-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}
/* Inline 18px avatar shown next to account name in post cards / table rows */
.post-grid-avatar,
.post-cell-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 999px;
	color: #fff;
	font-weight: 700;
	font-size: 9px;
	flex-shrink: 0;
	margin-right: 6px;
	vertical-align: middle;
	position: relative;
	overflow: hidden;
}
.post-grid-avatar-img,
.post-cell-avatar-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}
.post-grid-account {
	display: inline-flex;
	align-items: center;
	gap: 0;
}
.account-name-text { min-width: 0; }
.account-name-primary {
	font-weight: 600;
	color: var(--foreground);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 220px;
}
.account-name-secondary {
	font-size: 11px;
	color: var(--muted-foreground);
	margin-top: 1px;
}
.cell-stacked {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	line-height: 1.2;
}
.cell-value {
	font-variant-numeric: tabular-nums;
	color: var(--foreground);
}
.cell-delta {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: 10px;
	font-weight: 600;
	margin-top: 2px;
	font-variant-numeric: tabular-nums;
}
.cell-delta svg {
	width: 10px;
	height: 10px;
	flex-shrink: 0;
}
.cell-delta.delta-up {
	color: hsl(158 64% 52%);
}
.cell-delta.delta-down {
	color: hsl(351 95% 71%);
}
.cell-delta.delta-flat {
	color: var(--muted-foreground);
}
.cell-delta.delta-new {
	color: hsl(262 83% 66%);
}
.posts-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 22px;
	padding: 0 10px;
	background: var(--muted);
	border: 1px solid var(--border);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	color: var(--foreground);
	font-variant-numeric: tabular-nums;
}

/* ─── Accounts card view ─────────────────────────────────────────────────── */

.section-header-right {
	display: flex;
	align-items: center;
	gap: 10px;
}
.layout-toggle {
	display: inline-flex;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--card);
}
.layout-toggle-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 0;
	background: transparent;
	color: var(--muted-foreground);
	cursor: pointer;
}
.layout-toggle-btn:hover { background: var(--muted); color: var(--foreground); }
.layout-toggle-btn.active {
	background: var(--accent);
	color: var(--primary-foreground, #fff);
}
.layout-toggle-btn svg { width: 14px; height: 14px; }

.accounts-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
}
.accounts-cards[hidden] { display: none; }
.account-card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 16px;
	cursor: pointer;
	transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.account-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
	border-color: var(--accent);
}
.account-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.account-card-rank {
	font-size: 11px;
	font-weight: 700;
	color: var(--muted-foreground);
	font-variant-numeric: tabular-nums;
}
.account-card-avatar-wrap {
	position: relative;
	display: inline-flex;
}
.account-card-avatar {
	width: 36px;
	height: 36px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	position: relative;
	overflow: hidden;
}
.account-card-platform {
	position: absolute;
	bottom: -2px;
	right: -2px;
	width: 16px;
	height: 16px;
	border: 2px solid var(--card);
}
.account-card-platform svg { width: 9px; height: 9px; }
.account-card-name {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--foreground);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.account-card-posts {
	font-size: 11px;
	color: var(--muted-foreground);
}
.account-card-metrics {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	margin-top: auto;
	padding-top: 10px;
	border-top: 1px solid var(--border);
}
.account-card-metric {
	display: flex;
	flex-direction: column;
}
.account-card-metric-value {
	font-size: 14px;
	font-weight: 700;
	color: var(--foreground);
	font-variant-numeric: tabular-nums;
}
.account-card-metric-label {
	font-size: 9px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted-foreground);
	margin-top: 1px;
}
.account-card-footer {
	font-size: 11px;
}
.account-card-footer .cell-delta {
	font-size: 11px;
	margin-top: 0;
}
.account-card-footer .cell-delta svg {
	width: 12px;
	height: 12px;
}
.accounts-table-wrap[hidden] { display: none; }

/* ─── Account hover-card (matches reference HoverCard) ──────────────────── */

.account-hovercard {
	position: fixed;
	z-index: 1000;
	width: 320px;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: 0 12px 32px hsl(0 0% 0% / 0.18);
	padding: 14px;
	font-size: 12px;
	color: var(--foreground);
	pointer-events: auto;
}
.account-hovercard[hidden] { display: none; }
.account-hovercard-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}
.account-hovercard-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	flex-shrink: 0;
	overflow: hidden;
	position: relative;
}
.account-hovercard-titles {
	min-width: 0;
	flex: 1;
}
.account-hovercard-name {
	font-weight: 600;
	font-size: 14px;
	color: var(--foreground);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.account-hovercard-meta {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-top: 4px;
}
.account-hovercard-pill {
	font-size: 10px;
	padding: 2px 6px;
	border-radius: 999px;
	border: 1px solid var(--border);
	color: var(--muted-foreground);
}
.account-hovercard-rate {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 11px;
}
.account-hovercard-rate svg {
	width: 11px;
	height: 11px;
}
.account-hovercard-rate.rate-up { color: hsl(142 76% 36%); }
.account-hovercard-rate.rate-down { color: var(--muted-foreground); }
.account-hovercard-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	margin-bottom: 12px;
}
.account-hovercard-stat {
	background: hsl(from var(--muted) h s l / 0.6);
	border-radius: 6px;
	padding: 8px;
}
.account-hovercard-stat-label {
	font-size: 10px;
	color: var(--muted-foreground);
	margin-bottom: 2px;
}
.account-hovercard-stat-value {
	font-size: 13px;
	font-weight: 700;
	color: var(--foreground);
}
.account-hovercard-recent {
	border-top: 1px solid var(--border);
	padding-top: 10px;
	margin-bottom: 8px;
}
.account-hovercard-recent-label {
	font-size: 10px;
	font-weight: 600;
	color: var(--muted-foreground);
	margin-bottom: 6px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}
.account-hovercard-recent-list {
	display: flex;
	flex-direction: column;
}
.account-hovercard-recent-row {
	padding: 6px 0;
	border-bottom: 1px solid var(--border);
}
.account-hovercard-recent-row:last-child { border-bottom: none; }
.account-hovercard-recent-caption {
	font-size: 12px;
	color: var(--foreground);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.account-hovercard-recent-meta {
	font-size: 10px;
	color: var(--muted-foreground);
	margin-top: 1px;
}
.account-hovercard-recent-loading,
.account-hovercard-recent-empty {
	font-size: 11px;
	color: var(--muted-foreground);
	padding: 4px 0;
}
.account-hovercard-hint {
	border-top: 1px solid var(--border);
	padding-top: 8px;
	font-size: 10px;
	color: var(--muted-foreground);
	display: flex;
	align-items: center;
	gap: 4px;
}
.account-hovercard-hint kbd {
	padding: 2px 5px;
	border-radius: 4px;
	background: var(--muted);
	font-family: ui-monospace, monospace;
	font-size: 10px;
}

/* ─── Compare view ───────────────────────────────────────────────────────── */

.compare-view {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.compare-clear {
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 500;
	background: transparent;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	color: var(--muted-foreground);
	cursor: pointer;
}
.compare-clear:hover {
	background: var(--muted);
	color: var(--foreground);
}
/* The 2-pane drill keeps its own viewport-sized height so the
   accounts/posts tables stay scrollable on their own. The compare-multi
   panel above sits in normal flow and pushes the drill *down* the page
   as it grows instead of stealing height from it - the page scrolls
   vertically once the multi panel is tall enough to need it. */
.compare-split {
	display: grid;
	grid-template-columns: 50% 6px 1fr;
	height: calc(100vh - var(--commandbar-h) - var(--ticker-h) - 140px);
	min-height: 500px;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
}
.compare-pane {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	background: var(--card);
}
.compare-pane-left { border-right: 1px solid var(--border); }
.compare-pane-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--border);
	background: var(--muted);
}
.compare-pane-header h3 {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--foreground);
}
.compare-pane-sub {
	margin: 2px 0 0;
	font-size: 11px;
	color: var(--muted-foreground);
}
.compare-pane-icon {
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: 700;
}
.compare-icon-accounts { background: var(--accent-soft); color: var(--accent); }
.compare-icon-posts { background: hsl(330 80% 60% / 0.1); color: hsl(330 80% 60%); }
.compare-pane-body {
	flex: 1;
	overflow-y: auto;
	overflow-x: auto;
	min-height: 0;
}
.compare-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}
.compare-table thead {
	background: var(--card);
	position: sticky;
	top: 0;
	z-index: 1;
}
.compare-table th {
	padding: 10px 12px;
	text-align: left;
	font-size: 12px;
	font-weight: 600;
	color: var(--muted-foreground);
	letter-spacing: 0.02em;
	border-bottom: 1px solid var(--border);
	white-space: nowrap;
}
.compare-table th.col-rank,
.compare-table th.col-num { text-align: right; }
.compare-table th.col-rank { text-align: center; width: 36px; }
.compare-table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--border);
	vertical-align: top;
}
.compare-table td.col-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.compare-table td.col-rank {
	text-align: center;
	color: var(--muted-foreground);
	font-variant-numeric: tabular-nums;
}
.compare-table tbody tr {
	cursor: pointer;
	transition: background var(--transition);
}
.compare-table tbody tr:hover { background: hsl(from var(--muted) h s l / 0.5); }
.compare-table tbody tr.active {
	background: var(--accent-soft);
	box-shadow: inset 3px 0 0 var(--accent);
}
/* ─── Multi-account side-by-side panel (compare page) ───────────── */

.compare-multi {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 16px 18px;
	margin-bottom: 18px;
}
.compare-multi-header {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}
.compare-multi-header > div:first-child {
	margin-right: auto;
}
.compare-multi-header .compare-multi-picker {
	margin-left: auto;
}
.compare-multi-header h3 {
	font-size: 14px;
	margin: 0;
}
.compare-multi-sub {
	font-size: 12px;
	color: var(--muted-foreground);
	margin: 2px 0 0;
}
.compare-multi-picker {
	display: flex;
	gap: 6px;
	align-items: center;
	flex-wrap: wrap;
}
.compare-multi-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 6px 3px 10px;
	border: 2px solid;
	border-radius: 999px;
	font-size: 12px;
	background: var(--background);
}
.compare-multi-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}
.compare-multi-remove {
	background: transparent;
	border: 0;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	color: var(--muted-foreground);
	padding: 0 2px;
}
.compare-multi-remove:hover { color: var(--destructive); }
.compare-multi-add {
	font-size: 12px;
	padding: 4px 8px;
	border: 1px dashed var(--border);
	border-radius: var(--radius-sm);
	background: var(--background);
	cursor: pointer;
}
/* Pill-style segmented toggle. The inactive track is a soft muted
   pill; the active button gets a raised light "thumb" that visually
   slides between the two positions. Matches the iOS-style segmented
   control look so users read it as a switch, not as plain text
   buttons. */
.compare-unit-toggle {
	display: inline-flex;
	background: var(--muted);
	border-radius: 999px;
	padding: 3px;
	gap: 0;
	font-size: 12px;
}
.compare-unit-toggle button {
	position: relative;
	background: transparent;
	border: none;
	padding: 5px 14px;
	border-radius: 999px;
	color: var(--muted-foreground);
	cursor: pointer;
	font-weight: 500;
	font-size: 12px;
	transition: color 0.18s ease, background 0.22s ease, box-shadow 0.22s ease;
}
.compare-unit-toggle button:hover { color: var(--foreground); }
.compare-unit-toggle button.active {
	background: var(--card);
	color: var(--foreground);
	box-shadow: 0 1px 3px hsl(0 0% 0% / 0.12), 0 0 0 0.5px hsl(0 0% 0% / 0.04);
	font-weight: 600;
}
.compare-multi-typeahead {
	position: relative;
	display: inline-block;
}
.compare-multi-search {
	font-size: 12px;
	padding: 4px 8px;
	border: 1px dashed var(--border);
	border-radius: var(--radius-sm);
	background: var(--background);
	color: var(--foreground);
	min-width: 180px;
}
.compare-multi-search:focus {
	outline: none;
	border-color: var(--accent);
	border-style: solid;
}
.compare-multi-results {
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 4px;
	min-width: 220px;
	max-height: 280px;
	overflow-y: auto;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	box-shadow: 0 8px 20px hsl(0 0% 0% / 0.12);
	z-index: 1000;
}
.compare-multi-result {
	padding: 6px 10px;
	font-size: 12px;
	color: var(--foreground);
	cursor: pointer;
}
.compare-multi-result:hover,
.compare-multi-result-active {
	background: hsl(from var(--muted) h s l / 0.5);
}
.compare-multi-result-empty {
	color: var(--muted-foreground);
	cursor: default;
	font-style: italic;
}
.compare-multi-result-empty:hover { background: transparent; }
.compare-multi-empty {
	font-size: 13px;
	color: var(--muted-foreground);
	text-align: center;
	padding: 20px 0;
}
.compare-multi-bars {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 14px;
}
.compare-multi-bar-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.compare-multi-bar-label {
	font-size: 11px;
	color: var(--muted-foreground);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 2px;
}
.compare-multi-bar-row {
	display: flex;
	align-items: center;
	gap: 8px;
}
.compare-multi-bar-track {
	flex: 1;
	height: 8px;
	background: var(--muted);
	border-radius: 4px;
	overflow: hidden;
}
.compare-multi-bar-fill {
	height: 100%;
	border-radius: 4px;
	transition: width 0.18s ease;
}
.compare-multi-bar-value {
	font-size: 12px;
	font-weight: 600;
	min-width: 70px;
	text-align: right;
}
.compare-multi-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 10px;
}
.compare-multi-card {
	border: 2px solid;
	border-radius: var(--radius);
	padding: 10px 12px;
}
.compare-multi-card-name {
	font-weight: 600;
	font-size: 13px;
	margin-bottom: 6px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.compare-multi-card-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	font-size: 11px;
}
.compare-multi-card-label {
	color: var(--muted-foreground);
}
.compare-multi-card-val {
	font-weight: 600;
}

.compare-post-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
.compare-post-thumb {
	width: 56px;
	height: 56px;
	border-radius: var(--radius-sm);
	object-fit: cover;
	flex-shrink: 0;
	background: var(--muted);
}
.compare-post-thumb-empty {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: rgb(255 255 255 / 0.85);
	font-weight: 700;
	font-size: 18px;
}
.compare-post-body {
	flex: 1;
	min-width: 0;
}
.compare-post-name {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 2px;
}
.compare-account-cell {
	display: flex;
	align-items: center;
	gap: 8px;
}
.compare-post-account {
	font-weight: 600;
	color: var(--foreground);
}
.compare-post-platform {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--muted-foreground);
	padding: 1px 6px;
	border: 1px solid var(--border);
	border-radius: 10px;
}
.compare-post-caption {
	margin: 0;
	font-size: 12px;
	color: var(--muted-foreground);
	line-height: 1.4;
	max-width: 320px;
}
.compare-post-date {
	color: var(--muted-foreground);
	font-size: 12px;
}
.compare-chip {
	display: inline-block;
	padding: 1px 6px;
	font-size: 10px;
	font-weight: 600;
	border-radius: 10px;
	background: var(--accent-soft);
	color: var(--accent);
	margin-left: 4px;
}
.compare-divider {
	background: var(--border);
	cursor: col-resize;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--transition);
}
.compare-divider:hover,
.compare-divider:active { background: var(--accent); }
.compare-divider-grip {
	width: 2px;
	height: 32px;
	background: var(--muted-foreground);
	opacity: 0.4;
	border-radius: 1px;
}

/* ─── Placeholder view (brands, logos) ──────────────────────────────────── */

.placeholder-view {
	max-width: 720px;
	margin: 40px auto;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 40px 44px;
	box-shadow: var(--shadow-card);
}
.placeholder-icon {
	width: 56px;
	height: 56px;
	border-radius: var(--radius);
	background: var(--accent-soft);
	color: var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}
.placeholder-icon svg { width: 28px; height: 28px; }
.placeholder-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--foreground);
	margin: 0 0 12px;
}
.placeholder-sub {
	font-size: 13px;
	line-height: 1.65;
	color: var(--muted-foreground);
	margin: 0 0 14px;
}
.placeholder-sub strong { color: var(--foreground); }
.placeholder-sub code {
	background: var(--muted);
	color: var(--foreground);
	padding: 1px 6px;
	border-radius: var(--radius-sm);
	font-size: 12px;
	font-family: ui-monospace, monospace;
}
.placeholder-steps {
	margin: 10px 0 16px 20px;
	padding: 0;
	color: var(--muted-foreground);
	font-size: 13px;
	line-height: 1.6;
}
.placeholder-steps li { margin-bottom: 10px; }
.placeholder-steps strong { color: var(--foreground); }
.placeholder-steps code {
	background: var(--muted);
	color: var(--foreground);
	padding: 1px 6px;
	border-radius: var(--radius-sm);
	font-size: 11px;
	font-family: ui-monospace, monospace;
}
.placeholder-status {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin: 20px 0;
}
.placeholder-stat {
	background: var(--muted);
	border-radius: var(--radius-sm);
	padding: 12px 14px;
}
.placeholder-stat-label {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted-foreground);
	margin-bottom: 4px;
}
.placeholder-stat-value {
	font-size: 18px;
	font-weight: 700;
	color: var(--foreground);
	font-variant-numeric: tabular-nums;
}
.placeholder-stat-pending { color: hsl(42 90% 55%); font-size: 13px; }

/* ─── Admin view ─────────────────────────────────────────────────────────── */

.admin-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
.admin-card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 18px 20px;
	box-shadow: var(--shadow-card);
}
.admin-card-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--border);
}
.admin-card-icon {
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-sm);
	background: var(--accent-soft);
	color: var(--accent);
	font-size: 14px;
	font-weight: 700;
}
.admin-card-header h3 {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--foreground);
}
.admin-kv {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 14px;
	font-size: 13px;
}
.admin-kv dt {
	color: var(--muted-foreground);
	font-weight: 600;
}
.admin-kv dd {
	margin: 0;
	color: var(--foreground);
	font-variant-numeric: tabular-nums;
	word-break: break-word;
}
.admin-todo {
	margin: 0;
	padding-left: 16px;
	font-size: 12px;
	line-height: 1.6;
	color: var(--muted-foreground);
}
.admin-todo li { margin-bottom: 6px; }
.admin-todo strong { color: var(--foreground); }
.admin-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.btn-secondary {
	padding: 8px 14px;
	background: transparent;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	color: var(--foreground);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--transition);
}
.btn-secondary:hover { background: var(--muted); }

/* ─── Empty states ───────────────────────────────────────────────────────── */

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 48px 24px;
	text-align: center;
	color: var(--muted-foreground);
}
.empty-state::before {
	content: '';
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--muted);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 28px;
	margin-bottom: 12px;
	opacity: 0.7;
}
.empty-state-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--foreground);
	margin-bottom: 4px;
}
.empty-state-sub {
	font-size: 12px;
	color: var(--muted-foreground);
	max-width: 320px;
}

/* ─── Loading skeletons ──────────────────────────────────────────────────── */

.skeleton {
	background: linear-gradient(90deg,
		hsl(from var(--muted) h s l / 0.35) 0%,
		hsl(from var(--muted) h s l / 0.65) 50%,
		hsl(from var(--muted) h s l / 0.35) 100%);
	background-size: 200% 100%;
	animation: skeleton-shimmer 1.4s ease-in-out infinite;
	border-radius: var(--radius-sm);
}
.skeleton-row {
	height: 14px;
	margin: 8px 0;
}
.skeleton-row.tall { height: 24px; }
.skeleton-row.short { height: 10px; width: 60%; }
@keyframes skeleton-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}
.skeleton-grid {
	display: grid;
	gap: 14px;
}
.skeleton-card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 16px;
}
.skeleton-kpi-grid { grid-template-columns: repeat(4, 1fr); }
.skeleton-row-grid { grid-template-columns: 1fr; gap: 8px; }
.skeleton-post-tile {
	aspect-ratio: 4 / 5;
	width: 100%;
	border-radius: var(--radius-sm);
}

/* ─── Active filter chips ─────────────────────────────────────────────────── */

.active-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-bottom: 14px;
	padding: 10px 12px;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
}
.active-filters[hidden] { display: none; }
.active-filters-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted-foreground);
	margin-right: 4px;
}
.active-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px 4px 10px;
	background: var(--accent-soft);
	color: var(--accent);
	border: 1px solid hsl(from var(--accent) h s l / 0.35);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--transition);
}
.active-filter-chip:hover {
	background: hsl(from var(--accent) h s l / 0.18);
}
.active-filter-chip-x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	border-radius: 999px;
	background: hsl(from var(--accent) h s l / 0.25);
	color: var(--accent);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}
.active-filter-clear {
	margin-left: auto;
	background: transparent;
	border: 0;
	color: var(--muted-foreground);
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	padding: 4px 8px;
}
.active-filter-clear:hover { color: var(--foreground); text-decoration: underline; }

/* ─── Sortable table headers ──────────────────────────────────────────────── */

.accounts-table th.col-sort,
.posts-table th.col-sort {
	cursor: pointer;
	user-select: none;
	position: relative;
	transition: background var(--transition);
}
.accounts-table th.col-sort:hover,
.posts-table th.col-sort:hover {
	background: hsl(from var(--muted) h s l / 0.6);
}
.accounts-table th.col-sort .sort-arrow,
.posts-table th.col-sort .sort-arrow {
	display: inline-block;
	width: 10px;
	margin-left: 4px;
	opacity: 0.3;
	font-size: 10px;
}
.accounts-table th.col-sort .sort-arrow::after,
.posts-table th.col-sort .sort-arrow::after {
	content: '↕';
}
.accounts-table th.col-sort.sorted,
.posts-table th.col-sort.sorted {
	color: var(--accent);
}
.accounts-table th.col-sort.sorted .sort-arrow,
.posts-table th.col-sort.sorted .sort-arrow {
	opacity: 1;
	color: var(--accent);
}
/* Direction arrow on the active column (set via .asc / .desc) */
.accounts-table th.col-sort.sorted.desc .sort-arrow::after,
.posts-table th.col-sort.sorted.desc .sort-arrow::after { content: '↓'; }
.accounts-table th.col-sort.sorted.asc .sort-arrow::after,
.posts-table th.col-sort.sorted.asc .sort-arrow::after { content: '↑'; }
.accounts-table th.col-sort.sorted .sort-arrow::after,
.posts-table th.col-sort.sorted .sort-arrow::after {
	content: '↓';
}

/* ─── Caption formatting ─────────────────────────────────────────────────── */

.caption-hashtag {
	color: var(--accent);
	font-weight: 600;
}
.caption-mention {
	color: hsl(210 85% 55%);
	font-weight: 600;
}

/* ─── Relative date in posts table ───────────────────────────────────────── */

.col-date-abs {
	font-size: 12px;
	color: var(--foreground);
	font-variant-numeric: tabular-nums;
}
.col-date-rel {
	font-size: 10px;
	color: var(--muted-foreground);
	margin-top: 1px;
}

/* ─── Top 10% badge ──────────────────────────────────────────────────────── */

.top10-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 6px;
	background: #FFD34E;
	color: #000;
	font-size: 11px;
	font-weight: 600;
	border-radius: 6px;
	line-height: 1;
	letter-spacing: 0;
}
.post-grid-overlay-top .top10-badge {
	box-shadow: 0 2px 4px rgb(0 0 0 / 0.3);
}

/* Per-card breakout multiplier — "2.0×" / "4.1×" surface signal when a
   post over-performs its account's average. Yellow-on-dark so it reads
   over varied thumbnails; same overlay slot as Top 10%. */
.post-grid-breakout {
	display: inline-flex; align-items: center;
	padding: 4px 6px;
	background: #1f2937; color: #fde68a;
	font-size: 11px; font-weight: 700;
	border-radius: 6px; line-height: 1;
	box-shadow: 0 2px 4px rgb(0 0 0 / 0.3);
}

/* ─── Mondo Score badge ──────────────────────────────────────────────────── */

.mondo-score {
	display: inline-flex;
	align-items: center;
	font-size: 10px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 999px;
	letter-spacing: 0.02em;
}
.mondo-score-viral {
	background: hsl(330 85% 60% / 0.15);
	color: hsl(330 85% 50%);
	border: 1px solid hsl(330 85% 60% / 0.35);
}
.mondo-score-hot {
	background: hsl(15 90% 60% / 0.15);
	color: hsl(15 90% 50%);
	border: 1px solid hsl(15 90% 60% / 0.35);
}
.mondo-score-rising {
	background: hsl(42 90% 55% / 0.15);
	color: hsl(42 90% 45%);
	border: 1px solid hsl(42 90% 55% / 0.35);
}
.mondo-score-good {
	background: hsl(142 60% 45% / 0.12);
	color: hsl(142 60% 40%);
	border: 1px solid hsl(142 60% 45% / 0.3);
}
.mondo-score-below {
	background: hsl(0 0% 50% / 0.1);
	color: hsl(0 0% 40%);
	border: 1px solid hsl(0 0% 50% / 0.25);
}

/* ─── Post detail modal ──────────────────────────────────────────────────── */

.post-detail-backdrop {
	position: fixed;
	inset: 0;
	background: hsl(0 0% 0% / 0.5);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	z-index: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
	animation: post-detail-fade 150ms ease-out;
}
.post-detail-modal {
	background: var(--card);
	color: var(--foreground);
	border-radius: var(--radius);
	border: 1px solid var(--border);
	box-shadow: 0 24px 70px hsl(0 0% 0% / 0.45);
	width: 100%;
	max-width: 760px;
	max-height: calc(100vh - 64px);
	display: flex;
	flex-direction: row;
	overflow: hidden;
	position: relative;
	animation: post-detail-pop 160ms ease-out;
}
/* Two-panel layout: left=media, right=performance */
.post-detail-left {
	flex: 0 0 40%;
	display: flex;
	flex-direction: column;
	border-right: 1px solid var(--border);
}
.post-detail-right {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 24px;
	overflow-y: auto;
	position: relative;
}
.post-detail-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	border: 0;
	background: transparent;
	color: var(--muted-foreground);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
}
.post-detail-close:hover { color: var(--foreground); }
.post-detail-media {
	position: relative;
	background: var(--muted);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex: 1;
	min-height: 300px;
}
.post-detail-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: relative;
	z-index: 1;
}
.post-detail-media img.broken { display: none; }
.post-detail-media-fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 64px;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 2px 8px rgb(0 0 0 / 0.4);
	z-index: 0;
}
.post-detail-meta {
	padding: 12px 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.post-detail-platform-row {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--muted-foreground);
}
.post-detail-platform-icon { display: inline-flex; }
.post-detail-platform-icon svg { width: 14px; height: 14px; }
.post-detail-platform-name { font-weight: 500; color: var(--foreground); }
.post-detail-date { margin-left: auto; font-size: 12px; color: var(--muted-foreground); }
.post-detail-account-name {
	font-size: 15px;
	font-weight: 700;
	color: var(--foreground);
}
.post-detail-caption {
	font-size: 13px;
	line-height: 1.55;
	color: var(--muted-foreground);
	white-space: pre-wrap;
	word-wrap: break-word;
}
.post-detail-left-footer {
	padding: 12px 16px;
	border-top: 1px solid var(--border);
}
.post-detail-view-original {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 10px;
	background: transparent;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	color: var(--foreground);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}
.post-detail-view-original svg { width: 16px; height: 16px; }
.post-detail-view-original:hover { background: var(--muted); }

/* Right panel */
.post-detail-title { font-size: 18px; font-weight: 700; margin-bottom: 2px; }
.post-detail-subtitle { font-size: 12px; color: var(--muted-foreground); margin-bottom: 16px; }
.post-detail-benchmark {
	background: var(--background);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 14px;
	margin-bottom: 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.post-detail-benchmark-header {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
}
.post-detail-benchmark-header svg { width: 16px; height: 16px; }
.post-detail-peer-count {
	margin-left: auto;
	font-size: 11px;
	padding: 2px 8px;
	background: var(--muted);
	border-radius: 999px;
	color: var(--muted-foreground);
	font-weight: 500;
}
.post-detail-rate-text { font-size: 12px; color: var(--muted-foreground); }
.post-detail-distrib { margin-top: 4px; }
.post-detail-distrib-label { font-size: 11px; color: var(--muted-foreground); margin-bottom: 4px; }
.post-detail-distrib-bar {
	height: 8px;
	background: var(--muted);
	border-radius: 4px;
	position: relative;
	overflow: hidden;
}
.post-detail-distrib-fill {
	height: 100%;
	background: var(--primary);
	border-radius: 4px;
}
.post-detail-distrib-marker {
	position: absolute;
	top: -2px;
	width: 2px;
	height: 12px;
	background: var(--foreground);
	border-radius: 1px;
}
.post-detail-distrib-labels {
	display: flex;
	justify-content: space-between;
	font-size: 10px;
	color: var(--muted-foreground);
	margin-top: 2px;
}
.post-detail-metrics-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-bottom: 16px;
}
.post-detail-metric-card {
	background: var(--background);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 12px;
}
.post-detail-metric-value {
	font-size: 20px;
	font-weight: 700;
	color: var(--foreground);
	font-variant-numeric: tabular-nums;
}
.post-detail-metric-label {
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted-foreground);
	margin-bottom: 4px;
}
.post-detail-metric-avg {
	font-size: 10px;
	color: var(--muted-foreground);
	margin-top: 4px;
}

/* Per-metric accent — a 3px coloured top border that ties the card to
   the engagement-composition bar legend below, and a matching tint on
   the label so the card identifies at a glance. */
.post-detail-metric-card { position: relative; }
.post-detail-metric-card::before {
	content: '';
	position: absolute; top: 0; left: 0; right: 0;
	height: 3px; border-radius: 6px 6px 0 0;
	background: var(--metric-accent, transparent);
}
.post-detail-metric-views     { --metric-accent: hsl(262 83% 58%); }   /* purple */
.post-detail-metric-eng       { --metric-accent: hsl(199 89% 48%); }   /* sky blue */
.post-detail-metric-rate      { --metric-accent: hsl(38 92% 50%); }    /* gold */
.post-detail-metric-likes     { --metric-accent: hsl(347 77% 60%); }   /* pink/red */
.post-detail-metric-comments  { --metric-accent: hsl(217 91% 60%); }   /* blue */
.post-detail-metric-shares    { --metric-accent: hsl(142 71% 45%); }   /* green */
.post-detail-metric-bookmarks { --metric-accent: hsl(45 93% 55%); }    /* yellow */
.post-detail-metric-duration  { --metric-accent: hsl(25 95% 53%); }    /* orange */

.post-detail-metric-views     .post-detail-metric-label { color: hsl(262 60% 50%); }
.post-detail-metric-eng       .post-detail-metric-label { color: hsl(199 70% 40%); }
.post-detail-metric-rate      .post-detail-metric-label { color: hsl(38 80% 40%); }
.post-detail-metric-likes     .post-detail-metric-label { color: hsl(347 60% 50%); }
.post-detail-metric-comments  .post-detail-metric-label { color: hsl(217 70% 50%); }
.post-detail-metric-shares    .post-detail-metric-label { color: hsl(142 60% 35%); }
.post-detail-metric-bookmarks .post-detail-metric-label { color: hsl(45 75% 40%); }
.post-detail-metric-duration  .post-detail-metric-label { color: hsl(25 75% 45%); }

/* Engagement-composition stacked bar — shows what fraction of total
   engagements came from each interaction type. Uses the same colour
   tokens as the metric-card accents so the bar reads as a summary of
   the cards above it. */
.post-detail-mix { margin: 0 0 16px; }
.post-detail-mix-header {
	font-size: 10px; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.05em;
	color: var(--muted-foreground);
	margin-bottom: 6px;
}
.post-detail-mix-bar {
	display: flex; height: 10px; border-radius: 999px; overflow: hidden;
	background: hsl(from var(--muted) h s l / 0.5);
	margin-bottom: 8px;
}
.post-detail-mix-seg { height: 100%; transition: filter 120ms; }
.post-detail-mix-seg:hover { filter: brightness(1.1); }
.post-detail-mix-seg.mix-likes      { background: hsl(347 77% 60%); }
.post-detail-mix-seg.mix-comments   { background: hsl(217 91% 60%); }
.post-detail-mix-seg.mix-shares     { background: hsl(142 71% 45%); }
.post-detail-mix-seg.mix-bookmarks  { background: hsl(45 93% 55%); }
.post-detail-mix-legend-row {
	display: flex; flex-wrap: wrap; gap: 12px 16px;
	font-size: 11px; color: var(--muted-foreground);
}
.post-detail-mix-legend { display: inline-flex; align-items: center; gap: 6px; }
.post-detail-mix-legend strong { color: var(--foreground); font-variant-numeric: tabular-nums; margin-left: 2px; }
.post-detail-mix-pct { color: var(--muted-foreground); }
.post-detail-mix-dot {
	width: 8px; height: 8px; border-radius: 50%;
	display: inline-block;
}
.post-detail-mix-dot.mix-likes     { background: hsl(347 77% 60%); }
.post-detail-mix-dot.mix-comments  { background: hsl(217 91% 60%); }
.post-detail-mix-dot.mix-shares    { background: hsl(142 71% 45%); }
.post-detail-mix-dot.mix-bookmarks { background: hsl(45 93% 55%); }
/* Hashtag / mention chip rows below the metric grid */
.post-detail-tags { margin-bottom: 14px; }
.post-detail-tags-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.post-detail-chip {
	display: inline-flex; align-items: center;
	padding: 3px 8px; border-radius: 999px;
	font-size: 11px; font-weight: 600;
	background: hsl(from var(--muted) h s l / 0.5);
	color: var(--muted-foreground);
}
.post-detail-chip.is-hashtag { color: hsl(262 83% 58%); }
.post-detail-chip.is-mention { color: hsl(199 89% 48%); }
.post-detail-chip.is-retweet,
.post-detail-chip.is-quote { background: hsl(from var(--muted) h s l / 0.7); color: var(--foreground); }
/* Music attribution row */
.post-detail-music {
	display: flex; align-items: flex-start; gap: 10px;
	padding: 10px 12px;
	background: hsl(from var(--muted) h s l / 0.4);
	border-radius: var(--radius);
	margin-bottom: 12px;
}
.post-detail-music-icon { font-size: 16px; line-height: 1.2; }
.post-detail-music-name { font-size: 13px; font-weight: 600; color: var(--foreground); }
.post-detail-music-author { font-size: 11px; color: var(--muted-foreground); margin-top: 2px; }
.post-detail-tw-flags { display: flex; gap: 6px; margin-bottom: 12px; }
/* Tier badges */
.tier-badge {
	display: inline-flex;
	padding: 3px 8px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
}
.tier-above { background: hsl(152 69% 45% / 0.15); color: hsl(152 69% 52%); }
.tier-avg   { background: var(--muted); color: var(--muted-foreground); }
.tier-below { background: hsl(215 28% 17%); color: var(--muted-foreground); }
.post-detail-distrib-val {
	float: right;
	font-weight: 700;
	color: var(--foreground);
}
/* Cross-platform versions */
.post-detail-xplat {
	background: var(--background);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 14px;
	margin-bottom: 14px;
}
.post-detail-xplat-header {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 10px;
}
.post-detail-xplat-header svg { width: 18px; height: 18px; }
.post-detail-xplat-empty {
	font-size: 12px;
	color: var(--muted-foreground);
	text-align: center;
	padding: 16px;
	background: var(--muted);
	border-radius: var(--radius-sm);
}
.post-detail-copy {
	padding: 9px 14px;
	background: transparent;
	border: 1px solid var(--border);
	color: var(--foreground);
	border-radius: var(--radius-sm);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	text-align: center;
}
.post-detail-copy:hover { background: var(--muted); }
@keyframes post-detail-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes post-detail-pop {
	from { opacity: 0; transform: scale(0.96); }
	to { opacity: 1; transform: scale(1); }
}
@media (max-width: 720px) {
	.post-detail-modal { flex-direction: column; max-width: 520px; }
	.post-detail-media { flex: 0 0 240px; min-height: 240px; }
}

/* ─── Export modal ───────────────────────────────────────────────────────── */

.export-modal-backdrop {
	position: fixed;
	inset: 0;
	background: hsl(0 0% 0% / 0.35);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	z-index: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	animation: export-fade 120ms ease-out;
}
.export-modal {
	background: var(--card);
	color: var(--foreground);
	border-radius: var(--radius);
	border: 1px solid var(--border);
	box-shadow: 0 20px 60px hsl(0 0% 0% / 0.35);
	width: 100%;
	max-width: 520px;
	max-height: calc(100vh - 48px);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	animation: export-pop 150ms ease-out;
}
.export-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--border);
}
.export-modal-header-title {
	display: flex;
	align-items: center;
	gap: 10px;
}
.export-modal-icon {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--accent-soft);
	border-radius: var(--radius-sm);
	color: var(--accent);
	font-weight: 700;
}
.export-modal-header h2 {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
}
.export-modal-close {
	background: transparent;
	border: 0;
	color: var(--muted-foreground);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 10px;
	border-radius: var(--radius-sm);
}
.export-modal-close:hover { background: var(--muted); color: var(--foreground); }
.export-modal-body {
	padding: 20px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.export-field-label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted-foreground);
	margin-bottom: 8px;
}
.export-type-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.export-type-option {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background var(--transition), border-color var(--transition);
}
.export-type-option:hover { background: var(--muted); }
.export-type-option.active {
	border-color: var(--accent);
	background: var(--accent-soft);
}
.export-type-radio {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid var(--border);
	margin-top: 2px;
	flex-shrink: 0;
	position: relative;
}
.export-type-option.active .export-type-radio {
	border-color: var(--accent);
}
.export-type-option.active .export-type-radio::after {
	content: '';
	position: absolute;
	inset: 2px;
	border-radius: 50%;
	background: var(--accent);
}
.export-type-label {
	font-weight: 600;
	font-size: 14px;
	color: var(--foreground);
}
.export-type-desc {
	font-size: 12px;
	color: var(--muted-foreground);
	margin-top: 2px;
}
.export-filename {
	width: 100%;
	padding: 10px 12px;
	font-size: 14px;
	background: var(--background);
	color: var(--foreground);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	font-family: ui-monospace, monospace;
}
.export-filename:focus {
	outline: 2px solid var(--accent);
	outline-offset: -1px;
}
.export-filter-summary {
	background: var(--muted);
	border-radius: var(--radius-sm);
	padding: 10px 12px;
	font-size: 12px;
	color: var(--muted-foreground);
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.export-filter-summary strong { color: var(--foreground); font-weight: 600; }
.export-modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding: 14px 20px;
	border-top: 1px solid var(--border);
}
.export-modal-cancel,
.export-modal-confirm {
	padding: 8px 16px;
	border-radius: var(--radius-sm);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	border: 1px solid var(--border);
	background: transparent;
	color: var(--foreground);
	transition: background var(--transition);
}
.export-modal-cancel:hover { background: var(--muted); }
.export-modal-confirm {
	background: var(--accent);
	color: var(--accent-foreground, #fff);
	border-color: var(--accent);
}
.export-modal-confirm:hover { filter: brightness(1.1); }
.export-modal-confirm:disabled { opacity: 0.6; cursor: not-allowed; }
@keyframes export-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes export-pop {
	from { opacity: 0; transform: scale(0.96); }
	to { opacity: 1; transform: scale(1); }
}

/* ─── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 960px) {
	.app-body { flex-direction: column; }
	.filter-sidebar {
		width: 100%;
		height: auto;
		position: relative;
		top: 0;
		border-right: 0;
		border-bottom: 1px solid var(--border);
	}
	main { padding: 16px; }

	/* Collapsed on mobile: the sidebar stacks above content, so the 48px
	   vertical icon strip becomes a tall narrow column that strands the
	   content far below with empty space beside it. Make it a short
	   full-width action bar instead, so content starts right under it. */
	.app-body.sidebar-collapsed .filter-sidebar {
		width: 100%;
		min-width: 0;
		padding: 6px 12px;
	}
	.app-body.sidebar-collapsed .filter-sidebar-actions {
		flex-direction: row;
		justify-content: flex-start;
		gap: 8px;
	}
}

@media (max-width: 720px) {
	.movers-grid { grid-template-columns: 1fr; }
	.top-posts-grid { grid-template-columns: repeat(2, 1fr); }
	.top-posts-grid:has(.post-column:nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
	.commandbar-inner { padding: 0 12px; }
	.view-nav-item { padding: 4px 8px; font-size: 12px; }
	.top-posts-grid { grid-template-columns: 1fr; }
	.top-posts-grid:has(.post-column:nth-child(4)) { grid-template-columns: 1fr; }
	.section-title { font-size: 16px; }
}

@media (max-width: 640px) {
	/* AVG summary cards: 4-across is ~77px/card at phone widths, so values
	   like "171.0K" overflow the card. Drop to 2×2 so they fit. */
	.account-kpis,
	.compare-kpis { grid-template-columns: repeat(2, 1fr); }

	/* Safety net: after the wraps/grids above nothing should scroll sideways,
	   so clip any residual horizontal overflow (e.g. the account ticker
	   marquee leaking a few px past its fixed, clipped container). */
	html, body { overflow-x: clip; }
}

/* Trends model toggle (pro vs flash) in the hero controls */
.trends-model-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted, #6b7280); }
.trends-model-toggle select { font-size: 12px; padding: 4px 6px; border: 1px solid var(--border, #d1d5db); border-radius: 6px; background: var(--surface, #fff); color: inherit; }

/* Trend card per-pattern averages (eye = views/post, heart = eng/post) — mirrors mondotrends */
/* Inset 16px to line up with the lift pill and insight above/below — the
   stat row was flush at margin:0 so the eye icon kissed the card border. */
.aitrend-card-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 10px 16px 2px; font-size: 13px; color: var(--text-muted, #6b7280); }
.aitrend-card-stat { display: inline-flex; align-items: center; gap: 6px; }
.aitrend-card-stat svg { flex: none; }
.aitrend-card-stat > span { font-weight: 600; }
/* Canonical Top Views = blue (--chart-1), Top Engagements = pink (--chart-5),
   matching the leaderboard charts and mondotrends. Colour both icon + value. */
.aitrend-card-stat--views { color: var(--chart-1); }
.aitrend-card-stat--eng   { color: var(--chart-5); }
.aitrend-card-stat--views > span,
.aitrend-card-stat--eng   > span { color: inherit; }