/* ============================================================================
   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; }
.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; }
/* Hide floating reopen button since the icon strip serves this purpose */
.app-body.sidebar-collapsed .sidebar-reopen-btn { display: none; }
.sidebar-reopen-btn {
	position: fixed;
	top: calc(var(--commandbar-h) + var(--ticker-h) + 12px);
	left: 12px;
	width: 32px;
	height: 32px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
	background: var(--card);
	color: var(--foreground);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-card);
	z-index: 45;
}
.sidebar-reopen-btn[hidden] { display: none; }
.sidebar-reopen-btn:hover { background: var(--muted); }
.sidebar-reopen-btn svg { width: 16px; height: 16px; }

.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;
	justify-content: space-between;
	padding: 12px 4px;
	font-size: 11px;
	font-weight: 600;
	color: var(--foreground);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	cursor: pointer;
	transition: background var(--transition);
}
.filter-section-summary:hover { background: hsl(from var(--muted) h s l / 0.3); }
.filter-section-summary .chevron {
	width: 16px;
	height: 16px;
	color: var(--muted-foreground);
	transition: transform var(--transition);
}
.filter-section[data-open='false'] .chevron { transform: rotate(-90deg); }
.filter-section[data-open='false'] .filter-section-body { 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);
}

/* 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: center;
	gap: 8px;
}
.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; }
.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);
}
.mover-pct {
	font-size: 12px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 999px;
	white-space: nowrap;
	flex-shrink: 0;
}
.pct-up { color: var(--success); background: var(--success-bg); }
.pct-down { color: var(--destructive); background: var(--destructive-bg); }

.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: 11px;
	font-weight: 600;
	color: var(--muted-foreground);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	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: 11px;
	font-weight: 600;
	color: var(--muted-foreground);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	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;
}
.trend-hero-card {
	background: var(--card);
	border: none;
	border-radius: var(--radius);
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	box-shadow: var(--shadow-md);
	position: relative;
	overflow: hidden;
}
.trend-hero-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--accent) 0%, transparent 60%);
	opacity: 0.06;
	pointer-events: none;
}
.trend-hero-header-bar {
	display: flex;
	align-items: center;
	gap: 12px;
}
.trend-hero-icon {
	width: 36px;
	height: 36px;
	border-radius: var(--radius-sm);
	background: var(--accent-soft);
	color: var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 700;
	flex-shrink: 0;
}
.trend-hero-title-block {
	flex: 1;
	min-width: 0;
}
.trend-hero-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--foreground);
}
.trend-hero-pattern {
	font-size: 11px;
	color: var(--muted-foreground);
	margin-top: 2px;
}
.trend-hero-lift {
	padding: 4px 10px;
	background: hsl(142 71% 45% / 0.12);
	color: hsl(142 71% 45%);
	font-size: 12px;
	font-weight: 700;
	border-radius: 999px;
	flex-shrink: 0;
}
.trend-hero-insight {
	font-size: 12px;
	line-height: 1.55;
	color: var(--foreground);
	margin: 0;
}
.trend-hero-examples {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 8px;
	border-top: 1px dashed var(--border);
}
.trend-hero-example-head {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 11px;
}
.trend-hero-example-account {
	font-weight: 700;
	color: var(--foreground);
}
.trend-hero-example-platform {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--muted-foreground);
}
.trend-hero-example-eng {
	margin-left: auto;
	font-weight: 700;
	color: var(--accent);
	font-variant-numeric: tabular-nums;
}
.trend-hero-example-caption {
	font-size: 11px;
	color: var(--muted-foreground);
	line-height: 1.4;
	margin-top: 1px;
}

.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;
	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: 11px;
	font-weight: 600;
	color: var(--muted-foreground);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	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: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}
.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;
}
.compare-unit-toggle {
	display: inline-flex;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	overflow: hidden;
	font-size: 11px;
	margin-right: 8px;
}
.compare-unit-toggle button {
	background: transparent;
	border: none;
	padding: 4px 10px;
	color: var(--muted-foreground);
	cursor: pointer;
	font-weight: 500;
	font-size: 11px;
}
.compare-unit-toggle button:not(:last-child) { border-right: 1px solid var(--border); }
.compare-unit-toggle button.active {
	background: var(--accent);
	color: var(--accent-foreground);
}
.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);
}
.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);
}

/* ─── 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;
}
/* 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; }
}

@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; }
}