/* ============================================================
   Maximo SEO — Professional SaaS Design System
   Version 2.0 - Clean, Modern, Consistent
   ============================================================ */

:root {
	/* ==================== COLOR SYSTEM ==================== */
	/* Background layers (darkest to lightest) */
	--bg: #0b0f1a;
	--bg-secondary: #10152a;
	--surface: #151b35;
	--surface-hover: #1a2142;
	--surface-elevated: #1f264d;
	--surface-active: #252d58;

	/* Border colors */
	--border: rgba(255, 255, 255, 0.08);
	--border-hover: rgba(255, 255, 255, 0.12);
	--border-strong: rgba(255, 255, 255, 0.16);
	--border-focus: var(--accent);

	/* Text colors */
	--text-primary: #f0f4ff;
	--text-secondary: #9ba3bf;
	--text-muted: #6b7394;
	--text-disabled: #4a5173;

	/* Accent colors (blue-purple) */
	--accent: #6c8cff;
	--accent-hover: #7d9aff;
	--accent-active: #5b7bef;
	--accent-muted: rgba(108, 140, 255, 0.15);
	--accent-glow: rgba(108, 140, 255, 0.3);

	/* Semantic colors */
	--success: #22c55e;
	--success-muted: rgba(34, 197, 94, 0.15);
	--danger: #ef4444;
	--danger-muted: rgba(239, 68, 68, 0.15);
	--warning: #f59e0b;
	--warning-muted: rgba(245, 158, 11, 0.15);
	--info: #3b82f6;
	--info-muted: rgba(59, 130, 246, 0.15);

	/* Glass effects */
	--glass: rgba(255, 255, 255, 0.03);
	--glass-hover: rgba(255, 255, 255, 0.06);
	--glass-strong: rgba(255, 255, 255, 0.1);

	/* Header */
	--header-height: 64px;
	--header-bg: rgba(11, 15, 26, 0.95);

	/* Sidebar */
	--sidebar-width: 260px;
	--sidebar-bg: var(--bg-secondary);

	/* ==================== SPACING SCALE (8px base) ==================== */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;

	/* Aliases for common uses */
	--space-xs: var(--space-1);
	--space-sm: var(--space-2);
	--space-md: var(--space-4);
	--space-lg: var(--space-6);
	--space-xl: var(--space-8);
	--space-2xl: var(--space-12);

	/* ==================== TYPOGRAPHY ==================== */
	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;

	/* Font sizes */
	--text-xs: 11px;
	--text-sm: 13px;
	--text-base: 14px;
	--text-md: 15px;
	--text-lg: 17px;
	--text-xl: 20px;
	--text-2xl: 24px;
	--text-3xl: 30px;
	--text-4xl: 36px;

	/* Line heights */
	--leading-tight: 1.25;
	--leading-normal: 1.5;
	--leading-relaxed: 1.65;

	/* Font weights */
	--font-normal: 400;
	--font-medium: 500;
	--font-semibold: 600;
	--font-bold: 700;

	/* Legacy aliases */
	--font-size-xs: var(--text-xs);
	--font-size-sm: var(--text-sm);
	--font-size-base: var(--text-base);
	--font-size-md: var(--text-md);
	--font-size-lg: var(--text-lg);
	--font-size-xl: var(--text-xl);
	--font-size-2xl: var(--text-2xl);
	--line-height: var(--leading-relaxed);

	/* ==================== BORDERS & RADIUS ==================== */
	--radius-sm: 6px;
	--radius: 8px;
	--radius-md: 10px;
	--radius-lg: 12px;
	--radius-xl: 16px;
	--radius-2xl: 20px;
	--radius-full: 9999px;

	/* ==================== SHADOWS ==================== */
	--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
	--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
	--shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.35);
	--shadow-glow: 0 0 24px var(--accent-glow);
	--shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.2);

	/* Legacy aliases */
	--shadow-1: var(--shadow-md);
	--shadow-2: var(--shadow-lg);
	--shadow-3: var(--shadow-xl);

	/* ==================== TRANSITIONS ==================== */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
	--transition-fast: 0.15s var(--ease-out);
	--transition-base: 0.2s var(--ease-out);
	--transition-slow: 0.3s var(--ease-out);

	/* ==================== LAYOUT ==================== */
	--max-width: 1400px;
	--content-max-width: 1200px;

	/* Z-index scale */
	--z-dropdown: 100;
	--z-sticky: 200;
	--z-overlay: 300;
	--z-modal: 400;
	--z-toast: 500;
}

/* ============================================================
   Reset & Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body {
	height: 100%;
}

body {
	margin: 0;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: var(--font-size-base);
	line-height: var(--line-height);
	background: var(--bg);
	color: var(--text-primary);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden; /* Prevent horizontal scroll */
}

/* ============================================================
   GLOBAL RESPONSIVE SYSTEM
   Breakpoints: Mobile (<640px), Tablet (640-1024px), Desktop (>1024px)
   ============================================================ */

/* Prevent horizontal overflow on all containers */
.tab-content,
.dashboard-container,
.panel,
.card,
.modal-content,
main,
section {
	max-width: 100%;
	overflow-x: hidden;
}

/* Responsive images and media */
img, video, iframe, embed, object {
	max-width: 100%;
	height: auto;
}

/* Responsive tables - wrap in scrollable container */
.table-responsive {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Force all grids to stack on mobile */
@media (max-width: 640px) {
	/* Stack all 2+ column grids */
	.dashboard-row,
	.stats-grid,
	.form-row,
	.quick-actions-grid,
	.kr-layout,
	.ads-layout,
	.social-feature-layout,
	.lb-layout,
	[class*="-layout"],
	[class*="-grid"]:not(.my-sites-grid) {
		grid-template-columns: 1fr !important;
		display: block !important;
	}

	/* Full width cards */
	.stat-card,
	.dashboard-card,
	.panel,
	.card {
		width: 100% !important;
		margin-bottom: var(--space-md);
	}

	/* Smaller padding on mobile */
	.tab-content.active,
	.dashboard-container,
	.panel,
	.card {
		padding: var(--space-sm) !important;
	}

	/* Smaller headings on mobile */
	h1, .page-title, .text-h1 {
		font-size: 22px !important;
	}
	h2, .section-title, .text-h2 {
		font-size: 18px !important;
	}
	h3, .text-h3 {
		font-size: 16px !important;
	}

	/* Full width buttons */
	.btn-primary,
	.btn-lg,
	.actions .btn {
		width: 100%;
		margin-bottom: var(--space-xs);
	}

	/* Stack button groups */
	.actions,
	.btn-group,
	.card-header-actions {
		flex-direction: column;
		gap: var(--space-xs);
	}

	/* Form fields */
	.field,
	input,
	textarea,
	select {
		font-size: 16px !important; /* Prevents iOS zoom */
	}

	/* Hide decorative elements */
	.page-subtitle,
	.panel-sub,
	.card-desc {
		display: none;
	}
}

/* Tablet adjustments */
@media (min-width: 641px) and (max-width: 1024px) {
	/* 2 column grids on tablet */
	.stats-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.quick-actions-grid {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

/* Ensure touch targets are large enough (44px minimum) */
@media (pointer: coarse) {
	.btn,
	.tab-btn,
	.nav-btn,
	button,
	a,
	input[type="checkbox"],
	input[type="radio"],
	select {
		min-height: 44px;
		min-width: 44px;
	}

	/* Larger tap targets for navigation */
	.nav-category-header,
	.mobile-menu-toggle {
		min-height: 48px;
	}
}

/* ============================================================
   DESIGN SYSTEM — Typography Scale
   ============================================================ */
.text-h1, h1.page-title {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.5px;
	color: var(--text-primary);
	margin: 0 0 var(--space-sm);
}
.text-h2, h2.section-title {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.3px;
	color: var(--text-primary);
	margin: 0 0 var(--space-sm);
}
.text-h3, h3.subsection-title {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -0.2px;
	color: var(--text-primary);
	margin: 0 0 var(--space-xs);
}
.text-body {
	font-size: var(--font-size-base);
	line-height: 1.6;
	color: var(--text-primary);
}
.text-muted, .helper-text {
	font-size: var(--font-size-sm);
	color: var(--text-muted);
	line-height: 1.5;
}
.text-small {
	font-size: var(--font-size-xs);
	color: var(--text-muted);
}

/* ============================================================
   DESIGN SYSTEM — Consistent Section Headers
   ============================================================ */
.section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	margin-bottom: var(--space-lg);
	padding-bottom: var(--space-md);
	border-bottom: 1px solid var(--border);
}
.section-header-content {
	flex: 1;
	min-width: 0;
}
.section-header-title {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	color: var(--text-primary);
	letter-spacing: -0.3px;
}
.section-header-desc {
	margin: 4px 0 0;
	font-size: var(--font-size-sm);
	color: var(--text-muted);
}
.section-header-actions {
	display: flex;
	gap: var(--space-sm);
	flex-shrink: 0;
}

/* ============================================================
   DESIGN SYSTEM — Enhanced Data Tables
   ============================================================ */
.data-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: var(--font-size-sm);
}
.data-table thead {
	position: sticky;
	top: 0;
	z-index: 1;
}
.data-table th {
	text-align: left;
	padding: 12px 16px;
	background: var(--surface-elevated);
	color: var(--text-secondary);
	font-weight: 600;
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-bottom: 1px solid var(--border);
	white-space: nowrap;
}
.data-table th:first-child {
	border-radius: var(--radius-sm) 0 0 0;
}
.data-table th:last-child {
	border-radius: 0 var(--radius-sm) 0 0;
}
.data-table td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--border);
	color: var(--text-primary);
	vertical-align: middle;
}
.data-table tbody tr {
	transition: background var(--transition-fast);
}
.data-table tbody tr:hover {
	background: var(--glass-light);
}
.data-table tbody tr:last-child td {
	border-bottom: none;
}
.data-table tbody tr:last-child td:first-child {
	border-radius: 0 0 0 var(--radius-sm);
}
.data-table tbody tr:last-child td:last-child {
	border-radius: 0 0 var(--radius-sm) 0;
}

/* Table inside scroll container */
.table-container {
	overflow-x: auto;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
}
.table-container .data-table th:first-child,
.table-container .data-table th:last-child,
.table-container .data-table tbody tr:last-child td:first-child,
.table-container .data-table tbody tr:last-child td:last-child {
	border-radius: 0;
}

/* ============================================================
   DESIGN SYSTEM — Form Group Pattern
   ============================================================ */
.form-group {
	margin-bottom: var(--space-md);
}
.form-group:last-child {
	margin-bottom: 0;
}
.form-group .field-label {
	margin-top: 0;
	margin-bottom: 6px;
}
.form-group .helper-text {
	margin-top: 4px;
	font-size: var(--font-size-xs);
	color: var(--text-muted);
}
.form-group .error-text {
	margin-top: 4px;
	font-size: var(--font-size-xs);
	color: var(--danger);
}

/* Form row for side-by-side fields */
.form-row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-md);
}
@media (max-width: 600px) {
	.form-row {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   DESIGN SYSTEM — Enhanced Loading States
   ============================================================ */
.skeleton {
	background: linear-gradient(
		90deg,
		var(--glass) 0%,
		var(--glass-light) 50%,
		var(--glass) 100%
	);
	background-size: 200% 100%;
	animation: skeleton-shimmer 1.5s ease-in-out infinite;
	border-radius: var(--radius-sm);
}
@keyframes skeleton-shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}
.skeleton-text {
	height: 14px;
	margin-bottom: 8px;
	border-radius: 4px;
}
.skeleton-text:last-child {
	width: 70%;
	margin-bottom: 0;
}
.skeleton-heading {
	height: 24px;
	width: 60%;
	margin-bottom: 12px;
}
.skeleton-button {
	height: 36px;
	width: 100px;
}

/* Loading overlay for cards/panels */
.loading-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-md);
	background: rgba(10, 14, 26, 0.85);
	backdrop-filter: blur(4px);
	border-radius: inherit;
	z-index: 10;
}
.loading-text {
	font-size: var(--font-size-sm);
	color: var(--text-muted);
}

/* Subtle animated gradient background */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	background:
		radial-gradient(ellipse 80% 60% at 20% 10%, rgba(108, 140, 255, 0.06) 0%, transparent 60%),
		radial-gradient(ellipse 60% 50% at 80% 80%, rgba(167, 139, 250, 0.05) 0%, transparent 50%),
		radial-gradient(ellipse 50% 40% at 50% 50%, rgba(244, 114, 182, 0.03) 0%, transparent 50%);
	pointer-events: none;
	z-index: 0;
}

/* Selection styling */
::selection {
	background: var(--accent);
	color: #fff;
}

/* ============================================================
   Custom Scrollbars
   ============================================================ */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
::-webkit-scrollbar-track {
	background: transparent;
}
::-webkit-scrollbar-thumb {
	background: var(--glass-strong);
	border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.18);
}

/* ============================================================
   Header - Fixed at top
   ============================================================ */
.app-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 60px;
	display: flex;
	align-items: center;
	gap: var(--space-md);
	padding: 0 var(--space-xl);
	background: var(--header-bg);
	backdrop-filter: blur(20px) saturate(1.3);
	-webkit-backdrop-filter: blur(20px) saturate(1.3);
	border-bottom: 1px solid var(--border);
	color: #fff;
	z-index: 100;
}
.app-header::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--accent-glow), transparent);
}

/* Offset body content for fixed header */
body {
	padding-top: 60px;
}

.brand { display: flex; align-items: center; gap: 14px; }
.logo {
	color: var(--accent);
	flex: 0 0 32px;
	filter: drop-shadow(0 0 8px var(--accent-glow));
}
.brand-text .name {
	font-weight: 700;
	font-size: var(--font-size-lg);
	color: #fff;
	letter-spacing: -0.3px;
}
.brand-text .sub {
	font-size: var(--font-size-xs);
	color: rgba(255, 255, 255, 0.5);
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

/* Hide subtitle on smaller screens */
@media (max-width: 768px) {
	.brand-text .sub { display: none; }
	.brand-text .name { font-size: var(--font-size-base); }
	.app-header { padding: 0 var(--space-md); }
}

.header-actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.app-header .btn {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--font-size-sm);
	padding: 7px 14px;
	border-radius: var(--radius-sm);
	backdrop-filter: blur(8px);
}
.app-header .btn:hover {
	background: rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 255, 255, 0.25);
	transform: translateY(-1px);
	color: #fff;
}

.user-display {
	font-size: var(--font-size-sm);
	color: rgba(255, 255, 255, 0.65);
	margin-right: var(--space-sm);
}

/* ============================================================
   SIDEBAR NAVIGATION - Desktop
   ============================================================ */
:root {
	--sidebar-width: 260px;
	--sidebar-collapsed-width: 60px;
}

/* Main layout wrapper */
.app-layout {
	display: flex;
	min-height: calc(100vh - 60px);
}

/* Sidebar */
.tab-nav {
	position: fixed;
	top: 60px;
	left: 0;
	bottom: 0;
	width: var(--sidebar-width);
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: var(--space-md);
	background: var(--surface);
	border-right: 1px solid var(--border);
	overflow-y: auto;
	overflow-x: hidden;
	z-index: 15;
	transition: transform var(--transition-base), width var(--transition-base);
}

.tab-nav::-webkit-scrollbar { width: 4px; }
.tab-nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* Main content area - shifts right for sidebar */
.main-wrap {
	flex: 1;
	margin-left: var(--sidebar-width);
	min-width: 0;
	transition: margin-left var(--transition-base);
}

/* Tab buttons in sidebar */
.tab-btn {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	width: 100%;
	padding: var(--space-3) var(--space-4);
	border: none;
	background: transparent;
	color: var(--text-secondary);
	font-family: inherit;
	font-weight: var(--font-medium);
	font-size: var(--text-sm);
	cursor: pointer;
	border-radius: var(--radius);
	transition: all var(--transition-fast);
	text-align: left;
	white-space: nowrap;
	min-height: 40px;
}

.tab-btn:hover {
	color: var(--text-primary);
	background: var(--glass-hover);
}

.tab-btn.active {
	color: var(--accent);
	background: var(--accent-muted);
	font-weight: var(--font-semibold);
}

.tab-icon {
	flex-shrink: 0;
	font-size: 16px;
	width: 20px;
	text-align: center;
}

.tab-content {
	display: none;
}
.tab-content.active {
	display: block;
	padding: var(--space-8);
	max-width: var(--content-max-width);
	margin: 0 auto;
}

/* Two-panel layout: If tab has panel-left + panel-right, use flex */
.tab-content.active:has(.panel-left) {
	display: flex !important;
	flex-direction: row;
	gap: var(--space-xl);
	align-items: flex-start;
}

/* Mobile: Stack panels vertically */
@media (max-width: 1024px) {
	.tab-content.active:has(.panel-left) {
		flex-direction: column;
	}
}

/* Responsive tab content */
@media (max-width: 1024px) {
	.tab-content.active {
		padding: var(--space-md);
		padding-bottom: 100px;
	}
}

@media (max-width: 600px) {
	.tab-content.active {
		padding: var(--space-sm);
		padding-bottom: 100px;
	}
}

/* ============================================================
   Navigation Categories (Sidebar Accordion)
   ============================================================ */
.nav-category {
	display: flex;
	flex-direction: column;
	margin-bottom: 4px;
}

.nav-category-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border: none;
	background: transparent;
	color: var(--text-primary);
	font-family: inherit;
	font-weight: 600;
	font-size: var(--font-size-sm);
	cursor: pointer;
	border-radius: var(--radius-sm);
	transition: all var(--transition-fast);
	text-align: left;
	width: 100%;
}

.nav-category-header:hover {
	background: var(--glass);
}

.category-icon {
	flex-shrink: 0;
	font-size: 16px;
	width: 20px;
	text-align: center;
}

.category-title {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
}

.category-arrow {
	font-size: 10px;
	transition: transform var(--transition-fast);
	opacity: 0.5;
	margin-left: auto;
}

.nav-category-header[aria-expanded="true"] .category-arrow {
	transform: rotate(90deg);
}

/* Category items - inline accordion style */
.nav-category-items {
	display: none;
	flex-direction: column;
	padding-left: 12px;
	margin-top: 2px;
	border-left: 2px solid var(--border);
	margin-left: 22px;
}

.nav-category-items[style*="display: block"],
.nav-category-items[style*="display:block"] {
	display: flex !important;
}

.nav-category-items .tab-btn {
	padding: 8px 12px;
	font-size: 13px;
	color: var(--text-muted);
}

.nav-category-items .tab-btn:hover {
	color: var(--text-primary);
}

.nav-category-items .tab-btn.active {
	color: var(--accent);
	background: rgba(108, 140, 255, 0.1);
}

/* ============================================================
   Mobile Navigation
   ============================================================ */
.mobile-menu-toggle {
	display: none;
}

.mobile-menu-close {
	display: none;
}

@media (max-width: 1024px) {
	/* Hide sidebar by default on tablet/mobile */
	.tab-nav {
		transform: translateX(-100%);
		width: 280px;
		top: 0;
		padding-top: 70px;
		z-index: 1000;
		box-shadow: 4px 0 20px rgba(0,0,0,0.3);
	}

	.tab-nav.open {
		transform: translateX(0);
	}

	/* Main content takes full width */
	.main-wrap {
		margin-left: 0;
	}

	/* Show mobile menu toggle */
	.mobile-menu-toggle {
		display: flex;
		align-items: center;
		gap: 8px;
		position: fixed;
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
		padding: 12px 24px;
		background: var(--accent);
		color: white;
		border: none;
		border-radius: 30px;
		font-family: inherit;
		font-size: var(--font-size-sm);
		font-weight: 600;
		cursor: pointer;
		z-index: 100;
		box-shadow: 0 4px 20px rgba(108, 140, 255, 0.4);
		transition: all var(--transition-fast);
	}

	.mobile-menu-toggle:hover {
		transform: translateX(-50%) scale(1.05);
		box-shadow: 0 6px 25px rgba(108, 140, 255, 0.5);
	}

	.hamburger-icon {
		font-size: 18px;
	}

	.dropdown-arrow {
		display: none;
	}

	/* Show close button in sidebar */
	.mobile-menu-close {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 12px;
		margin: -8px -8px 12px -8px;
		background: var(--surface-elevated);
		border: none;
		border-bottom: 1px solid var(--border);
		color: var(--text-primary);
		font-family: inherit;
		font-size: var(--font-size-sm);
		font-weight: 500;
		cursor: pointer;
		border-radius: 0;
	}

	/* Overlay when menu is open */
	.sidebar-overlay {
		display: none;
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,0.5);
		z-index: 999;
	}

	.sidebar-overlay.visible {
		display: block;
	}
}

@media (max-width: 600px) {
	.tab-nav {
		width: 100%;
		max-width: 320px;
	}

	.mobile-menu-toggle {
		padding: 10px 20px;
		font-size: 13px;
	}
}

/* ============================================================
   Dashboard Layout (works with sidebar)
   ============================================================ */
.dashboard {
	position: relative;
	z-index: 1;
	max-width: calc(var(--max-width) - var(--sidebar-width));
	margin: 0 auto;
	padding: var(--space-xl);
	padding-bottom: var(--space-2xl);
}

/* Override main-wrap for dashboard - it IS the main wrap */
.main-wrap.dashboard {
	margin-left: var(--sidebar-width);
	max-width: none;
	padding: var(--space-xl);
}

@media (max-width: 1024px) {
	.main-wrap.dashboard {
		margin-left: 0;
		padding: var(--space-md);
		padding-bottom: 100px; /* Space for floating button */
	}
}

/* ============================================================
   Panels
   ============================================================ */
.panel {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--space-xl);
	box-shadow: var(--shadow-1);
	transition: box-shadow var(--transition-base);
}

.panel-left {
	flex: 0 0 400px;
	max-width: 400px;
	flex-shrink: 0;
	align-self: start;
	position: sticky;
	top: 80px;
	max-height: calc(100vh - 100px);
	overflow-y: auto;
}
.panel-right {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
}

/* Mobile: Full width panels */
@media (max-width: 1024px) {
	.panel-left {
		flex: none;
		width: 100%;
		max-width: 100%;
		position: static;
		max-height: none;
	}
	.panel-right {
		width: 100%;
	}
}

.panel-header {
	margin-bottom: var(--space-6);
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--border);
}
.panel-title {
	margin: 0;
	font-size: var(--text-xl);
	font-weight: var(--font-bold);
	letter-spacing: -0.3px;
	color: var(--text-primary);
	display: flex;
	align-items: center;
	gap: var(--space-2);
}
.panel-sub {
	font-size: var(--text-sm);
	color: var(--text-muted);
	margin-top: var(--space-2);
	line-height: var(--leading-relaxed);
}

/* ============================================================
   Form Fields
   ============================================================ */
.field {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius);
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--text-primary);
	font-family: inherit;
	font-size: var(--text-base);
	transition: all var(--transition-fast);
	line-height: 1.5;
	min-height: 44px;
}
.field::placeholder {
	color: var(--text-muted);
}
.field:hover {
	border-color: var(--border-hover);
	background: var(--surface-hover);
}

.textarea {
	min-height: 120px;
	resize: vertical;
}

.field-label {
	display: block;
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	font-weight: 500;
	margin: var(--space-md) 0 8px;
}
.field-label:first-child {
	margin-top: 0;
}

/* Field helper text */
.field-helper {
	font-size: var(--font-size-xs);
	color: var(--text-muted);
	margin-top: 6px;
	line-height: 1.4;
}

/* Accessible focus */
.field:focus-visible,
.field:focus {
	outline: none;
	border-color: var(--accent);
	background: var(--surface);
	box-shadow: 0 0 0 3px var(--accent-muted);
}

/* Field disabled state */
.field:disabled,
.field[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
	background: var(--glass);
}

/* Field error state */
.field.error,
.field.is-invalid {
	border-color: var(--danger);
	box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15);
}

select.field {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238b97b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 40px;
	cursor: pointer;
}

/* Checkbox and radio improvements */
input[type="checkbox"],
input[type="radio"] {
	width: 18px;
	height: 18px;
	accent-color: var(--accent);
	cursor: pointer;
}

/* Row / Col layout */
.row { display: flex; gap: var(--space-md); }
.col { flex: 1; }

/* ============================================================
   Buttons
   ============================================================ */
.actions {
	display: flex;
	gap: var(--space-sm);
	margin-top: var(--space-md);
	flex-wrap: wrap;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 18px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-strong);
	background: var(--glass);
	color: var(--text-secondary);
	font-family: inherit;
	font-size: var(--font-size-sm);
	font-weight: 500;
	cursor: pointer;
	transition: all var(--transition-fast);
	white-space: nowrap;
}
.btn:hover {
	background: var(--glass-light);
	color: var(--text-primary);
	border-color: rgba(255, 255, 255, 0.2);
	transform: translateY(-1px);
	box-shadow: var(--shadow-sm);
}
.btn:active {
	transform: translateY(0);
	box-shadow: none;
}
.btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--accent-glow);
}
.btn[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
	transform: none !important;
	box-shadow: none !important;
}

.btn-primary {
	background: linear-gradient(135deg, var(--accent), var(--accent-hover));
	border: none;
	color: #fff;
	font-weight: 600;
	box-shadow: 0 2px 12px var(--accent-glow);
}
.btn-primary:hover {
	background: linear-gradient(135deg, var(--accent-hover), var(--accent-active));
	box-shadow: 0 4px 20px var(--accent-glow);
	color: #fff;
	transform: translateY(-2px);
}

.btn-secondary {
	background: var(--surface-elevated);
	border: 1px solid var(--border-strong);
	color: var(--text-primary);
}
.btn-secondary:hover {
	background: var(--glass-strong);
	border-color: var(--accent);
	color: var(--accent);
}

.btn-ghost {
	background: transparent;
	border: 1px solid transparent;
	color: var(--text-secondary);
}
.btn-ghost:hover {
	background: var(--glass);
	color: var(--accent);
}

.btn-danger {
	background: var(--danger);
	border: none;
	color: #fff;
	font-weight: 500;
}
.btn-danger:hover {
	background: #e35d5d;
	box-shadow: 0 2px 12px rgba(248, 113, 113, 0.3);
	color: #fff;
}

.btn-accent {
	background: linear-gradient(135deg, var(--accent-grad-start), var(--accent-grad-mid), var(--accent-grad-end));
	border: none;
	color: white;
	font-weight: 600;
}
.btn-accent:hover {
	filter: brightness(1.12);
	transform: translateY(-2px);
	box-shadow: 0 4px 20px rgba(167, 139, 250, 0.3);
	color: white;
}

.btn-sm {
	padding: 6px 10px;
	font-size: var(--font-size-xs);
}

/* ============================================================
   Cards
   ============================================================ */
.card {
	background: var(--surface);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	overflow: hidden;
	transition: border-color var(--transition-base), box-shadow var(--transition-base);
	position: relative;
}
.card:hover {
	border-color: var(--border-strong);
}

.card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding: var(--space-md) var(--space-lg);
	border-bottom: 1px solid var(--border);
	background: var(--glass);
}
.card-header h3 {
	margin: 0;
	font-size: var(--font-size-md);
	font-weight: 600;
	letter-spacing: -0.2px;
}
.card-header .actions {
	margin-top: 0;
	gap: var(--space-xs);
}
.card-body {
	padding: var(--space-lg);
}

/* Card variants */
.card-elevated {
	background: var(--surface-elevated);
	box-shadow: var(--shadow-1);
}
.card-bordered {
	border: 1px solid var(--border-strong);
}
.card-interactive {
	cursor: pointer;
}
.card-interactive:hover {
	border-color: var(--accent);
	box-shadow: 0 0 0 1px var(--accent), var(--shadow-sm);
}

/* ============================================================
   Page Header Component (consistent tab headers)
   ============================================================ */
.page-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: var(--space-lg);
	padding-bottom: var(--space-md);
	border-bottom: 1px solid var(--border);
}
.page-header-content {
	flex: 1;
}
.page-header-title {
	margin: 0;
	font-size: var(--font-size-lg);
	font-weight: 700;
	color: var(--text-primary);
	letter-spacing: -0.3px;
}
.page-header-desc {
	margin: var(--space-xs) 0 0;
	font-size: var(--font-size-sm);
	color: var(--text-muted);
}
.page-header-actions {
	display: flex;
	gap: var(--space-sm);
	margin-left: var(--space-md);
}

/* ============================================================
   Empty State Component
   ============================================================ */
.empty-state-box {
	text-align: center;
	padding: var(--space-2xl) var(--space-xl);
	color: var(--text-muted);
	background: var(--glass);
	border: 1px dashed var(--border-strong);
	border-radius: var(--radius);
}
.empty-state-box::before {
	content: '';
	display: block;
	width: 48px;
	height: 48px;
	margin: 0 auto var(--space-md);
	background: var(--glass-strong);
	border-radius: var(--radius);
	opacity: 0.6;
}
.empty-state-box h3 {
	margin: 0 0 var(--space-sm);
	font-size: var(--font-size-md);
	font-weight: 600;
	color: var(--text-secondary);
}
.empty-state-box p {
	margin: 0;
	font-size: var(--font-size-sm);
}

/* ============================================================
   Section Divider
   ============================================================ */
.section-divider {
	height: 1px;
	background: var(--border);
	margin: var(--space-lg) 0;
	border: none;
}

/* ============================================================
   Improved Table Styles (zebra striping)
   ============================================================ */
.table-striped tbody tr:nth-child(even) {
	background: var(--glass);
}
.table-striped tbody tr:hover {
	background: var(--glass-light);
}

/* ============================================================
   Provider Selection Row (Editor Tab)
   ============================================================ */
.provider-row {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	margin-bottom: var(--space-md);
}
.provider-row .field {
	flex: 1;
}

/* Model field wrapper */
.model-field-wrap {
	position: relative;
}
.model-load-error {
	color: var(--danger);
	font-size: var(--font-size-sm);
	margin-top: var(--space-xs);
}

/* AI Chat Section in Editor */
.ai-chat-section {
	margin-top: var(--space-lg);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--border);
}

/* Card actions row */
.card-actions-row {
	display: flex;
	gap: var(--space-xs);
}

/* Inline flex helper */
.flex-row {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
}
.flex-row .field {
	flex: 1;
}

/* Preview card */
.card-preview .preview-wrap { padding: var(--space-sm); }
.preview-wrap iframe {
	width: 100%;
	height: 440px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
	background: #fff;
	display: block;
}
.preview-body iframe,
.preview-frame {
	width: 100%;
	height: 440px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
	background: #fff;
	display: block;
}

/* Loading overlay */
.preview-loading { position: relative; }
.preview-loading .overlay {
	position: absolute;
	inset: var(--space-md);
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(10, 14, 26, 0.6);
	backdrop-filter: blur(4px);
	border-radius: var(--radius-sm);
	z-index: 20;
}

.spinner {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 3px solid var(--glass-strong);
	border-top-color: var(--accent);
	animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   Code Blocks
   ============================================================ */
.code-block {
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', monospace;
	font-size: var(--font-size-sm);
	line-height: 1.65;
	background: rgba(0, 0, 0, 0.25);
	padding: var(--space-md);
	border-radius: var(--radius-sm);
	color: var(--text-primary);
	border: 1px solid var(--border);
	overflow: auto;
	max-height: 420px;
	white-space: pre-wrap;
	word-break: break-word;
	tab-size: 2;
}

/* ============================================================
   Result Actions & Chips
   ============================================================ */
.result-actions {
	display: flex;
	gap: var(--space-sm);
	margin-bottom: var(--space-md);
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--glass);
	border: 1px solid var(--border);
	font-size: var(--font-size-xs);
	color: var(--text-secondary);
}

/* ============================================================
   Prompts
   ============================================================ */
.prompts {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}
.prompt-card { display: block; }
.prompt-card .code-block { white-space: pre-wrap; }

/* ============================================================
   Keywords Pillar Tab
   ============================================================ */
.kp-rtl-text { direction: rtl; text-align: right; }
.field-helper {
	font-size: var(--font-size-sm);
	color: var(--text-muted);
	margin-bottom: var(--space-xs);
}
.kp-competitor-section {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: var(--space-md);
	margin: var(--space-md) 0;
}
.kp-competitor-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--space-sm);
}
.kp-toggle-label {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-size: var(--font-size-sm);
	cursor: pointer;
}
.kp-competitor-actions {
	display: flex;
	gap: var(--space-sm);
	margin-bottom: var(--space-sm);
}
.kp-competitor-list { margin-top: var(--space-sm); }
.kp-competitor-row {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	margin-bottom: 6px;
}
.kp-competitor-row input { flex: 1; padding: 6px 8px; font-size: var(--font-size-sm); }
.kp-competitor-row .btn-remove { flex-shrink: 0; color: var(--danger); padding: 4px 8px; font-size: var(--font-size-sm); cursor: pointer; background: none; border: 1px solid var(--danger); border-radius: var(--radius); }
.kp-status {
	font-size: var(--font-size-sm);
	color: var(--text-muted);
	min-height: 20px;
	margin-top: var(--space-sm);
}
.kp-status-error { color: var(--danger); }

/* Website Source / Site Settings Sections */
.kp-section {
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	padding: var(--space-lg);
	margin-bottom: var(--space-lg);
	background: var(--glass);
}
.kp-section-header {
	margin-bottom: var(--space-sm);
}
.kp-section-header .field-label {
	margin: 0;
	font-weight: 600;
	font-size: var(--font-size-base);
}
.kp-input-row {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
}
.kp-input-row input {
	flex: 1;
}
.kp-status-area {
	margin-top: var(--space-sm);
	padding: var(--space-sm);
	background: rgba(0,0,0,0.15);
	border-radius: var(--radius-sm);
	font-size: var(--font-size-sm);
	color: var(--text-muted);
	min-height: 40px;
	max-height: 120px;
	overflow-y: auto;
	white-space: pre-wrap;
	word-break: break-word;
}
.kp-status-area:empty::before {
	content: 'Status will appear here...';
	opacity: 0.5;
}
.kp-status-area.kp-status-loading {
	color: var(--info, #60a5fa);
}
.kp-status-area.kp-status-success {
	color: var(--success, #4ade80);
}
.kp-status-area.kp-status-error {
	color: var(--danger);
}

/* Confidence indicators */
.kp-confidence-high { color: var(--success); }
.kp-confidence-medium { color: var(--warning); }
.kp-confidence-low { color: var(--muted); font-style: italic; }

/* Status success state */
.kp-status.kp-status-success { color: var(--success); }

/* Loading button state */
.btn-loading { opacity: 0.7; cursor: wait; }
.btn-loading::after {
	content: '';
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-left: 8px;
	border: 2px solid currentColor;
	border-radius: 50%;
	border-top-color: transparent;
	animation: kp-spin 0.8s linear infinite;
}
@keyframes kp-spin { to { transform: rotate(360deg); } }

/* Cannibalization warning */
.kp-cannibalization-warning {
	background: #FFF3CD;
	border: 1px solid #FFECB5;
	color: #856404;
	padding: var(--space-sm) var(--space-md);
	border-radius: var(--radius);
	margin-bottom: var(--space-md);
}

/* Past reports list */
.kp-past-reports-section {
	margin-top: var(--space-lg);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--border);
}
.kp-past-reports-list {
	max-height: 300px;
	overflow-y: auto;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--glass);
}
.kp-report-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-md);
	border-bottom: 1px solid var(--border);
	background: transparent;
	transition: background var(--transition-fast);
}
.kp-report-item:last-child {
	border-bottom: none;
}
.kp-report-item:hover {
	background: var(--glass-light);
}
.kp-report-meta {
	font-size: var(--font-size-sm);
	color: var(--muted);
}
.kp-report-actions {
	display: flex;
	gap: var(--space-xs);
}
[dir="rtl"] .kp-report-item {
	flex-direction: row-reverse;
}

/* Brand name row with fetch button */
.kp-brand-row {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
}
.kp-brand-row input {
	flex: 1;
}
.kp-brand-row .btn-sm {
	flex-shrink: 0;
}

/* Final Prompt Preview Accordion */
.kp-accordion {
	margin: var(--space-md) 0;
}
.kp-accordion summary {
	cursor: pointer;
	user-select: none;
}
.kp-accordion-content {
	margin-top: var(--space-sm);
	padding: var(--space-sm);
	background: rgba(0,0,0,0.1);
	border-radius: var(--radius-sm);
}
.kp-prompt-preview {
	background: var(--glass);
	padding: var(--space-sm);
	border-radius: var(--radius-sm);
	white-space: pre-wrap;
	font-size: var(--font-size-sm);
	max-height: 150px;
	overflow-y: auto;
	margin: 0;
	font-family: inherit;
}

.kp-model-info {
	font-size: var(--font-size-sm);
	color: var(--text-muted);
	margin-bottom: var(--space-sm);
}

/* Pillar Autocomplete Dropdown */
.kp-autocomplete-wrap {
	position: relative;
	width: 100%;
}
.kp-autocomplete-dropdown {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 100;
	background: var(--surface);
	border: 1px solid var(--border-strong);
	border-top: none;
	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
	max-height: 240px;
	overflow-y: auto;
	box-shadow: var(--shadow-2);
}
[dir="rtl"] .kp-autocomplete-dropdown {
	text-align: right;
}
.kp-autocomplete-item {
	padding: 10px 12px;
	cursor: pointer;
	border-bottom: 1px solid var(--border);
	transition: background var(--transition-fast);
}
.kp-autocomplete-item:last-child {
	border-bottom: none;
}
.kp-autocomplete-item:hover,
.kp-autocomplete-item.selected {
	background: var(--accent-glow);
}
.kp-autocomplete-item-domain {
	font-weight: 500;
	font-size: var(--font-size-sm);
	color: var(--text-primary);
	margin-bottom: 2px;
}
.kp-autocomplete-item-url {
	font-size: var(--font-size-xs);
	color: var(--text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.kp-autocomplete-item-brand {
	font-size: var(--font-size-xs);
	color: var(--accent);
	margin-top: 2px;
}
.kp-autocomplete-item-time {
	font-size: 10px;
	color: var(--text-muted);
	margin-top: 2px;
}
.kp-autocomplete-empty {
	padding: 12px;
	text-align: center;
	color: var(--text-muted);
	font-size: var(--font-size-sm);
}

/* View controls bar */
.kp-view-controls {
	display: flex;
	gap: var(--space-sm);
	margin-bottom: var(--space-md);
}
.kp-view-controls .btn-sm {
	padding: 4px 12px;
	font-size: var(--font-size-sm);
}
.kp-view-controls .btn-sm.active {
	background: var(--accent);
	color: #fff;
}

/* Pillar table */
.kp-table-wrap { overflow-x: auto; margin-bottom: var(--space-md); }
.kp-pillar-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--font-size-sm);
	direction: rtl;
	text-align: right;
}
.kp-pillar-table th {
	padding: 10px var(--space-md);
	border-bottom: 2px solid var(--border-strong);
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 600;
	position: sticky;
	top: 0;
	background: var(--bg);
	z-index: 1;
}
.kp-pillar-table td {
	padding: 8px var(--space-md);
	border-bottom: 1px solid var(--border);
	vertical-align: top;
}
.kp-pillar-table .kp-parent-row td {
	font-weight: 700;
	border-top: 2px solid var(--border-strong);
}
.kp-pillar-table a { color: var(--accent); text-decoration: underline; }

/* 12 pastel row colors for pillar groups */
.kp-pastel-0 { background-color: #FFF3E0; }
.kp-pastel-1 { background-color: #E8F5E9; }
.kp-pastel-2 { background-color: #E3F2FD; }
.kp-pastel-3 { background-color: #F3E5F5; }
.kp-pastel-4 { background-color: #FFF9C4; }
.kp-pastel-5 { background-color: #FFEBEE; }
.kp-pastel-6 { background-color: #E0F2F1; }
.kp-pastel-7 { background-color: #FCE4EC; }
.kp-pastel-8 { background-color: #F1F8E9; }
.kp-pastel-9 { background-color: #EDE7F6; }
.kp-pastel-10 { background-color: #E1F5FE; }
.kp-pastel-11 { background-color: #FBE9E7; }

/* ============================================================
   Keyword Research Tab
   ============================================================ */
.kr-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--font-size-sm);
}
.kr-table th {
	text-align: left;
	padding: 10px var(--space-md);
	border-bottom: 2px solid var(--border-strong);
	color: var(--text-muted);
	font-weight: 600;
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.kr-table td {
	padding: 10px var(--space-md);
	border-bottom: 1px solid var(--border);
}
.kr-table tbody tr {
	cursor: pointer;
	transition: all var(--transition-fast);
}
.kr-table tbody tr:hover {
	background: var(--glass-light);
}
.kr-table tbody tr.kr-selected {
	background: rgba(108, 140, 255, 0.08);
	border-left: 3px solid var(--accent);
}
.kr-competition-high { color: var(--danger); font-weight: 600; }
.kr-competition-medium { color: var(--warning); font-weight: 600; }
.kr-competition-low { color: var(--success); font-weight: 600; }
.kr-details-section { margin-bottom: var(--space-md); }
.kr-details-section h4 {
	margin: 0 0 6px;
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	font-weight: 600;
}
.kr-details-section ul { margin: 0; padding-left: 20px; }
.kr-details-section li {
	margin-bottom: 4px;
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
}

/* ============================================================
   Fieldset (Template Improver)
   ============================================================ */
fieldset {
	border: 1px solid var(--border-strong);
	padding: var(--space-md);
	border-radius: var(--radius-sm);
	margin-top: var(--space-md);
	background: var(--glass);
}
fieldset legend {
	font-weight: 600;
	font-size: var(--font-size-sm);
	padding: 0 var(--space-sm);
	color: var(--text-secondary);
	background: var(--surface);
	border-radius: var(--radius-sm);
}

/* ============================================================
   Auth Hidden - Hide elements until user is logged in
   ============================================================ */
.auth-hidden {
	display: none !important;
}

/* ============================================================
   Auth Overlay
   ============================================================ */
.auth-overlay {
	display: flex;
	position: fixed;
	inset: 0;
	z-index: 1000;
	align-items: center;
	justify-content: center;
	background: var(--bg);
	overflow: hidden;
}
/* Decorative blurred orbs behind auth */
.auth-overlay::before {
	content: '';
	position: absolute;
	width: 500px;
	height: 500px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(108, 140, 255, 0.12) 0%, transparent 70%);
	top: -100px;
	right: -100px;
	pointer-events: none;
}
.auth-overlay::after {
	content: '';
	position: absolute;
	width: 400px;
	height: 400px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(167, 139, 250, 0.08) 0%, transparent 70%);
	bottom: -80px;
	left: -80px;
	pointer-events: none;
}

.auth-container {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 440px;
	padding: var(--space-xl);
}
.auth-brand {
	text-align: center;
	margin-bottom: var(--space-2xl);
}
.auth-brand .name {
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -0.5px;
	background: linear-gradient(135deg, var(--accent), var(--accent-grad-mid));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.auth-brand .sub {
	font-size: var(--font-size-base);
	color: var(--text-muted);
	margin-top: var(--space-sm);
}

.auth-form {
	background: var(--surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-xl);
	padding: var(--space-2xl);
	box-shadow: var(--shadow-3), 0 0 0 1px rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(12px);
}
.auth-title {
	margin: 0 0 var(--space-xl);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.3px;
	text-align: center;
}
.auth-error {
	background: var(--danger-bg);
	border: 1px solid rgba(248, 113, 113, 0.3);
	color: var(--danger);
	padding: 10px 14px;
	border-radius: var(--radius-sm);
	font-size: var(--font-size-sm);
	margin-bottom: var(--space-md);
}
.auth-success {
	background: var(--success-bg);
	border: 1px solid rgba(52, 211, 153, 0.3);
	color: var(--success);
	padding: 10px 14px;
	border-radius: var(--radius-sm);
	font-size: var(--font-size-sm);
	margin-bottom: var(--space-md);
}
.auth-switch {
	text-align: center;
	font-size: var(--font-size-sm);
	color: var(--text-muted);
	margin-top: var(--space-lg);
	margin-bottom: 0;
}
.auth-switch a {
	color: var(--accent);
	text-decoration: none;
	font-weight: 500;
	transition: color var(--transition-fast);
}
.auth-switch a:hover {
	color: var(--accent-hover);
	text-decoration: underline;
}

/* Auth Download Banner */
.auth-download-banner {
	display: flex;
	align-items: center;
	gap: 12px;
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
	border: 1px solid rgba(99, 102, 241, 0.3);
	border-radius: var(--radius-lg);
	padding: 14px 18px;
	margin-top: 20px;
	animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
.auth-download-icon {
	font-size: 28px;
	flex-shrink: 0;
}
.auth-download-text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.auth-download-text strong {
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
}
.auth-download-text span {
	font-size: 12px;
	color: var(--text-muted);
	direction: rtl;
}
.auth-download-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
	color: white;
	padding: 8px 16px;
	border-radius: var(--radius-md);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: all 0.2s ease;
	box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}
.auth-download-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
	color: white;
}
.auth-download-btn svg {
	flex-shrink: 0;
}
@media (max-width: 480px) {
	.auth-download-banner {
		flex-direction: column;
		text-align: center;
		padding: 16px;
	}
	.auth-download-text {
		align-items: center;
	}
	.auth-download-btn {
		width: 100%;
		justify-content: center;
		padding: 12px 16px;
	}
}

/* ============================================================
   Animations & Transitions
   ============================================================ */
@keyframes fadeIn {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: translateY(0); }
}

.tab-content.active .panel,
.tab-content.active .card {
	animation: fadeIn 0.3s var(--transition-base) both;
}

.card {
	animation: none;
}

.auth-form {
	animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Stagger animation for cards in panels */
.panel-right .card:nth-child(1) { animation-delay: 0s; }
.panel-right .card:nth-child(2) { animation-delay: 0.05s; }
.panel-right .card:nth-child(3) { animation-delay: 0.1s; }
.panel-right .card:nth-child(4) { animation-delay: 0.15s; }
.panel-right .card:nth-child(5) { animation-delay: 0.2s; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
	.dashboard {
		grid-template-columns: 1fr;
		padding: 0 var(--space-md) var(--space-xl);
	}
	.panel-left {
		width: auto;
		position: static;
	}
}

/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
	display: none;
	width: 100%;
	padding: 12px 16px;
	background: var(--surface);
	border: none;
	border-bottom: 1px solid var(--border);
	color: var(--text-primary);
	font-family: inherit;
	font-size: var(--font-size-base);
	font-weight: 500;
	cursor: pointer;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.mobile-menu-toggle .hamburger-icon {
	font-size: 18px;
}

.mobile-menu-toggle .current-tab-name {
	flex: 1;
	text-align: left;
}

.mobile-menu-toggle .dropdown-arrow {
	font-size: 10px;
	transition: transform 0.2s;
}

.mobile-menu-toggle.open .dropdown-arrow {
	transform: rotate(180deg);
}

/* Mobile Menu Close Button - hidden by default, shown in mobile media query */
.mobile-menu-close {
	display: none;
}

@media (max-width: 768px) {
	.mobile-menu-toggle {
		display: flex;
	}

	.app-header {
		padding: var(--space-sm) var(--space-md);
		flex-wrap: nowrap;
		min-width: 0;
	}
	.brand {
		flex-shrink: 0;
		min-width: 0;
	}
	.header-actions {
		flex-shrink: 0;
		gap: 4px;
	}
	.header-actions .btn {
		padding: 6px 10px;
		font-size: 12px;
	}
	/* Hide email on mobile - takes too much space */
	.user-display {
		display: none !important;
	}

	/* Hide horizontal tabs on mobile, show as dropdown */
	.tab-nav {
		display: none;
		flex-direction: column;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--surface);
		border-bottom: 1px solid var(--border);
		box-shadow: var(--shadow-2);
		z-index: 100;
		max-height: 60vh;
		overflow-y: auto;
		padding: 8px;
	}

	.tab-nav.mobile-open {
		display: flex;
	}

	.tab-btn {
		padding: 12px 16px;
		font-size: var(--font-size-sm);
		text-align: left;
		justify-content: flex-start;
		border-radius: var(--radius-sm);
	}

	.tab-btn .tab-icon {
		font-size: 16px;
		margin-right: 10px;
	}

	.dashboard {
		margin: var(--space-md) auto;
	}
	.panel {
		padding: var(--space-md);
		border-radius: var(--radius);
	}
}

@media (max-width: 520px) {
	.app-header {
		padding: var(--space-xs) var(--space-sm);
		gap: var(--space-sm);
		overflow: visible;
	}
	.brand {
		gap: 8px;
		flex: 1;
		min-width: 0;
	}
	.logo {
		width: 28px;
		height: 28px;
		flex: 0 0 28px;
	}
	/* Hide brand text on small screens - just show logo */
	.brand-text {
		display: none;
	}
	.header-actions {
		gap: 2px;
		flex-shrink: 0;
	}
	.header-actions .btn {
		padding: 5px 8px;
		font-size: 11px;
		white-space: nowrap;
	}
	#logoutBtn {
		padding: 5px 6px;
	}
	.user-display {
		display: none;
	}
	/* Hide settings menu button text on very small screens */
	.settings-menu-btn {
		padding: 5px 8px;
	}
	.preview-wrap iframe,
	.preview-body iframe,
	.preview-frame {
		height: 300px;
	}
	.card-body { padding: var(--space-sm); }
	.row { flex-direction: column; gap: 0; }
}

/* ============================================================
   Light Theme
   ============================================================ */
.theme-light {
	--bg: #f5f7fb;
	--bg-secondary: #eef1f8;
	--surface: #ffffff;
	--surface-elevated: #f8f9fc;
	--border: rgba(0, 0, 0, 0.08);
	--border-strong: rgba(0, 0, 0, 0.15);
	--text-primary: #1a1f36;
	--text-secondary: #5e6687;
	--text-muted: #8792ab;
	--accent: #4f6ce5;
	--accent-hover: #4360d8;
	--accent-active: #3854cc;
	--accent-glow: rgba(79, 108, 229, 0.2);
	--success: #059669;
	--success-bg: rgba(5, 150, 105, 0.08);
	--danger: #dc2626;
	--danger-bg: rgba(220, 38, 38, 0.06);
	--warning: #d97706;
	--info: #0284c7;
	--glass: rgba(0, 0, 0, 0.02);
	--glass-light: rgba(0, 0, 0, 0.04);
	--glass-strong: rgba(0, 0, 0, 0.08);
	--header-bg: rgba(255, 255, 255, 0.9);
	--accent-grad-start: #4f6ce5;
	--accent-grad-mid: #7c5cdb;
	--accent-grad-end: #d946a8;
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
	--shadow-1: 0 2px 8px rgba(0, 0, 0, 0.06);
	--shadow-2: 0 4px 16px rgba(0, 0, 0, 0.08);
	--shadow-3: 0 8px 32px rgba(0, 0, 0, 0.1);
	--shadow-glow: 0 0 20px var(--accent-glow);
}

/* Light theme specific overrides */
.theme-light body::before,
.theme-light::before {
	background:
		radial-gradient(ellipse 80% 60% at 20% 10%, rgba(79, 108, 229, 0.04) 0%, transparent 60%),
		radial-gradient(ellipse 60% 50% at 80% 80%, rgba(124, 92, 219, 0.03) 0%, transparent 50%);
}
.theme-light .app-header {
	color: var(--text-primary);
	border-bottom: 1px solid var(--border);
}
.theme-light .app-header::after {
	background: linear-gradient(90deg, transparent, var(--accent-glow), transparent);
}
.theme-light .brand-text .name { color: var(--text-primary); }
.theme-light .brand-text .sub { color: var(--text-muted); }
.theme-light .logo { color: var(--accent); filter: none; }
.theme-light .app-header .btn {
	background: var(--glass-light);
	border: 1px solid var(--border);
	color: var(--text-secondary);
}
.theme-light .app-header .btn:hover {
	background: var(--glass-strong);
	color: var(--text-primary);
	border-color: var(--border-strong);
}
.theme-light .user-display { color: var(--text-secondary); }

.theme-light .field {
	background: var(--surface);
	color: var(--text-primary);
	border: 1px solid var(--border-strong);
}
.theme-light .field:hover {
	border-color: rgba(0, 0, 0, 0.2);
}
.theme-light .field::placeholder { color: var(--text-muted); }

.theme-light .btn {
	background: var(--surface);
	border: 1px solid var(--border-strong);
	color: var(--text-secondary);
}
.theme-light .btn:hover {
	background: var(--surface-elevated);
	color: var(--accent);
	border-color: var(--accent);
}
.theme-light .btn-primary {
	background: linear-gradient(135deg, var(--accent), var(--accent-hover));
	color: white;
	border: none;
}
.theme-light .btn-primary:hover {
	background: linear-gradient(135deg, var(--accent-hover), var(--accent-active));
	color: white;
}

.theme-light .code-block {
	background: var(--surface-elevated);
	color: var(--text-primary);
	border: 1px solid var(--border);
}
.theme-light .preview-wrap iframe,
.theme-light .preview-body iframe,
.theme-light .preview-frame {
	background: white;
	border: 1px solid var(--border-strong);
}

.theme-light .panel {
	background: var(--surface);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-1);
}
.theme-light .card {
	background: var(--surface);
	border: 1px solid var(--border);
}
.theme-light .card-header {
	background: var(--surface-elevated);
	border-bottom: 1px solid var(--border);
}

.theme-light ::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.12);
}
.theme-light ::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 0, 0, 0.2);
}

.theme-light .auth-overlay {
	background: var(--bg);
}
.theme-light .auth-overlay::before {
	background: radial-gradient(circle, rgba(79, 108, 229, 0.08) 0%, transparent 70%);
}
.theme-light .auth-overlay::after {
	background: radial-gradient(circle, rgba(124, 92, 219, 0.06) 0%, transparent 70%);
}
.theme-light .auth-brand .name {
	background: linear-gradient(135deg, var(--accent), var(--accent-grad-mid));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.theme-light ::selection {
	background: var(--accent);
	color: #fff;
}

/* Light theme overrides for new components */
.theme-light .empty-state,
.theme-light .empty-state-box,
.theme-light .task-empty-state {
	background: var(--surface-elevated);
	border-color: var(--border-strong);
}
.theme-light fieldset {
	background: var(--surface-elevated);
	border-color: var(--border-strong);
}
.theme-light fieldset legend {
	background: var(--surface);
}
.theme-light .kp-section {
	background: var(--surface-elevated);
}
.theme-light .kp-past-reports-list {
	background: var(--surface);
}
.theme-light .control-section {
	border-color: var(--border);
}

/* ============================================================
   Theme Transitions - Smooth Color Changes
   ============================================================ */
body,
.app-header,
.tab-nav,
.panel,
.card,
.dashboard-card,
.stat-card,
.field,
.btn,
.modal-content,
.toast-notification,
.dropdown,
.help-menu-dropdown,
.code-block,
.preview-wrap,
.auth-overlay,
.auth-container {
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ============================================================
   Enhanced Theme Toggle Button
   ============================================================ */
.theme-toggle-container {
	position: relative;
}

.theme-toggle-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-sm);
	color: rgba(255, 255, 255, 0.85);
	font-family: inherit;
	font-size: var(--font-size-sm);
	font-weight: 500;
	cursor: pointer;
	transition: all 0.25s ease;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	position: relative;
	overflow: hidden;
}

.theme-toggle-btn:hover {
	background: rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 255, 255, 0.25);
	transform: translateY(-1px);
	color: #fff;
}

.theme-toggle-btn:active {
	transform: translateY(0);
}

/* Theme icons */
.theme-icon {
	display: none;
	width: 18px;
	height: 18px;
	transition: transform 0.3s ease, opacity 0.2s ease;
}

.theme-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Show appropriate icon based on active state */
.theme-toggle-btn.theme-light-active .theme-icon-sun {
	display: block;
	animation: theme-icon-appear 0.3s ease;
}

.theme-toggle-btn.theme-dark-active .theme-icon-moon {
	display: block;
	animation: theme-icon-appear 0.3s ease;
}

.theme-toggle-btn.theme-auto-active .theme-icon-auto {
	display: block;
	animation: theme-icon-appear 0.3s ease;
}

@keyframes theme-icon-appear {
	0% {
		opacity: 0;
		transform: rotate(-30deg) scale(0.8);
	}
	100% {
		opacity: 1;
		transform: rotate(0) scale(1);
	}
}

/* Sun icon specific animations */
.theme-toggle-btn.theme-light-active .theme-icon-sun {
	color: #f59e0b;
}

.theme-toggle-btn.theme-light-active:hover .theme-icon-sun {
	animation: sun-pulse 0.6s ease-in-out;
}

@keyframes sun-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.15); }
}

/* Moon icon specific styling */
.theme-toggle-btn.theme-dark-active .theme-icon-moon {
	color: #a78bfa;
}

.theme-toggle-btn.theme-dark-active:hover .theme-icon-moon {
	animation: moon-glow 0.6s ease-in-out;
}

@keyframes moon-glow {
	0%, 100% { filter: drop-shadow(0 0 0 transparent); }
	50% { filter: drop-shadow(0 0 8px rgba(167, 139, 250, 0.6)); }
}

/* Auto icon specific styling */
.theme-toggle-btn.theme-auto-active .theme-icon-auto {
	color: var(--accent);
}

.theme-toggle-btn.theme-auto-active:hover .theme-icon-auto {
	animation: auto-spin 0.6s ease-in-out;
}

@keyframes auto-spin {
	0%, 100% { transform: rotate(0deg); }
	50% { transform: rotate(180deg); }
}

/* Theme label */
.theme-label {
	min-width: 34px;
	text-align: left;
}

/* Light theme overrides for toggle button */
.theme-light .theme-toggle-btn {
	background: var(--glass-light);
	border: 1px solid var(--border);
	color: var(--text-secondary);
}

.theme-light .theme-toggle-btn:hover {
	background: var(--glass-strong);
	color: var(--text-primary);
	border-color: var(--border-strong);
}

.theme-light .theme-toggle-btn.theme-light-active .theme-icon-sun {
	color: #d97706;
}

/* Glow effect behind toggle */
.theme-toggle-btn::before {
	content: '';
	position: absolute;
	inset: -2px;
	background: linear-gradient(135deg, var(--accent-glow), transparent);
	border-radius: inherit;
	opacity: 0;
	z-index: -1;
	transition: opacity 0.3s ease;
}

.theme-toggle-btn:hover::before {
	opacity: 1;
}

/* Mobile responsive */
@media (max-width: 600px) {
	.theme-label {
		display: none;
	}

	.theme-toggle-btn {
		padding: 8px 10px;
	}
}

/* ============================================================
   Color Palette Swatches
   ============================================================ */
.palette-header {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin-bottom: var(--space-md);
}

.palette-status {
	font-size: var(--font-size-xs);
	color: var(--text-muted);
}
.palette-status.success { color: var(--success, #4ade80); }
.palette-status.error { color: var(--danger); }
.palette-status.loading { color: var(--info, #60a5fa); }

.palette-swatches {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-sm);
}

.palette-swatch {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-sm);
	background: var(--glass);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
}

.swatch-color {
	width: 32px;
	height: 32px;
	border-radius: 4px;
	border: 1px solid var(--border-strong);
	flex-shrink: 0;
}

.swatch-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.swatch-label {
	font-size: var(--font-size-xs);
	font-weight: 600;
	color: var(--text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.swatch-value {
	font-family: 'JetBrains Mono', monospace;
	font-size: var(--font-size-xs);
	color: var(--text-primary);
}

.swatch-confidence {
	font-size: 10px;
	color: var(--text-muted);
}
.swatch-confidence.high { color: var(--success, #4ade80); }

.swatch-copy {
	padding: 4px 8px;
	font-size: 10px;
}

@media (max-width: 520px) {
	.palette-swatches {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   CTA Elements Selector
   ============================================================ */
.cta-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: var(--space-sm);
	font-size: var(--font-size-sm);
	color: var(--text-muted);
}

.cta-preview-toggle {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	cursor: pointer;
}

.selected-ctas-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin-top: var(--space-sm);
}

.selected-cta-tag {
	padding: 2px 8px;
	background: var(--glass);
	border: 1px solid var(--border);
	border-radius: 999px;
	font-size: var(--font-size-xs);
}

/* ============================================================
   CTA Modal
   ============================================================ */
.modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-lg);
}

.modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.modal-content {
	position: relative;
	width: 100%;
	max-width: 700px;
	max-height: calc(100vh - 48px);
	background: var(--surface);
	border-radius: var(--radius-xl);
	border: 1px solid var(--border-strong);
	box-shadow: var(--shadow-3), 0 0 0 1px rgba(255,255,255,0.05);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.modal-header {
	position: relative;
	padding: var(--space-xl) var(--space-xl) var(--space-lg);
	border-bottom: 1px solid var(--border);
	background: var(--glass);
}

.modal-header h2 {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.3px;
	padding-right: 40px;
}

.modal-subtitle {
	margin: 8px 0 0;
	font-size: var(--font-size-sm);
	color: var(--text-muted);
	line-height: 1.4;
}

.modal-close {
	position: absolute;
	top: var(--space-lg);
	right: var(--space-lg);
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--glass);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	font-size: 20px;
	color: var(--text-muted);
	cursor: pointer;
	transition: all var(--transition-fast);
}
.modal-close:hover {
	background: var(--glass-strong);
	color: var(--text-primary);
	border-color: var(--border-strong);
}

.modal-filter {
	padding: var(--space-md) var(--space-lg);
	border-bottom: 1px solid var(--border);
}

.cta-categories {
	flex: 1;
	overflow-y: auto;
	padding: var(--space-lg);
}

.cta-category {
	margin-bottom: var(--space-lg);
}

.cta-category-title {
	font-size: var(--font-size-base);
	font-weight: 600;
	margin: 0 0 var(--space-sm);
	color: var(--text-secondary);
}

.cta-category-desc {
	font-size: var(--font-size-xs);
	color: var(--text-muted);
	margin: 0 0 var(--space-sm);
}

.cta-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--space-sm);
}

.cta-tile {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
	padding: var(--space-sm) var(--space-md);
	background: var(--glass);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: all var(--transition-fast);
}

.cta-tile:hover:not(.disabled) {
	border-color: var(--accent);
	background: var(--glass-light, rgba(255,255,255,0.05));
}

.cta-tile.selected {
	border-color: var(--accent);
	background: rgba(108, 140, 255, 0.1);
}

.cta-tile.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.cta-tile-checkbox {
	padding-top: 2px;
}

.cta-tile-content {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.cta-tile-name {
	font-weight: 500;
	font-size: var(--font-size-sm);
}

.cta-tile-subtitle {
	font-size: var(--font-size-xs);
	color: var(--text-muted);
}

.cta-tile-missing {
	font-size: 10px;
	color: var(--danger);
	margin-top: 2px;
}

.modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: var(--space-sm);
	padding: var(--space-lg) var(--space-xl);
	border-top: 1px solid var(--border);
	background: var(--glass);
}

.modal-body {
	padding: var(--space-xl);
	overflow-y: auto;
	flex: 1;
}

/* ===== LOCAL SEO & SERP ANALYSIS STYLES ===== */

.checkbox-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	padding: var(--space-sm);
	background: var(--glass);
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
}

.checkbox-label {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	cursor: pointer;
	font-size: var(--font-size-sm);
	padding: var(--space-xs) var(--space-sm);
	border-radius: var(--radius-sm);
	transition: background var(--transition-fast);
}

.checkbox-label:hover {
	background: var(--glass-light);
}

.checkbox-label input[type="checkbox"] {
	width: 18px;
	height: 18px;
	cursor: pointer;
	accent-color: var(--accent);
}

.status-message {
	padding: 10px 12px;
	border-radius: 6px;
	font-size: var(--font-size-sm);
}

.status-message.loading {
	background: var(--bg-accent);
	color: var(--primary);
}

.status-message.success {
	background: rgba(9, 185, 150, 0.1);
	color: var(--success);
}

.status-message.error {
	background: rgba(211, 47, 47, 0.1);
	color: var(--danger);
}

.empty-state {
	text-align: center;
	padding: var(--space-2xl) var(--space-xl);
	color: var(--text-muted);
	background: var(--glass);
	border: 1px dashed var(--border-strong);
	border-radius: var(--radius-lg);
	margin: var(--space-md) 0;
}
.empty-state h3,
.empty-state-title {
	margin: 0 0 var(--space-sm);
	font-size: var(--font-size-md);
	font-weight: 600;
	color: var(--text-secondary);
}
.empty-state p {
	margin: 0 0 var(--space-md);
	font-size: var(--font-size-sm);
	max-width: 320px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.5;
}
.empty-state .btn {
	margin-top: var(--space-sm);
}
.empty-state::before {
	content: '';
	display: block;
	width: 48px;
	height: 48px;
	margin: 0 auto var(--space-md);
	background: linear-gradient(135deg, var(--glass-strong), var(--glass));
	border-radius: var(--radius);
	border: 1px solid var(--border);
}
.empty-state p {
	margin: 0;
	font-size: var(--font-size-sm);
	line-height: 1.5;
}

.data-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--font-size-sm);
}

.data-table th,
.data-table td {
	padding: 10px 12px;
	text-align: left;
	border-bottom: 1px solid var(--border);
}

.data-table th {
	font-weight: 600;
	background: var(--bg-accent);
	position: sticky;
	top: 0;
}

.data-table tr:hover td {
	background: var(--bg-accent);
}

.data-table td a {
	color: var(--primary);
	text-decoration: none;
}

.data-table td a:hover {
	text-decoration: underline;
}

.table-wrap {
	overflow-x: auto;
	max-height: 400px;
	overflow-y: auto;
	border: 1px solid var(--border);
	border-radius: 8px;
}

.features-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.feature-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	background: var(--bg-accent);
	border-radius: 20px;
	font-size: var(--font-size-xs);
	font-weight: 500;
}

.feature-tag.present {
	background: rgba(9, 185, 150, 0.15);
	color: var(--success);
}

.feature-tag.absent {
	background: rgba(211, 47, 47, 0.1);
	color: var(--danger);
	text-decoration: line-through;
}

.screenshots-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 16px;
}

.screenshot-card {
	border: 1px solid var(--border);
	border-radius: 8px;
	overflow: hidden;
}

.screenshot-card h5 {
	padding: 8px 12px;
	background: var(--bg-accent);
	margin: 0;
	font-size: var(--font-size-sm);
}

.screenshot-card img {
	width: 100%;
	display: block;
}

.modal-body {
	padding: var(--space-md) var(--space-lg);
}

/* Rating stars */
.rating-stars {
	color: #ffc107;
}

/* ===== PROVIDER BADGES ===== */

.provider-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 500;
	white-space: nowrap;
}

.provider-badge.configured {
	background: rgba(9, 185, 150, 0.15);
	color: var(--success);
}

.provider-badge.not-configured {
	background: rgba(211, 47, 47, 0.1);
	color: var(--danger);
}

.provider-badge.testing {
	background: rgba(33, 150, 243, 0.15);
	color: #2196f3;
}

/* Provider model sections */
.model-section {
	margin-bottom: 8px;
}

.model-section-label {
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--text-muted);
	padding: 4px 8px;
	background: var(--bg-accent);
}

/* Suno music section */
.suno-section {
	padding: 16px;
	background: var(--bg-accent);
	border-radius: 8px;
	margin-top: 12px;
}

.suno-section label {
	display: block;
	margin-bottom: 8px;
}

.suno-section textarea {
	min-height: 80px;
}

/* ===== TIMPILOT STYLES ===== */

.timpilot-layout {
	display: grid;
	grid-template-columns: 280px 1fr 260px;
	gap: var(--space-lg);
	height: calc(100vh - 160px);
	min-height: 500px;
	padding: var(--space-lg);
}

.timpilot-threads,
.timpilot-chat,
.timpilot-controls {
	background: var(--surface);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Threads Panel */
.timpilot-threads {
	display: flex;
	flex-direction: column;
}

.threads-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-md) var(--space-lg);
	border-bottom: 1px solid var(--border);
	background: var(--glass);
}

.threads-header h3 {
	margin: 0;
	font-size: var(--font-size-md);
	font-weight: 600;
}

.threads-list {
	flex: 1;
	overflow-y: auto;
	padding: var(--space-sm);
}

.thread-item {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-sm) var(--space-md);
	border-radius: var(--radius-sm);
	cursor: pointer;
	margin-bottom: var(--space-xs);
	transition: all var(--transition-fast);
	border: 1px solid transparent;
}

.thread-item:hover {
	background: var(--glass-light);
	border-color: var(--border);
}

.thread-item.active {
	background: rgba(108, 140, 255, 0.12);
	border-color: var(--accent);
	border-left-width: 3px;
}

.thread-content {
	flex: 1;
	min-width: 0;
}

.thread-title {
	font-size: var(--font-size-sm);
	font-weight: 500;
	margin-bottom: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.thread-date {
	font-size: var(--font-size-xs);
	color: var(--text-muted);
}

.thread-actions {
	display: none;
	gap: 4px;
	flex-shrink: 0;
}

.thread-item:hover .thread-actions {
	display: flex;
}

.thread-action-btn {
	background: transparent;
	border: none;
	padding: 6px 8px;
	border-radius: var(--radius-sm);
	cursor: pointer;
	font-size: 13px;
	color: var(--text-muted);
	transition: all var(--transition-fast);
}

.thread-action-btn:hover {
	background: var(--glass-strong);
	color: var(--text-primary);
}

.thread-action-btn.delete-btn:hover {
	color: var(--danger);
	background: rgba(248, 113, 113, 0.1);
}

/* Sidebar toggle for mobile */
.sidebar-toggle-btn {
	display: none;
	background: var(--glass);
	border: 1px solid var(--border);
	padding: 8px 12px;
	font-size: 18px;
	cursor: pointer;
	color: var(--text-secondary);
	border-radius: var(--radius-sm);
	transition: all var(--transition-fast);
}

.sidebar-toggle-btn:hover {
	background: var(--glass-strong);
	color: var(--text-primary);
}

/* Loading and error states */
.loading-indicator,
.error-state,
.chat-loading {
	padding: 20px;
	text-align: center;
	color: var(--text-muted);
	font-size: var(--font-size-sm);
}

.chat-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 200px;
}

.loading-spinner {
	width: 24px;
	height: 24px;
	border: 2px solid var(--border);
	border-top-color: var(--accent);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

.error-state {
	color: var(--danger);
}

.error-state button {
	margin-top: 8px;
	padding: 4px 12px;
	background: var(--accent);
	color: white;
	border: none;
	border-radius: var(--radius-sm);
	cursor: pointer;
}

/* Retry button for failed messages */
.message-retry {
	margin-top: 8px;
}

.retry-btn {
	padding: 6px 16px;
	background: var(--accent);
	color: white;
	border: none;
	border-radius: var(--radius-sm);
	cursor: pointer;
	font-size: var(--font-size-sm);
	transition: background var(--transition-fast);
}

.retry-btn:hover {
	background: var(--accent-hover);
}

/* Chat Panel */
.timpilot-chat {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0; /* Important for flex children */
}

.timpilot-chat-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-md) var(--space-lg);
	border-bottom: 1px solid var(--border);
	background: var(--glass);
}

.chat-model-info {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
}

.task-type-badge {
	display: inline-flex;
	padding: 4px 10px;
	border-radius: 12px;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	background: rgba(108, 140, 255, 0.15);
	color: var(--accent);
}

.chat-messages {
	flex: 1;
	overflow-y: auto;
	padding: var(--space-lg);
}

.chat-welcome {
	text-align: center;
	padding: var(--space-2xl) var(--space-xl);
}

.chat-welcome h2 {
	margin: 0 0 var(--space-sm);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.3px;
}

.chat-welcome p {
	margin: 0 0 var(--space-xl);
	color: var(--text-muted);
	font-size: var(--font-size-base);
	line-height: 1.5;
}

.welcome-suggestions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-sm);
	max-width: 600px;
	margin: 0 auto;
}

.suggestion-btn {
	padding: 10px 18px;
	background: var(--glass);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	color: var(--text-primary);
	font-size: var(--font-size-sm);
	cursor: pointer;
	transition: all var(--transition-fast);
}

.suggestion-btn:hover {
	background: rgba(108, 140, 255, 0.1);
	border-color: var(--accent);
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm);
}

.message-bubble {
	margin-bottom: var(--space-md);
	padding: var(--space-md) var(--space-lg);
	border-radius: var(--radius-lg);
	max-width: 80%;
	line-height: 1.6;
	font-size: var(--font-size-base);
}

.message-bubble.user {
	background: linear-gradient(135deg, var(--accent), var(--accent-hover));
	color: white;
	margin-left: auto;
	border-bottom-right-radius: 6px;
	box-shadow: 0 2px 8px var(--accent-glow);
}

.message-bubble.assistant {
	background: var(--surface-elevated);
	border: 1px solid var(--border);
	border-bottom-left-radius: 6px;
}

.message-bubble.system {
	background: var(--danger-bg);
	color: var(--danger);
	font-size: var(--font-size-sm);
	text-align: center;
	max-width: 100%;
	border-radius: var(--radius);
}

.message-bubble p {
	margin: 0 0 8px;
}

.message-bubble p:last-child {
	margin-bottom: 0;
}

.message-bubble code {
	background: rgba(0, 0, 0, 0.3);
	padding: 2px 6px;
	border-radius: 4px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.9em;
}

.message-bubble pre {
	background: rgba(0, 0, 0, 0.3);
	padding: 12px;
	border-radius: var(--radius-sm);
	overflow-x: auto;
	margin: 8px 0;
}

.message-bubble pre code {
	background: none;
	padding: 0;
}

.message-feedback {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--border);
	font-size: var(--font-size-xs);
	color: var(--text-muted);
}

.message-feedback button {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 16px;
	padding: 4px;
	border-radius: 4px;
	transition: background var(--transition-fast);
}

.message-feedback button:hover {
	background: var(--glass-light);
}

.message-citations {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--border);
	font-size: var(--font-size-xs);
}

.citation-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--accent);
	text-decoration: none;
	margin-right: 8px;
}

.citation-link:hover {
	text-decoration: underline;
}

.chat-input-area {
	display: flex;
	gap: var(--space-sm);
	padding: var(--space-md) var(--space-lg);
	border-top: 1px solid var(--border);
	background: var(--surface);
	align-items: flex-end;
}

.chat-input-model-select {
	flex-shrink: 0;
}

.compact-select {
	padding: 8px 12px;
	font-size: var(--font-size-sm);
	min-width: 140px;
	border-radius: var(--radius);
	background: var(--glass);
	border: 1px solid var(--border);
	color: var(--text-primary);
	cursor: pointer;
}

.compact-select:hover {
	border-color: var(--accent);
}

.chat-input-area textarea {
	flex: 1;
	resize: none;
	min-height: 44px;
	max-height: 200px;
}

.chat-input-area .btn {
	flex-shrink: 0;
}

/* Controls Panel */
.timpilot-controls {
	display: flex;
	flex-direction: column;
	padding: var(--space-lg);
	overflow-y: auto;
	background: var(--surface);
}

.control-section {
	margin-bottom: var(--space-lg);
	padding-bottom: var(--space-lg);
	border-bottom: 1px solid var(--border);
}
.control-section:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.control-section h4 {
	margin: 0 0 var(--space-sm);
	font-size: var(--font-size-xs);
	font-weight: 600;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.8px;
}

.control-section .checkbox-label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	font-size: var(--font-size-sm);
	cursor: pointer;
}

.control-section .checkbox-label input {
	cursor: pointer;
}

.memory-info {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
}

.task-classification-info {
	font-size: var(--font-size-sm);
}

.task-classification-info .text-muted {
	color: var(--text-muted);
}

.task-classification-info .task-detected {
	color: var(--accent);
	font-weight: 500;
}

/* Memory Modal */
.memory-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.memory-item {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 12px;
	background: var(--surface-elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
}

.memory-item-content {
	flex: 1;
}

.memory-item-type {
	font-size: var(--font-size-xs);
	color: var(--accent);
	text-transform: uppercase;
	font-weight: 500;
	margin-bottom: 4px;
}

.memory-item-key {
	font-weight: 500;
	margin-bottom: 2px;
}

.memory-item-value {
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
}

.memory-item-delete {
	background: none;
	border: none;
	color: var(--text-muted);
	cursor: pointer;
	padding: 4px;
	font-size: 16px;
}

.memory-item-delete:hover {
	color: var(--danger);
}

/* Typing Indicator */
.typing-indicator {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 12px 16px;
}

.typing-indicator span {
	width: 8px;
	height: 8px;
	background: var(--text-muted);
	border-radius: 50%;
	animation: typing 1.4s infinite ease-in-out;
}

.typing-indicator span:nth-child(1) { animation-delay: 0s; }
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing {
	0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
	30% { transform: translateY(-4px); opacity: 1; }
}

/* ===== THINKING CARD ===== */
.thinking-card {
	background: var(--surface-elevated);
	border: 1px solid var(--accent);
	border-radius: var(--radius);
	padding: 16px;
	margin: 12px 16px;
	animation: fadeIn 0.3s ease;
}

.thinking-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.thinking-spinner {
	width: 20px;
	height: 20px;
	border: 2px solid var(--glass-strong);
	border-top-color: var(--accent);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

.thinking-title {
	font-weight: 600;
	color: var(--accent);
}

.thinking-phases {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.phase {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border-radius: var(--radius-sm);
	font-size: var(--font-size-sm);
	color: var(--text-muted);
	transition: all var(--transition-fast);
}

.phase.active {
	background: var(--accent-glow);
	color: var(--accent);
}

.phase.complete {
	color: var(--success);
}

.phase.complete .phase-status::after {
	content: '✓';
	margin-left: 4px;
}

.phase.active .phase-status::after {
	content: '...';
	animation: pulse 1s infinite;
}

@keyframes pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

.phase-icon {
	font-size: 16px;
}

/* ===== STRATEGY PANELS ===== */
.strategy-info {
	margin-top: 12px;
	padding: 10px;
	background: var(--glass);
	border-radius: var(--radius-sm);
}

.recommended-model {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.recommended-model .label {
	color: var(--text-muted);
	font-size: var(--font-size-sm);
}

.recommended-model #autoRecommendedModel {
	color: var(--accent);
	font-weight: 500;
}

.strategy-panel {
	margin-top: 12px;
	padding: 10px;
	background: var(--glass);
	border-radius: var(--radius-sm);
}

.strategy-panel .field-label {
	display: block;
	font-size: var(--font-size-sm);
	color: var(--text-muted);
	margin-bottom: 4px;
	margin-top: 8px;
}

.strategy-panel .field-label:first-child {
	margin-top: 0;
}

/* ===== COMPLEXITY INFO ===== */
.complexity-info {
	margin-top: 12px;
	padding: 10px;
	background: var(--glass);
	border-radius: var(--radius-sm);
}

.complexity-level {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.complexity-level .label {
	color: var(--text-muted);
	font-size: var(--font-size-sm);
}

.complexity-badge {
	padding: 2px 8px;
	border-radius: var(--radius-sm);
	font-size: var(--font-size-xs);
	font-weight: 500;
}

.complexity-badge.low { background: var(--success-bg); color: var(--success); }
.complexity-badge.medium { background: rgba(251, 191, 36, 0.1); color: var(--warning); }
.complexity-badge.high { background: rgba(248, 113, 113, 0.1); color: var(--danger); }
.complexity-badge.very_high { background: var(--accent-glow); color: var(--accent); }

.models-used {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.models-used .label {
	color: var(--text-muted);
	font-size: var(--font-size-sm);
	flex-shrink: 0;
}

#modelsUsedList {
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
}

/* Responsive */
@media (max-width: 1200px) {
	.timpilot-layout {
		grid-template-columns: 220px 1fr 200px;
	}
}

@media (max-width: 900px) {
	.timpilot-layout {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr auto;
	}

	.timpilot-threads {
		display: none;
		position: fixed;
		top: 60px;
		left: 0;
		right: 0;
		bottom: 0;
		max-height: none;
		z-index: 100;
		background: var(--surface);
	}

	.timpilot-threads.show {
		display: flex;
	}

	.sidebar-toggle-btn {
		display: block;
	}

	.timpilot-controls {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 16px;
	}

	.control-section {
		flex: 1;
		min-width: 150px;
		margin-bottom: 0;
	}
}

/* ===== TEMPLATE REFINE PANEL ===== */
.refine-options {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	margin: var(--space-md) 0;
}

.refine-status {
	padding: var(--space-sm) var(--space-md);
	border-radius: var(--radius-sm);
	font-size: var(--font-size-sm);
	margin-top: var(--space-sm);
}

.refine-status.success {
	background: var(--success-bg);
	color: var(--success);
}

.refine-status.error {
	background: var(--danger-bg);
	color: var(--danger);
}

/* ===== VERSION HISTORY ===== */
.version-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	max-height: 280px;
	overflow-y: auto;
}

.version-item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
	padding: var(--space-sm) var(--space-md);
	background: var(--glass);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: all var(--transition-fast);
}

.version-item:hover {
	border-color: var(--accent);
	background: var(--glass-light);
}

.version-item.active {
	border-color: var(--accent);
	background: var(--accent-glow);
	border-left: 3px solid var(--accent);
}

.version-item-info {
	flex: 1;
	min-width: 0;
}

.version-item-label {
	font-weight: 500;
	font-size: var(--font-size-sm);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.version-item-time {
	font-size: var(--font-size-xs);
	color: var(--text-muted);
}

.version-item-actions {
	display: flex;
	gap: var(--space-xs);
}

.version-item-actions .btn {
	padding: 2px 8px;
	font-size: var(--font-size-xs);
}

/* ===== RESPONSIVE PREVIEW ===== */
.preview-controls {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin-left: auto;
}

.preview-device-btns {
	display: flex;
	gap: 2px;
	background: var(--glass);
	border-radius: var(--radius-sm);
	padding: 2px;
}

.preview-device-btn {
	padding: 4px 10px !important;
	font-size: var(--font-size-xs) !important;
	border: none !important;
	background: transparent !important;
	color: var(--text-muted);
}

.preview-device-btn:hover {
	color: var(--text-primary);
	background: var(--glass-light) !important;
}

.preview-device-btn.active {
	background: var(--accent) !important;
	color: #fff;
}

.preview-frame-container {
	display: flex;
	justify-content: center;
	padding: var(--space-md);
	background: var(--glass);
	border-radius: var(--radius-sm);
	min-height: 500px;
	overflow: auto;
}

.preview-frame-wrapper {
	background: #fff;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-2);
	transition: all var(--transition-base);
	overflow: hidden;
}

.preview-frame-wrapper.desktop {
	width: 100%;
	height: 600px;
}

.preview-frame-wrapper.tablet {
	width: 834px;
	height: 1112px;
}

.preview-frame-wrapper.tablet.rotated {
	width: 1112px;
	height: 834px;
}

.preview-frame-wrapper.mobile {
	width: 390px;
	height: 844px;
}

.preview-frame-wrapper.mobile.rotated {
	width: 844px;
	height: 390px;
}

.preview-frame-wrapper iframe {
	width: 100%;
	height: 100%;
	border: none;
}

/* Deep Site Analysis Styles (Keywords Pillar) */
.kp-deep-progress {
	background: var(--surface-alt);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: var(--space-sm);
	font-size: var(--font-size-sm);
}
.kp-deep-progress-step {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	padding: 4px 0;
	color: var(--text-muted);
}
.kp-deep-progress-step.done {
	color: var(--success);
}
.kp-deep-progress-step.in-progress {
	color: var(--accent);
}
.kp-deep-progress-step.skipped {
	color: var(--warning);
	text-decoration: line-through;
}
.kp-deep-results {
	background: var(--surface-alt);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: var(--space-sm);
}
.kp-deep-results-section {
	margin-bottom: var(--space-sm);
	padding-bottom: var(--space-sm);
	border-bottom: 1px solid var(--border);
}
.kp-deep-results-section:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}
.kp-deep-results-title {
	font-weight: 600;
	margin-bottom: var(--space-xs);
	font-size: var(--font-size-sm);
}
.kp-deep-results-content {
	font-size: var(--font-size-sm);
	color: var(--text-muted);
}
.kp-deep-url-list {
	max-height: 150px;
	overflow-y: auto;
	font-size: 12px;
	background: var(--surface);
	border-radius: var(--radius-sm);
	padding: var(--space-xs);
}
.kp-deep-url-item {
	padding: 2px 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.kp-deep-counts {
	display: flex;
	gap: var(--space-md);
	flex-wrap: wrap;
}
.kp-deep-count-item {
	background: var(--surface);
	padding: var(--space-xs) var(--space-sm);
	border-radius: var(--radius-sm);
	font-size: var(--font-size-sm);
}
.kp-deep-count-value {
	font-weight: 600;
	color: var(--accent);
}
.kp-deep-export-btns {
	display: flex;
	gap: var(--space-xs);
	margin-top: var(--space-sm);
}
.kp-deep-warning {
	background: #FFF3CD;
	border: 1px solid #FFECB5;
	color: #856404;
	padding: var(--space-xs);
	border-radius: var(--radius-sm);
	font-size: var(--font-size-sm);
	margin-top: var(--space-xs);
}
[dir="rtl"] .kp-deep-progress,
[dir="rtl"] .kp-deep-results {
	text-align: right;
}

/* ============================================================
   KP Ensemble Mode Toggle
   ============================================================ */
.kp-ensemble-toggle {
	margin-top: var(--space-md);
	padding: var(--space-md);
	background: var(--glass);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
}
.kp-toggle-label {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	cursor: pointer;
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
}
.kp-toggle-label input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--accent);
	cursor: pointer;
}
.kp-toggle-label input[type="checkbox"]:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.kp-ensemble-warning {
	color: var(--warning);
	font-size: var(--font-size-sm);
	margin-top: var(--space-xs);
}
#kpEnsembleConfig {
	margin-top: var(--space-sm);
	padding-top: var(--space-sm);
	border-top: 1px solid var(--border);
}
#kpEnsembleConfig .field-helper {
	margin-bottom: var(--space-xs);
}
#kpEnsembleConfig .field {
	margin-top: var(--space-xs);
}

/* ============================================================
   Local SEO Tab — Section Styles
   ============================================================ */
.local-seo-section {
	padding-bottom: var(--space-lg);
	margin-bottom: var(--space-lg);
	border-bottom: 1px solid var(--border);
}

.section-title-sm {
	font-size: var(--font-size-md);
	font-weight: 600;
	margin: 0 0 var(--space-md);
	color: var(--text-primary);
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.required {
	color: var(--danger);
}

/* ============================================================
   GeoGrid Local Ranking — BrightLocal-style
   ============================================================ */
.geogrid-section {
	padding-top: var(--space-lg);
}

.geogrid-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-sm);
}

.geogrid-options {
	margin-top: var(--space-md);
	padding: var(--space-sm) var(--space-md);
	background: var(--glass);
	border-radius: var(--radius-sm);
}

.toggle-label {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	cursor: pointer;
	font-size: var(--font-size-sm);
}

.toggle-label input[type="checkbox"] {
	width: 16px;
	height: 16px;
}

/* Saved Configurations */
.geogrid-saved-configs {
	padding-top: var(--space-md);
	border-top: 1px solid var(--border);
}

.saved-configs-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--space-sm);
}

.saved-configs-list {
	max-height: 200px;
	overflow-y: auto;
}

.saved-config-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-sm) var(--space-md);
	background: var(--glass);
	border-radius: var(--radius-sm);
	margin-bottom: var(--space-xs);
	cursor: pointer;
	transition: background var(--transition-fast);
}

.saved-config-item:hover {
	background: var(--glass-light);
}

.saved-config-info {
	flex: 1;
	min-width: 0;
}

.saved-config-name {
	font-weight: 500;
	font-size: var(--font-size-sm);
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.saved-config-meta {
	font-size: var(--font-size-xs);
	color: var(--text-muted);
}

.saved-config-actions {
	display: flex;
	gap: var(--space-xs);
}

/* GeoGrid Results Card */
.geogrid-results-card {
	border: 2px solid var(--accent);
}

.geogrid-results-header {
	background: linear-gradient(135deg, var(--accent-glow), transparent);
}

.geogrid-title-section {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.geogrid-header-actions {
	display: flex;
	gap: var(--space-xs);
}

/* Info Bar */
.geogrid-info-bar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md) var(--space-lg);
	padding: var(--space-md);
	background: var(--glass);
	border-radius: var(--radius-sm);
	margin-bottom: var(--space-lg);
}

.geogrid-info-item {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
}

.info-label {
	font-size: var(--font-size-xs);
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.info-value {
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--text-primary);
}

/* Metrics Panel */
.geogrid-metrics-panel {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: var(--space-md);
	margin-bottom: var(--space-xl);
}

.metric-card {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	padding: var(--space-md);
	background: var(--surface-elevated);
	border-radius: var(--radius);
	border: 1px solid var(--border);
	transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.metric-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm);
}

.metric-icon {
	font-size: 24px;
	opacity: 0.9;
}

.metric-content {
	flex: 1;
	min-width: 0;
}

.metric-value {
	font-size: var(--font-size-xl);
	font-weight: 700;
	color: var(--text-primary);
	line-height: 1.2;
}

.metric-label {
	font-size: var(--font-size-xs);
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Metric card colors */
.metric-avg .metric-value { color: var(--accent); }
.metric-best .metric-value { color: #22c55e; }
.metric-worst .metric-value { color: #ef4444; }
.metric-coverage .metric-value { color: #fbbf24; }
.metric-visibility .metric-value { color: #8b5cf6; }

/* Grid Visualization Container */
.geogrid-visualization-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--space-lg);
	background: var(--glass);
	border-radius: var(--radius);
	margin-bottom: var(--space-lg);
}

.geogrid-grid-container {
	display: flex;
	justify-content: center;
	width: 100%;
	max-width: 500px;
}

/* The Grid Itself */
.geogrid-grid {
	display: grid;
	gap: 3px;
	width: 100%;
	max-width: 500px;
	aspect-ratio: 1;
}

.geogrid-cell {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	font-size: var(--font-size-md);
	font-weight: 700;
	color: #fff;
	cursor: pointer;
	transition: all var(--transition-fast);
	text-shadow: 0 1px 2px rgba(0,0,0,0.3);
	min-height: 40px;
}

.geogrid-cell:hover {
	transform: scale(1.15);
	z-index: 10;
	box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.geogrid-cell.selected {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
}

/* Ranking Colors (BrightLocal-style) */
.geogrid-cell.rank-1-3 { background: #22c55e; }
.geogrid-cell.rank-4-7 { background: #86efac; color: #166534; text-shadow: none; }
.geogrid-cell.rank-8-10 { background: #fbbf24; color: #78350f; text-shadow: none; }
.geogrid-cell.rank-11-15 { background: #f97316; }
.geogrid-cell.rank-16-20 { background: #ef4444; }
.geogrid-cell.rank-none { background: #6b7280; }

/* Center cell (business location) */
.geogrid-cell.center-cell {
	position: relative;
}

.geogrid-cell.center-cell::after {
	content: '📍';
	position: absolute;
	top: -8px;
	right: -8px;
	font-size: 16px;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* Center marker info */
.geogrid-center-marker-info {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	margin-top: var(--space-md);
	font-size: var(--font-size-sm);
	color: var(--text-muted);
}

.center-marker-dot {
	font-size: 16px;
}

/* Legend */
.geogrid-legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm) var(--space-lg);
	padding: var(--space-md);
	background: var(--surface-elevated);
	border-radius: var(--radius-sm);
	margin-bottom: var(--space-lg);
}

.legend-title {
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--text-secondary);
	margin-right: var(--space-sm);
}

.legend-items {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm) var(--space-md);
}

.geogrid-legend .legend-item {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--font-size-xs);
	color: var(--text-secondary);
}

.geogrid-legend .legend-color {
	width: 16px;
	height: 16px;
	border-radius: 4px;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
}

/* Cell Details Panel */
.geogrid-cell-details {
	background: var(--surface-elevated);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	padding: var(--space-md);
	margin-top: var(--space-md);
	animation: slideUp 0.2s ease-out;
}

.cell-details-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--space-md);
	padding-bottom: var(--space-sm);
	border-bottom: 1px solid var(--border);
}

.cell-details-header h4 {
	margin: 0;
	font-size: var(--font-size-md);
	font-weight: 600;
}

.cell-details-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.cell-detail-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.detail-label {
	font-size: var(--font-size-sm);
	color: var(--text-muted);
}

.detail-value {
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--text-primary);
}

.cell-competitors {
	margin-top: var(--space-sm);
	padding-top: var(--space-sm);
	border-top: 1px solid var(--border);
}

.competitors-list {
	list-style: none;
	padding: 0;
	margin: var(--space-sm) 0 0;
}

.competitors-list li {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-xs) 0;
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
}

.competitors-list .rank-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 4px;
	font-size: var(--font-size-xs);
	font-weight: 600;
	color: #fff;
}

/* Competitor Section */
.geogrid-competitor-section {
	border-top: 1px solid var(--border);
	padding-top: var(--space-md);
}

.competitor-section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--space-sm);
}

.competitor-section-header h4 {
	margin: 0;
	font-size: var(--font-size-md);
	font-weight: 600;
}

.competitor-panel {
	padding: var(--space-md);
	background: var(--glass);
	border-radius: var(--radius-sm);
}

.competitor-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.competitor-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-sm) var(--space-md);
	background: var(--surface);
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
}

.competitor-name {
	font-weight: 500;
	color: var(--text-primary);
}

.competitor-stats {
	display: flex;
	gap: var(--space-md);
	font-size: var(--font-size-xs);
	color: var(--text-muted);
}

.competitor-stat {
	display: flex;
	align-items: center;
	gap: 4px;
}

.competitor-stat strong {
	color: var(--text-primary);
}

/* History List */
.geogrid-history-list {
	max-height: 300px;
	overflow-y: auto;
}

.history-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-md);
	background: var(--glass);
	border-radius: var(--radius-sm);
	margin-bottom: var(--space-sm);
	cursor: pointer;
	transition: background var(--transition-fast);
}

.history-item:hover {
	background: var(--glass-light);
}

.history-info {
	flex: 1;
	min-width: 0;
}

.history-title {
	font-weight: 500;
	font-size: var(--font-size-sm);
	color: var(--text-primary);
	margin-bottom: 4px;
}

.history-meta {
	display: flex;
	gap: var(--space-md);
	font-size: var(--font-size-xs);
	color: var(--text-muted);
}

.history-stats {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.history-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--space-xs) var(--space-sm);
	background: var(--surface-elevated);
	border-radius: var(--radius-sm);
}

.history-stat-value {
	font-size: var(--font-size-md);
	font-weight: 600;
}

.history-stat-label {
	font-size: 10px;
	color: var(--text-muted);
	text-transform: uppercase;
}

.history-actions {
	display: flex;
	gap: var(--space-xs);
	margin-left: var(--space-md);
}

/* Badge styles */
.badge-info {
	background: var(--accent);
	color: #fff;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: var(--font-size-xs);
	font-weight: 500;
}

.badge-warning {
	background: var(--warning);
	color: #000;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: var(--font-size-xs);
	font-weight: 500;
}

/* Empty state */
.empty-state-small {
	text-align: center;
	padding: var(--space-lg);
	color: var(--text-muted);
}

.empty-state-small .empty-icon {
	font-size: 32px;
	margin-bottom: var(--space-sm);
	opacity: 0.5;
}

.empty-state-small p {
	margin: 0;
	font-size: var(--font-size-sm);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
	.geogrid-metrics-panel {
		grid-template-columns: repeat(2, 1fr);
	}

	.metric-card {
		flex-direction: column;
		text-align: center;
		padding: var(--space-sm);
	}

	.metric-icon {
		font-size: 20px;
	}

	.metric-value {
		font-size: var(--font-size-lg);
	}

	.geogrid-info-bar {
		flex-direction: column;
		gap: var(--space-sm);
	}

	.geogrid-legend {
		flex-direction: column;
		align-items: flex-start;
	}

	.legend-items {
		width: 100%;
		justify-content: center;
	}

	.geogrid-cell {
		font-size: var(--font-size-sm);
		min-height: 32px;
	}
}

@media (max-width: 480px) {
	.geogrid-metrics-panel {
		grid-template-columns: 1fr;
	}

	.metric-card {
		flex-direction: row;
		text-align: left;
	}
}

/* Light theme overrides */
.theme-light .geogrid-results-card {
	border-color: var(--accent);
}

.theme-light .geogrid-cell.rank-4-7 {
	background: #86efac;
	color: #166534;
}

.theme-light .geogrid-cell.rank-8-10 {
	background: #fbbf24;
	color: #78350f;
}

.theme-light .metric-card {
	background: var(--surface);
}

.theme-light .geogrid-visualization-container {
	background: var(--surface-elevated);
}

.theme-light .geogrid-legend {
	background: var(--surface);
}

/* ===== LOCAL SEO SUBTABS ===== */
/* ===== LOCAL SEO TAB - MODERN FULL-WIDTH DESIGN ===== */

/* Page Container */
.local-seo-page {
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	padding: 0;
}

/* Page Header */
.local-seo-page-header {
	padding: 32px 32px 24px;
	border-bottom: 1px solid var(--border);
	background: linear-gradient(135deg, var(--surface) 0%, var(--surface-alt) 100%);
}

.local-seo-page-header .page-title {
	margin: 0 0 8px 0;
	font-size: 28px;
	font-weight: 700;
	color: var(--text);
}

.local-seo-page-header .page-subtitle {
	margin: 0;
	font-size: 15px;
	color: var(--text-secondary);
}

/* Navigation Pills */
.local-seo-nav {
	display: flex;
	gap: 8px;
	padding: 16px 32px;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.local-seo-nav::-webkit-scrollbar {
	height: 4px;
}

.local-seo-nav::-webkit-scrollbar-thumb {
	background: var(--border);
	border-radius: 2px;
}

.local-seo-nav-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--text-secondary);
	font-size: 14px;
	font-weight: 500;
	border-radius: 100px;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.local-seo-nav-btn:hover {
	background: var(--surface-hover);
	border-color: var(--border-hover);
	color: var(--text);
}

.local-seo-nav-btn.active {
	background: var(--primary);
	border-color: var(--primary);
	color: white;
	box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.25);
}

.local-seo-nav-btn .nav-icon {
	font-size: 16px;
}

.local-seo-nav-btn .nav-label {
	font-weight: 600;
}

/* Subtab Content */
.local-seo-subtab-content {
	display: none;
}

.local-seo-subtab-content.active {
	display: block;
	padding: 32px;
}

/* Grid Layout - 2 Cards + Results Below */
.local-seo-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.local-seo-results-area {
	grid-column: 1 / -1;
}

/* Cards */
.local-seo-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
	transition: box-shadow 0.2s ease;
}

.local-seo-card:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.local-seo-card .card-header {
	padding: 24px 24px 16px;
	background: var(--surface);
}

.local-seo-card .card-header h3 {
	margin: 0 0 4px 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--text);
}

.local-seo-card .card-desc {
	margin: 0;
	font-size: 14px;
	color: var(--text-secondary);
}

.local-seo-card .card-body {
	padding: 0 24px 24px;
}

/* Form Elements */
.local-seo-card .form-group {
	margin-bottom: 20px;
}

.local-seo-card .form-row-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 20px;
}

.local-seo-card .field-label {
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
}

.local-seo-card .field-label .required {
	color: #ef4444;
}

.local-seo-card .field-label .optional {
	font-weight: 400;
	color: var(--text-muted);
}

.local-seo-card .field {
	width: 100%;
	padding: 12px 16px;
	font-size: 15px;
	border: 2px solid var(--border);
	border-radius: 10px;
	background: var(--input-bg);
	color: var(--text);
	transition: all 0.2s ease;
}

.local-seo-card .field:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.1);
}

.local-seo-card .field.error {
	border-color: #ef4444;
}

.local-seo-card .field-hint {
	margin-top: 6px;
	font-size: 13px;
	color: var(--text-muted);
}

.local-seo-card .field-error {
	margin-top: 6px;
	font-size: 13px;
	color: #ef4444;
	display: none;
}

.local-seo-card .field-error.visible {
	display: block;
}

/* Buttons */
.btn-full {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	padding: 14px 24px;
	font-size: 15px;
	font-weight: 600;
	border-radius: 10px;
	margin-top: 8px;
}

.btn-full .btn-loading {
	display: none;
}

.btn-full.loading .btn-text,
.btn-full.loading .btn-icon {
	display: none;
}

.btn-full.loading .btn-loading {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* Spinner */
.spinner {
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255,255,255,0.3);
	border-top-color: white;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

/* Status Messages */
.local-seo-card .status-message {
	margin-top: 16px;
	padding: 12px 16px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 500;
}

.local-seo-card .status-message.success {
	background: #dcfce7;
	color: #166534;
	border: 1px solid #86efac;
}

.local-seo-card .status-message.error {
	background: #fef2f2;
	color: #991b1b;
	border: 1px solid #fca5a5;
}

.local-seo-card .status-message.loading {
	background: #eff6ff;
	color: #1e40af;
	border: 1px solid #93c5fd;
}

/* Saved Configs */
.saved-configs-details {
	margin-top: 20px;
	border-top: 1px solid var(--border);
	padding-top: 16px;
}

.saved-configs-details summary {
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	color: var(--text-secondary);
	padding: 8px 0;
}

.saved-configs-details summary:hover {
	color: var(--text);
}

.saved-configs-list {
	margin: 12px 0;
}

.empty-hint {
	padding: 20px;
	text-align: center;
	color: var(--text-muted);
	font-size: 14px;
	background: var(--surface-alt);
	border-radius: 10px;
}

/* Results Area */
.local-seo-results-area .card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 16px;
	overflow: hidden;
	margin-top: 24px;
}

.local-seo-results-area .card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 24px;
	border-bottom: 1px solid var(--border);
	background: var(--surface-alt);
}

.local-seo-results-area .card-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
}

.local-seo-results-area .card-body {
	padding: 24px;
}

.local-seo-results-area .empty-state {
	padding: 80px 24px;
	text-align: center;
}

.local-seo-results-area .empty-state-icon {
	font-size: 56px;
	margin-bottom: 20px;
	opacity: 0.4;
}

.local-seo-results-area .empty-state p {
	color: var(--text-muted);
	font-size: 16px;
	max-width: 400px;
	margin: 0 auto;
	line-height: 1.5;
}

/* Responsive Design */
@media (max-width: 1200px) {
	.local-seo-grid {
		gap: 20px;
	}
}

@media (max-width: 900px) {
	.local-seo-grid {
		grid-template-columns: 1fr;
	}

	.local-seo-page-header {
		padding: 24px;
	}

	.local-seo-nav {
		padding: 12px 24px;
	}

	.local-seo-subtab-content.active {
		padding: 24px;
	}
}

@media (max-width: 600px) {
	.local-seo-page-header {
		padding: 20px 16px;
	}

	.local-seo-page-header .page-title {
		font-size: 22px;
	}

	.local-seo-nav {
		padding: 12px 16px;
		gap: 6px;
	}

	.local-seo-nav-btn {
		padding: 10px 14px;
		font-size: 13px;
	}

	.local-seo-nav-btn .nav-label {
		display: none;
	}

	.local-seo-subtab-content.active {
		padding: 16px;
	}

	.local-seo-card .card-header {
		padding: 20px 20px 12px;
	}

	.local-seo-card .card-body {
		padding: 0 20px 20px;
	}

	.local-seo-card .form-row-2 {
		grid-template-columns: 1fr;
		gap: 12px;
	}
}

/* ===== CITATION BUILDER STYLES ===== */
.citations-builder-container {
	padding: var(--space-lg);
}

.citations-builder-container .page-header {
	margin-bottom: var(--space-lg);
}

.citations-layout {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: var(--space-lg);
}

.citations-input-panel,
.citations-results-panel {
	display: flex;
	flex-direction: column;
}

.citations-actions {
	display: flex;
	gap: var(--space-sm);
	margin-top: var(--space-md);
}

.quick-copy-grid {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.quick-copy-item {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.copy-field-wrapper {
	display: flex;
	gap: var(--space-xs);
	align-items: flex-start;
}

.copy-field-wrapper .field {
	flex: 1;
}

.copy-field-wrapper .btn {
	flex-shrink: 0;
}

.citation-filters {
	display: flex;
	gap: var(--space-sm);
}

.citation-filters .field-sm {
	font-size: var(--font-sm);
	padding: var(--space-xs) var(--space-sm);
}

.citation-impact-panel {
	padding: var(--space-md);
	background: var(--glass);
	border-radius: var(--radius-md);
	border: 1px solid var(--border);
	margin-bottom: var(--space-md);
}

.citation-impact-panel .impact-header h4 {
	margin: 0 0 var(--space-sm) 0;
	font-size: var(--font-md);
}

.impact-metrics {
	display: flex;
	gap: var(--space-lg);
}

.impact-metric {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.impact-value {
	font-size: var(--font-xl);
	font-weight: 700;
	color: var(--primary);
}

.impact-label {
	font-size: var(--font-xs);
	color: var(--text-muted);
}

.impact-potential {
	padding: var(--space-xs) var(--space-sm);
	border-radius: var(--radius-md);
	font-size: var(--font-sm);
}

.impact-high {
	background: var(--success-bg);
	color: var(--success);
}

.impact-medium {
	background: var(--warning-bg);
	color: var(--warning);
}

.impact-low {
	background: var(--error-bg);
	color: var(--error);
}

.citation-directory-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	max-height: 600px;
	overflow-y: auto;
	padding-right: var(--space-xs);
}

.citation-category {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.citation-category-header {
	padding: var(--space-sm) var(--space-md);
	background: var(--glass);
	border-radius: var(--radius-md);
}

.citation-category-header h4 {
	margin: 0;
	font-size: var(--font-md);
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.citation-category-header .badge {
	font-size: var(--font-xs);
	padding: 2px 8px;
}

.citation-category-header .category-desc {
	display: block;
	font-size: var(--font-xs);
	color: var(--text-muted);
	margin-top: var(--space-xs);
}

.citation-directory-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--space-sm);
}

.citation-directory-item {
	padding: var(--space-sm) var(--space-md);
	background: var(--surface-elevated);
	border-radius: var(--radius-md);
	border: 1px solid var(--border-light);
	transition: all 0.2s ease;
}

.citation-directory-item:hover {
	border-color: var(--primary);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.citation-directory-item.priority-1 {
	border-left: 3px solid var(--success);
}

.citation-directory-item.priority-2 {
	border-left: 3px solid var(--warning);
}

.citation-directory-item.priority-3 {
	border-left: 3px solid var(--text-muted);
}

.directory-header {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin-bottom: var(--space-xs);
}

.directory-icon {
	font-size: var(--font-lg);
}

.directory-name {
	font-weight: 600;
	flex: 1;
}

.directory-priority {
	font-size: var(--font-xs);
	padding: 2px 6px;
	background: var(--glass);
	border-radius: var(--radius-sm);
	color: var(--text-muted);
}

.directory-notes {
	font-size: var(--font-xs);
	color: var(--text-muted);
	margin-bottom: var(--space-sm);
}

.directory-actions {
	display: flex;
	gap: var(--space-xs);
}

.directory-actions .btn-xs {
	font-size: var(--font-xs);
	padding: 4px 8px;
}

.consistency-tip {
	display: flex;
	gap: var(--space-md);
	padding: var(--space-md);
	background: var(--glass);
	border-radius: var(--radius-md);
	border: 1px solid var(--border-light);
}

.consistency-tip .tip-icon {
	font-size: var(--font-xl);
}

.consistency-tip .tip-content ul {
	margin: var(--space-sm) 0 0 0;
	padding-left: var(--space-lg);
}

.consistency-tip .tip-content li {
	font-size: var(--font-sm);
	color: var(--text-muted);
	margin-bottom: var(--space-xs);
}

.export-buttons {
	display: flex;
	gap: var(--space-sm);
	flex-wrap: wrap;
}

@media (max-width: 1024px) {
	.citations-layout {
		grid-template-columns: 1fr;
	}

	.citation-directory-grid {
		grid-template-columns: 1fr;
	}

	.citation-directory-list {
		max-height: none;
	}
}

/* ===== REVIEW MANAGEMENT STYLES ===== */
.reviews-section {
	margin-bottom: var(--space-lg);
	padding: var(--space-md);
	background: var(--glass);
	border-radius: var(--radius-md);
	border: 1px solid var(--border);
}

.review-platform-fields {
	margin-top: var(--space-md);
}

.platform-fields {
	animation: fadeIn 0.2s ease;
}

.link-display {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
}

.link-display .field {
	flex: 1;
}

.review-link-result {
	padding: var(--space-md);
	background: var(--surface-elevated);
	border-radius: var(--radius-md);
	border: 1px solid var(--border-light);
}

.template-type-toggle {
	display: flex;
	gap: var(--space-xs);
	padding: var(--space-xs);
	background: var(--glass);
	border-radius: var(--radius-md);
	border: 1px solid var(--border);
}

.toggle-btn {
	flex: 1;
	padding: var(--space-sm) var(--space-md);
	border: none;
	background: transparent;
	color: var(--text-muted);
	font-weight: 500;
	font-size: var(--font-sm);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: all 0.2s ease;
}

.toggle-btn:hover {
	color: var(--text);
	background: var(--surface-hover);
}

.toggle-btn.active {
	background: var(--primary);
	color: white;
}

/* QR Code Display */
#qrCodeContainer {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	border: 1px solid var(--border);
}

#qrCodeContainer canvas {
	display: block;
}

.qr-suggestions {
	padding: var(--space-md);
	background: var(--surface);
	border-radius: var(--radius-md);
	border: 1px solid var(--border);
}

.qr-suggestions h4 {
	margin: 0 0 var(--space-sm) 0;
	color: var(--text);
}

.qr-suggestions ul {
	margin: 0;
	color: var(--text-muted);
}

.qr-suggestions li {
	margin-bottom: var(--space-xs);
}

/* Response Templates */
.response-template-tabs {
	display: flex;
	gap: var(--space-xs);
	padding: var(--space-xs);
	background: var(--glass);
	border-radius: var(--radius-md);
	border: 1px solid var(--border);
}

.response-tab-btn {
	flex: 1;
	padding: var(--space-sm) var(--space-md);
	border: none;
	background: transparent;
	color: var(--text-muted);
	font-weight: 500;
	font-size: var(--font-sm);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: all 0.2s ease;
}

.response-tab-btn:hover {
	color: var(--text);
	background: var(--surface-hover);
}

.response-tab-btn.active {
	background: var(--primary);
	color: white;
}

.response-section {
	animation: fadeIn 0.2s ease;
}

#responsePreview {
	padding: var(--space-md);
	background: var(--surface-elevated);
	border-radius: var(--radius-md);
	border: 1px solid var(--border-light);
}

#responseTips {
	margin-top: var(--space-md);
	padding: var(--space-md);
	background: var(--surface);
	border-radius: var(--radius-md);
	border: 1px solid var(--border);
}

#responseTips h4 {
	margin: 0 0 var(--space-sm) 0;
	color: var(--text);
}

#responseTips ul {
	margin: 0;
	color: var(--text-muted);
}

#responseTips li {
	margin-bottom: var(--space-xs);
}

/* Template Preview */
.template-subject {
	font-weight: 500;
	color: var(--text);
}

.template-body,
.sms-message {
	color: var(--text-secondary);
	line-height: 1.6;
}

#smsStats {
	display: flex;
	gap: var(--space-md);
	padding: var(--space-sm);
	background: var(--surface);
	border-radius: var(--radius-sm);
}

/* Light theme overrides for reviews */
.theme-light .reviews-section {
	background: var(--surface);
}

.theme-light .review-link-result {
	background: var(--surface-elevated);
}

.theme-light #qrCodeContainer {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
	.local-seo-subtabs {
		flex-wrap: wrap;
		max-width: 100%;
	}

	.local-seo-subtab-btn {
		flex: 1 1 calc(33% - var(--space-xs));
		min-width: auto;
		padding: var(--space-xs) var(--space-sm);
		font-size: var(--font-xs);
	}

	.link-display {
		flex-direction: column;
	}

	.link-display .btn {
		width: 100%;
	}

	.template-type-toggle,
	.response-template-tabs {
		flex-wrap: wrap;
	}

	.toggle-btn,
	.response-tab-btn {
		flex: 1 1 calc(50% - var(--space-xs));
	}
}

/* ===== TASK MANAGER STYLES ===== */

/* Break out of dashboard grid constraints */
#task-manager-tab {
	grid-column: 1 / -1;
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
	box-sizing: border-box;
	padding: 0 var(--space-xl);
}

.task-manager-container {
	width: 100%;
	max-width: 100%;
	padding: var(--space-lg) 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - 160px);
	box-sizing: border-box;
}

.task-manager-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--space-xl);
	padding: var(--space-lg);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	flex-wrap: wrap;
	gap: var(--space-md);
	position: relative;
	z-index: 10;
	/* Fixed: Added z-index to ensure toolbar is not clipped */
}

.task-manager-title {
	display: flex;
	align-items: center;
	gap: var(--space-md);
}

.task-manager-title h2 {
	margin: 0;
	font-size: var(--font-size-2xl);
	font-weight: 700;
	background: linear-gradient(135deg, var(--text-primary), var(--accent));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.board-name {
	color: var(--text-muted);
	font-size: var(--font-size-sm);
	padding: 4px 12px;
	background: var(--glass-light);
	border-radius: var(--radius-sm);
}

.task-manager-actions {
	display: flex;
	align-items: center;
	gap: var(--space-md);
}

.view-toggle {
	display: flex;
	background: var(--glass);
	border-radius: var(--radius-sm);
	padding: 3px;
	border: 1px solid var(--border);
}

.view-toggle-btn {
	border: none;
	background: transparent;
	padding: 8px 16px;
	font-weight: 500;
	transition: all var(--transition-fast);
}

.view-toggle-btn:hover {
	color: var(--text-primary);
}

.view-toggle-btn.active {
	background: linear-gradient(135deg, var(--accent), var(--accent-hover));
	color: white;
	box-shadow: 0 2px 8px var(--accent-glow);
}

.notification-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	background: var(--danger);
	color: white;
	font-size: 11px;
	font-weight: 600;
	border-radius: 9px;
	margin-right: 4px;
}

/* Task Filters */
.task-filters {
	display: flex;
	gap: var(--space-md);
	margin-bottom: var(--space-xl);
	flex-wrap: wrap;
	padding: var(--space-md);
	background: var(--glass);
	border-radius: var(--radius);
	border: 1px solid var(--border);
}

.task-filters select,
.task-filters input[type="text"],
.task-filters input[type="search"] {
	padding: 8px 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--text-primary);
	font-size: var(--font-size-sm);
	transition: all var(--transition-fast);
}

.task-filters select:hover,
.task-filters input:hover {
	border-color: var(--text-muted);
}

.task-filters select:focus,
.task-filters input:focus {
	border-color: var(--accent);
	outline: none;
	box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Kanban View */
.kanban-view {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: var(--space-md);
	min-height: 0;
}

.kanban-columns {
	display: flex;
	gap: var(--space-lg);
	flex: 1;
	min-height: 500px;
	padding-right: var(--space-lg);
}

.kanban-column {
	flex: 0 0 320px;
	background: linear-gradient(180deg, var(--surface) 0%, var(--surface-alt) 100%);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	display: flex;
	flex-direction: column;
	height: fit-content;
	max-height: calc(100vh - 280px);
	min-height: 300px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	transition: all var(--transition-base);
}

.kanban-column:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.kanban-column.drag-over {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-glow), 0 8px 24px rgba(0, 0, 0, 0.15);
	transform: scale(1.02);
}

.column-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-md) var(--space-lg);
	border-bottom: 2px solid var(--border);
	background: linear-gradient(135deg, var(--glass) 0%, var(--glass-light) 100%);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.column-title {
	font-weight: 700;
	font-size: var(--font-size-base);
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	color: var(--text-primary);
}

.column-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 8px;
	background: linear-gradient(135deg, var(--accent), var(--accent-hover));
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	color: white;
	box-shadow: 0 2px 6px var(--accent-glow);
}

.column-actions {
	display: flex;
	gap: 4px;
	opacity: 0.6;
	transition: opacity var(--transition-fast);
}

.column-header:hover .column-actions {
	opacity: 1;
}

.column-action-btn {
	padding: 6px 10px;
	border: none;
	background: transparent;
	color: var(--text-muted);
	cursor: pointer;
	border-radius: var(--radius-sm);
	font-size: var(--font-size-xs);
	transition: all var(--transition-fast);
}

.column-action-btn:hover {
	background: var(--accent-glow);
	color: var(--accent);
}

.column-tasks {
	flex: 1;
	overflow-y: auto;
	padding: var(--space-md);
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.02) 100%);
}

/* Task Card */
.task-card {
	background: var(--surface-elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: var(--space-md);
	cursor: grab;
	transition: all var(--transition-base);
	position: relative;
	overflow: hidden;
}

.task-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 100%;
	background: var(--border);
	transition: all var(--transition-fast);
}

.task-card:hover {
	border-color: var(--accent);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

.task-card:hover::before {
	background: var(--accent);
}

.task-card.dragging {
	opacity: 0.6;
	cursor: grabbing;
	transform: rotate(3deg) scale(1.02);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.task-card-title {
	font-size: var(--font-size-sm);
	font-weight: 600;
	margin-bottom: var(--space-sm);
	line-height: 1.5;
	color: var(--text-primary);
}

.task-card-meta {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	flex-wrap: wrap;
}

.priority-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.priority-badge.low {
	background: linear-gradient(135deg, rgba(100, 116, 139, 0.15), rgba(100, 116, 139, 0.25));
	color: #94a3b8;
	border: 1px solid rgba(100, 116, 139, 0.3);
}

.priority-badge.medium {
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.25));
	color: #60a5fa;
	border: 1px solid rgba(59, 130, 246, 0.3);
}

.priority-badge.high {
	background: linear-gradient(135deg, rgba(251, 146, 60, 0.15), rgba(251, 146, 60, 0.3));
	color: #f97316;
	border: 1px solid rgba(251, 146, 60, 0.4);
}

.priority-badge.urgent {
	background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.35));
	color: #ef4444;
	border: 1px solid rgba(239, 68, 68, 0.4);
	animation: pulse-urgent 2s ease-in-out infinite;
}

@keyframes pulse-urgent {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.7; }
}

.due-date-badge {
	font-size: 11px;
	color: var(--text-muted);
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.due-date-badge::before {
	content: '📅';
	font-size: 10px;
}

.due-date-badge.overdue {
	color: var(--danger);
	font-weight: 600;
}

.due-date-badge.overdue::before {
	content: '⚠️';
}

.due-date-badge.soon {
	color: #f97316;
	font-weight: 500;
}

.task-tags {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: var(--space-sm);
}

.task-tag {
	padding: 3px 8px;
	background: linear-gradient(135deg, var(--accent-glow), rgba(99, 102, 241, 0.15));
	border: 1px solid var(--accent);
	border-radius: 6px;
	font-size: 10px;
	font-weight: 500;
	color: var(--accent);
}

/* Quick Add */
.quick-add {
	padding: var(--space-md);
	border-top: 2px solid var(--border);
	background: linear-gradient(180deg, var(--glass-light) 0%, var(--surface) 100%);
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.quick-add-input {
	width: 100%;
	padding: 10px 14px;
	border: 2px dashed var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--text-primary);
	font-size: var(--font-size-sm);
	transition: all var(--transition-base);
}

.quick-add-input:hover {
	border-color: var(--text-muted);
	background: var(--surface-elevated);
}

.quick-add-input:focus {
	border-style: solid;
	border-color: var(--accent);
	outline: none;
	background: var(--surface-elevated);
	box-shadow: 0 0 0 3px var(--accent-glow);
}

.quick-add-input::placeholder {
	color: var(--text-muted);
	font-style: italic;
}

/* List View */
.list-view {
	flex: 1;
	width: 100%;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.task-table {
	width: 100%;
	border-collapse: collapse;
}

.task-table th,
.task-table td {
	padding: var(--space-md) var(--space-lg);
	text-align: left;
	border-bottom: 1px solid var(--border);
}

.task-table th {
	background: linear-gradient(180deg, var(--glass) 0%, var(--glass-light) 100%);
	font-size: var(--font-size-sm);
	font-weight: 700;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	position: sticky;
	top: 0;
	z-index: 1;
}

.task-table th.sortable {
	cursor: pointer;
	transition: all var(--transition-fast);
}

.task-table th.sortable:hover {
	color: var(--accent);
	background: linear-gradient(180deg, var(--glass-light) 0%, var(--accent-glow) 100%);
}

.task-table th.sorted-asc::after {
	content: ' ↑';
	color: var(--accent);
}

.task-table th.sorted-desc::after {
	content: ' ↓';
	color: var(--accent);
}

.task-table td {
	font-size: var(--font-size-sm);
	vertical-align: middle;
}

.task-table tbody tr {
	transition: all var(--transition-fast);
}

.task-table tbody tr:hover {
	background: linear-gradient(90deg, var(--accent-glow) 0%, transparent 100%);
}

.task-table tbody tr:nth-child(even) {
	background: var(--glass);
}

.task-table tbody tr:nth-child(even):hover {
	background: linear-gradient(90deg, var(--accent-glow) 0%, var(--glass) 100%);
}

.task-table .task-title-cell {
	font-weight: 600;
	cursor: pointer;
	transition: color var(--transition-fast);
	max-width: 300px;
}

.task-table .task-title-cell:hover {
	color: var(--accent);
}

/* Empty State */
.task-empty-state {
	text-align: center;
	padding: var(--space-2xl);
	color: var(--text-muted);
	background: var(--glass);
	border: 1px dashed var(--border-strong);
	border-radius: var(--radius-lg);
	margin: var(--space-xl) auto;
	max-width: 400px;
}

.task-empty-state::before {
	content: '';
	display: block;
	width: 64px;
	height: 64px;
	margin: 0 auto var(--space-lg);
	background: linear-gradient(135deg, var(--accent-glow), var(--glass));
	border-radius: var(--radius-lg);
	border: 2px dashed var(--border-strong);
}

.task-empty-state h3 {
	margin: 0 0 var(--space-sm);
	font-size: var(--font-size-lg);
	color: var(--text-secondary);
	font-weight: 600;
}

.task-empty-state p {
	color: var(--text-muted);
	font-size: var(--font-size-sm);
	margin: 0;
}

/* Notifications Panel */
.notifications-panel {
	position: fixed;
	top: 120px;
	right: var(--space-lg);
	width: 360px;
	max-height: 450px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
	z-index: 100;
	overflow: hidden;
	animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
	from {
		transform: translateY(-10px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.notifications-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-md) var(--space-lg);
	border-bottom: 2px solid var(--border);
	background: linear-gradient(180deg, var(--glass) 0%, var(--glass-light) 100%);
}

.notifications-header h4 {
	margin: 0;
	font-size: var(--font-size-base);
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.notifications-header h4::before {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: var(--space-sm);
	background: var(--accent);
	border-radius: 50%;
}

.notifications-list {
	max-height: 380px;
	overflow-y: auto;
}

.notification-item {
	padding: var(--space-md) var(--space-lg);
	border-bottom: 1px solid var(--border);
	font-size: var(--font-size-sm);
	transition: all var(--transition-fast);
	cursor: pointer;
}

.notification-item:hover {
	background: var(--glass);
}

.notification-item:last-child {
	border-bottom: none;
}

.notification-item.unread {
	background: linear-gradient(90deg, var(--accent-glow) 0%, transparent 100%);
	border-left: 3px solid var(--accent);
}

.notification-item.unread:hover {
	background: linear-gradient(90deg, var(--accent-glow) 0%, var(--glass) 100%);
}

.notification-time {
	font-size: 11px;
	color: var(--text-muted);
	margin-top: 6px;
	display: flex;
	align-items: center;
	gap: 4px;
}

.notification-time::before {
	content: '🕐';
	font-size: 10px;
}

/* Toast Notification */
.task-toast {
	position: fixed;
	bottom: var(--space-xl);
	right: var(--space-xl);
	padding: var(--space-md) var(--space-xl);
	background: linear-gradient(135deg, var(--surface) 0%, var(--surface-elevated) 100%);
	border: 2px solid var(--accent);
	border-radius: var(--radius-lg);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 0 0 4px var(--accent-glow);
	z-index: 1000;
	animation: toastSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
	display: flex;
	align-items: center;
	gap: var(--space-md);
	max-width: 400px;
}

.task-toast::before {
	content: '⏰';
	font-size: 24px;
}

@keyframes toastSlideIn {
	from {
		transform: translateX(100%) scale(0.8);
		opacity: 0;
	}
	to {
		transform: translateX(0) scale(1);
		opacity: 1;
	}
}

/* Add Column Button */
.add-column-btn {
	flex: 0 0 280px;
	min-height: 200px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-md);
	background: var(--glass);
	border: 2px dashed var(--border);
	border-radius: var(--radius-lg);
	color: var(--text-muted);
	cursor: pointer;
	transition: all var(--transition-base);
}

.add-column-btn:hover {
	border-color: var(--accent);
	color: var(--accent);
	background: var(--accent-glow);
}

.add-column-btn::before {
	content: '+';
	font-size: 32px;
	font-weight: 300;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px dashed currentColor;
	border-radius: 50%;
}

/* Task Actions in Cards */
.task-card-actions {
	display: flex;
	gap: 4px;
	margin-top: var(--space-sm);
	padding-top: var(--space-sm);
	border-top: 1px solid var(--border);
	opacity: 0;
	transition: opacity var(--transition-fast);
}

.task-card:hover .task-card-actions {
	opacity: 1;
}

.task-card-action {
	padding: 4px 8px;
	border: none;
	background: transparent;
	color: var(--text-muted);
	cursor: pointer;
	border-radius: var(--radius-sm);
	font-size: 11px;
	transition: all var(--transition-fast);
}

.task-card-action:hover {
	background: var(--glass);
	color: var(--text-primary);
}

.task-card-action.delete:hover {
	background: rgba(239, 68, 68, 0.1);
	color: var(--danger);
}

/* Responsive */
@media (max-width: 1024px) {
	#task-manager-tab {
		padding: 0 var(--space-md);
	}

	.task-manager-container {
		padding: var(--space-md) 0;
	}

	.kanban-column {
		flex: 0 0 300px;
	}
}

@media (max-width: 768px) {
	#task-manager-tab {
		left: 0;
		right: 0;
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		padding: 0 var(--space-sm);
	}

	.task-manager-container {
		padding: var(--space-sm) 0;
		min-height: calc(100vh - 180px);
	}

	.task-manager-header {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-md);
		padding: var(--space-md);
	}

	.task-manager-actions {
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.kanban-column {
		flex: 0 0 280px;
		max-height: calc(100vh - 320px);
	}

	.kanban-columns {
		padding-bottom: var(--space-lg);
		gap: var(--space-md);
	}

	.notifications-panel {
		left: var(--space-md);
		right: var(--space-md);
		width: auto;
		top: 100px;
	}

	.task-filters {
		padding: var(--space-sm);
	}

	.task-toast {
		left: var(--space-md);
		right: var(--space-md);
		max-width: none;
	}
}

/* ===== TASK MANAGER V2 STYLES ===== */

/* Full Layout with Sidebar */
.task-manager-layout {
	display: flex;
	width: 100%;
	min-height: calc(100vh - 160px);
	gap: 0;
}

/* Projects Sidebar */
.tm-sidebar {
	width: 260px;
	flex-shrink: 0;
	background: var(--surface);
	border-right: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	transition: width var(--transition-base), transform var(--transition-base);
	position: relative;
}

.tm-sidebar.collapsed {
	width: 0;
	overflow: hidden;
	border-right: none;
}

.tm-sidebar-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-lg);
	border-bottom: 1px solid var(--border);
}

.tm-sidebar-header h3 {
	margin: 0;
	font-size: var(--font-size-base);
	font-weight: 600;
}

.tm-projects-list {
	flex: 1;
	overflow-y: auto;
	padding: var(--space-md);
}

.tm-project-item {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-sm) var(--space-md);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: all var(--transition-fast);
	margin-bottom: var(--space-xs);
}

.tm-project-item:hover {
	background: var(--glass);
}

.tm-project-item.active {
	background: var(--accent-glow);
	color: var(--accent);
}

.tm-project-color {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	flex-shrink: 0;
}

.tm-project-name {
	flex: 1;
	font-size: var(--font-size-sm);
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tm-project-count {
	font-size: var(--font-size-xs);
	color: var(--text-muted);
	background: var(--glass);
	padding: 2px 6px;
	border-radius: 10px;
}

.tm-sidebar-section {
	padding: var(--space-md);
	border-top: 1px solid var(--border);
}

.tm-sidebar-section h4 {
	margin: 0 0 var(--space-sm);
	font-size: var(--font-size-xs);
	font-weight: 600;
	text-transform: uppercase;
	color: var(--text-muted);
	letter-spacing: 0.5px;
}

.tm-saved-filters {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.tm-filter-btn {
	padding: var(--space-sm) var(--space-md);
	border: none;
	background: transparent;
	text-align: left;
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	cursor: pointer;
	border-radius: var(--radius-sm);
	transition: all var(--transition-fast);
}

.tm-filter-btn:hover {
	background: var(--glass);
	color: var(--text-primary);
}

.tm-filter-btn.active {
	background: var(--accent-glow);
	color: var(--accent);
}

.tm-sidebar-toggle {
	position: absolute;
	right: -12px;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 48px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	cursor: pointer;
	font-size: 10px;
	color: var(--text-muted);
	transition: all var(--transition-fast);
	z-index: 10;
}

.tm-sidebar-toggle:hover {
	background: var(--glass);
	color: var(--accent);
}

.tm-sidebar.collapsed .tm-sidebar-toggle {
	right: -24px;
}

/* Main Content Area */
.tm-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: var(--space-lg);
	overflow: visible;
	/* Fixed: changed from overflow: hidden to visible to prevent header clipping */
}

.tm-mobile-menu {
	display: none;
}

/* Task Detail Drawer */
.tm-drawer {
	width: 400px;
	flex-shrink: 0;
	background: var(--surface);
	border-left: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	animation: slideInRight 0.2s ease-out;
}

@keyframes slideInRight {
	from {
		transform: translateX(100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

.tm-drawer-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-lg);
	border-bottom: 1px solid var(--border);
}

.tm-drawer-header h3 {
	margin: 0;
	font-size: var(--font-size-base);
	font-weight: 600;
}

.tm-drawer-body {
	flex: 1;
	overflow-y: auto;
	padding: var(--space-lg);
}

/* Bulk Actions Bar */
.bulk-actions-bar {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	padding: var(--space-sm) var(--space-md);
	background: var(--accent-glow);
	border-radius: var(--radius-sm);
	border: 1px solid var(--accent);
}

#bulkSelectedCount {
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--accent);
}

/* Calendar View */
.calendar-view {
	flex: 1;
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.calendar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-md) var(--space-lg);
	background: var(--glass);
	border-bottom: 1px solid var(--border);
}

.calendar-header h3 {
	margin: 0;
	font-size: var(--font-size-lg);
	font-weight: 600;
}

.calendar-weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	text-align: center;
	padding: var(--space-sm) 0;
	background: var(--glass);
	border-bottom: 1px solid var(--border);
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--text-muted);
}

.calendar-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	flex: 1;
	min-height: 400px;
}

.calendar-cell {
	border-right: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	padding: var(--space-xs);
	min-height: 100px;
	position: relative;
	transition: background var(--transition-fast);
}

.calendar-cell:nth-child(7n) {
	border-right: none;
}

.calendar-cell:hover {
	background: var(--glass);
}

.calendar-cell.other-month {
	background: rgba(0, 0, 0, 0.1);
}

.calendar-cell.today {
	background: var(--accent-glow);
}

.calendar-date {
	font-size: var(--font-size-sm);
	font-weight: 500;
	color: var(--text-muted);
	margin-bottom: var(--space-xs);
}

.calendar-cell.today .calendar-date {
	color: var(--accent);
	font-weight: 700;
}

.calendar-tasks {
	display: flex;
	flex-direction: column;
	gap: 2px;
	overflow: hidden;
}

.calendar-task {
	padding: 2px 6px;
	font-size: 10px;
	background: var(--accent);
	color: white;
	border-radius: 3px;
	cursor: pointer;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: transform var(--transition-fast);
}

.calendar-task:hover {
	transform: scale(1.02);
}

.calendar-task.priority-high {
	background: #f97316;
}

.calendar-task.priority-urgent {
	background: var(--danger);
}

.calendar-more {
	font-size: 10px;
	color: var(--text-muted);
	padding: 2px 6px;
	cursor: pointer;
}

.calendar-more:hover {
	color: var(--accent);
}

/* Timeline (Gantt) View */
.timeline-view {
	flex: 1;
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.timeline-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-md) var(--space-lg);
	background: var(--glass);
	border-bottom: 1px solid var(--border);
}

.timeline-zoom {
	display: flex;
	gap: var(--space-xs);
}

.timeline-zoom .btn.active {
	background: var(--accent);
	color: white;
}

.timeline-nav {
	display: flex;
	align-items: center;
	gap: var(--space-md);
}

#timelineRange {
	font-size: var(--font-size-sm);
	font-weight: 500;
}

.timeline-container {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: auto;
	position: relative;
}

.timeline-scale {
	display: flex;
	position: sticky;
	top: 0;
	z-index: 5;
	background: var(--glass);
	border-bottom: 1px solid var(--border);
}

.timeline-scale-unit {
	flex: 0 0 80px;
	padding: var(--space-sm);
	text-align: center;
	font-size: var(--font-size-xs);
	color: var(--text-muted);
	border-right: 1px solid var(--border);
}

.timeline-tasks {
	flex: 1;
	position: relative;
	min-height: 300px;
}

.timeline-row {
	display: flex;
	align-items: center;
	height: 40px;
	border-bottom: 1px solid var(--border);
	position: relative;
}

.timeline-task-label {
	width: 200px;
	flex-shrink: 0;
	padding: 0 var(--space-md);
	font-size: var(--font-size-sm);
	font-weight: 500;
	background: var(--surface);
	position: sticky;
	left: 0;
	z-index: 2;
	border-right: 1px solid var(--border);
}

.timeline-task-bar {
	position: absolute;
	height: 24px;
	background: linear-gradient(90deg, var(--accent), var(--accent-hover));
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: all var(--transition-fast);
	display: flex;
	align-items: center;
	padding: 0 var(--space-sm);
	font-size: var(--font-size-xs);
	color: white;
	overflow: hidden;
}

.timeline-task-bar:hover {
	transform: scaleY(1.1);
	box-shadow: 0 2px 8px var(--accent-glow);
}

.timeline-task-bar.blocked {
	background: linear-gradient(90deg, var(--text-muted), #64748b);
}

.timeline-dependency-line {
	position: absolute;
	stroke: var(--text-muted);
	stroke-width: 2;
	fill: none;
	pointer-events: none;
}

.timeline-grid {
	position: absolute;
	top: 0;
	left: 200px;
	right: 0;
	bottom: 0;
	pointer-events: none;
}

.timeline-grid-line {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--border);
}

.timeline-today-line {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--danger);
	z-index: 3;
}

/* Enhanced Task Edit Modal */
.task-edit-modal {
	max-width: 700px;
	width: 95vw;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
}

.task-edit-body {
	flex: 1;
	overflow-y: auto;
	padding: var(--space-lg);
}

.task-edit-main {
	margin-bottom: var(--space-lg);
}

.form-group {
	margin-bottom: var(--space-md);
}

.estimate-input {
	display: flex;
	gap: var(--space-sm);
}

.estimate-input input {
	flex: 1;
}

.description-tabs {
	display: flex;
	gap: var(--space-xs);
	margin-bottom: var(--space-sm);
}

.desc-tab {
	padding: var(--space-xs) var(--space-md);
	border: none;
	background: transparent;
	font-size: var(--font-size-sm);
	color: var(--text-muted);
	cursor: pointer;
	border-radius: var(--radius-sm);
	transition: all var(--transition-fast);
}

.desc-tab:hover {
	background: var(--glass);
	color: var(--text-primary);
}

.desc-tab.active {
	background: var(--accent-glow);
	color: var(--accent);
}

.markdown-preview {
	padding: var(--space-md);
	background: var(--glass);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	min-height: 100px;
	font-size: var(--font-size-sm);
}

.markdown-preview h1,
.markdown-preview h2,
.markdown-preview h3 {
	margin-top: 0;
}

.markdown-preview ul,
.markdown-preview ol {
	padding-left: var(--space-lg);
}

/* Task Edit Tabs */
.task-edit-tabs {
	display: flex;
	gap: var(--space-xs);
	border-bottom: 1px solid var(--border);
	margin-bottom: var(--space-md);
}

.task-tab {
	padding: var(--space-sm) var(--space-md);
	border: none;
	background: transparent;
	font-size: var(--font-size-sm);
	color: var(--text-muted);
	cursor: pointer;
	position: relative;
	transition: all var(--transition-fast);
}

.task-tab:hover {
	color: var(--text-primary);
}

.task-tab.active {
	color: var(--accent);
}

.task-tab.active::after {
	content: '';
	position: absolute;
	bottom: -1px;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--accent);
}

.tab-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	background: var(--glass);
	border-radius: 9px;
	font-size: 10px;
	margin-left: 4px;
}

.task-tab-content {
	min-height: 150px;
}

/* Subtasks */
.subtask-add {
	display: flex;
	gap: var(--space-sm);
	margin-bottom: var(--space-md);
}

.subtask-add input {
	flex: 1;
}

.subtasks-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.subtask-item {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-sm);
	background: var(--glass);
	border-radius: var(--radius-sm);
	transition: all var(--transition-fast);
}

.subtask-item:hover {
	background: var(--glass-light);
}

.subtask-checkbox {
	width: 18px;
	height: 18px;
	cursor: pointer;
}

.subtask-title {
	flex: 1;
	font-size: var(--font-size-sm);
}

.subtask-item.completed .subtask-title {
	text-decoration: line-through;
	color: var(--text-muted);
}

.subtask-delete {
	padding: 4px 8px;
	border: none;
	background: transparent;
	color: var(--text-muted);
	cursor: pointer;
	font-size: var(--font-size-xs);
	opacity: 0;
	transition: all var(--transition-fast);
}

.subtask-item:hover .subtask-delete {
	opacity: 1;
}

.subtask-delete:hover {
	color: var(--danger);
}

/* Comments */
.comments-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	max-height: 200px;
	overflow-y: auto;
	margin-bottom: var(--space-md);
}

.comment-item {
	padding: var(--space-sm);
	background: var(--glass);
	border-radius: var(--radius-sm);
	border-left: 3px solid var(--accent);
}

.comment-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: var(--space-xs);
}

.comment-author {
	font-size: var(--font-size-xs);
	font-weight: 600;
	color: var(--accent);
}

.comment-time {
	font-size: var(--font-size-xs);
	color: var(--text-muted);
}

.comment-content {
	font-size: var(--font-size-sm);
}

.comment-add {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.comment-add textarea {
	resize: none;
}

.comment-add button {
	align-self: flex-end;
}

/* Activity Log */
.activity-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	max-height: 250px;
	overflow-y: auto;
}

.activity-item {
	display: flex;
	gap: var(--space-sm);
	padding: var(--space-xs) 0;
	font-size: var(--font-size-xs);
	color: var(--text-muted);
	border-bottom: 1px solid var(--border);
}

.activity-item:last-child {
	border-bottom: none;
}

.activity-action {
	flex: 1;
}

.activity-action strong {
	color: var(--text-primary);
}

.activity-time {
	flex-shrink: 0;
}

/* Attachments */
.attachment-add {
	display: flex;
	gap: var(--space-sm);
	margin-bottom: var(--space-md);
}

.attachment-add input {
	flex: 1;
}

.attachments-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.attachment-item {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-sm);
	background: var(--glass);
	border-radius: var(--radius-sm);
}

.attachment-icon {
	font-size: var(--font-size-lg);
}

.attachment-name {
	flex: 1;
	font-size: var(--font-size-sm);
}

.attachment-delete {
	padding: 4px 8px;
	border: none;
	background: transparent;
	color: var(--text-muted);
	cursor: pointer;
	font-size: var(--font-size-xs);
}

.attachment-delete:hover {
	color: var(--danger);
}

/* Enhanced Task Card */
.task-card-extras {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin-top: var(--space-sm);
	font-size: var(--font-size-xs);
	color: var(--text-muted);
}

.task-card-extra {
	display: inline-flex;
	align-items: center;
	gap: 3px;
}

.task-blocked-indicator {
	color: var(--danger);
	font-weight: 600;
}

.task-recurring-indicator {
	color: var(--accent);
}

.task-assignee-avatar {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--accent);
	color: white;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 600;
}

/* WIP Limit Warning */
.column-wip-warning {
	background: rgba(251, 146, 60, 0.1);
	border-color: #f97316;
}

.column-wip-exceeded {
	background: rgba(239, 68, 68, 0.1);
	border-color: var(--danger);
}

.wip-indicator {
	font-size: var(--font-size-xs);
	color: var(--text-muted);
	margin-left: var(--space-sm);
}

.wip-indicator.warning {
	color: #f97316;
}

.wip-indicator.exceeded {
	color: var(--danger);
	font-weight: 600;
}

/* Mobile Responsive */
@media (max-width: 1024px) {
	.tm-sidebar {
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		z-index: 100;
		transform: translateX(-100%);
	}

	.tm-sidebar.open {
		transform: translateX(0);
	}

	.tm-sidebar-toggle {
		display: none;
	}

	.tm-mobile-menu {
		display: block;
	}

	.tm-drawer {
		position: fixed;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 100;
	}
}

@media (max-width: 768px) {
	.task-manager-layout {
		flex-direction: column;
	}

	.tm-main {
		padding: var(--space-md);
		overflow: visible;
	}

	.task-manager-header {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-md);
		padding: var(--space-md);
		position: relative;
		z-index: 10;
	}

	.task-manager-title {
		justify-content: space-between;
	}

	.task-manager-actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-sm);
		justify-content: flex-start;
	}

	.task-manager-actions .btn {
		flex: 1 1 auto;
		min-width: fit-content;
		font-size: var(--font-size-sm);
		padding: 8px 12px;
	}

	.view-toggle {
		flex-wrap: wrap;
		width: 100%;
		justify-content: stretch;
	}

	.view-toggle-btn {
		flex: 1;
		padding: 8px 10px;
		font-size: var(--font-size-xs);
	}

	.calendar-cell {
		min-height: 60px;
	}

	.task-edit-modal {
		max-width: 100%;
		height: 100vh;
		max-height: 100vh;
		border-radius: 0;
	}

	.timeline-task-label {
		width: 120px;
	}
}

/* ============================================================
   KEYBOARD SHORTCUTS MODAL
   ============================================================ */

.shortcuts-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(4px);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.shortcuts-modal .modal-content {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--space-xl);
	max-width: 480px;
	width: 90%;
	box-shadow: var(--shadow-3);
}

.shortcuts-help h3 {
	margin: 0 0 var(--space-lg) 0;
	font-size: var(--font-size-lg);
	color: var(--text-primary);
	text-align: center;
}

.shortcut-grid {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.shortcut-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-sm) var(--space-md);
	background: var(--glass);
	border-radius: var(--radius-sm);
}

.shortcut-item kbd {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 26px;
	padding: 0 8px;
	background: var(--surface-elevated);
	border: 1px solid var(--border-strong);
	border-radius: 6px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 12px;
	color: var(--text-primary);
	box-shadow: 0 2px 0 var(--border);
}

.shortcut-item span {
	color: var(--text-secondary);
	font-size: var(--font-size-sm);
}

.shortcut-note {
	margin: var(--space-lg) 0 0 0;
	text-align: center;
	color: var(--text-muted);
	font-size: var(--font-size-sm);
}

.theme-light .shortcuts-modal .modal-content {
	background: #fff;
}

.theme-light .shortcut-item {
	background: rgba(0, 0, 0, 0.03);
}

.theme-light .shortcut-item kbd {
	background: #f5f5f5;
	border-color: #ddd;
	box-shadow: 0 2px 0 #ccc;
}

/* ============================================================
   DASHBOARD
   ============================================================ */

.dashboard-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: var(--space-2xl) var(--space-xl);
}

.dashboard-header {
	margin-bottom: var(--space-2xl);
	text-align: center;
}

.dashboard-header .page-title {
	margin: 0 0 var(--space-sm) 0;
	font-size: 36px;
	font-weight: 700;
	background: linear-gradient(135deg, var(--accent) 0%, var(--accent-grad-mid) 50%, var(--accent-grad-end) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.dashboard-header .page-subtitle {
	color: var(--text-secondary);
	margin: 0;
	font-size: var(--font-size-md);
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-lg);
	margin-bottom: var(--space-2xl);
}

.stat-card {
	background: linear-gradient(145deg, var(--surface-elevated) 0%, var(--surface) 100%);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	padding: var(--space-xl);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-md);
	transition: all var(--transition-base);
	position: relative;
	overflow: hidden;
}

.stat-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--accent) 0%, var(--accent-grad-mid) 100%);
	opacity: 0;
	transition: opacity var(--transition-fast);
}

.stat-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px var(--accent-glow);
	border-color: var(--accent);
}

.stat-card:hover::before {
	opacity: 1;
}

.stat-icon {
	font-size: 40px;
	width: 72px;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--accent-glow) 0%, transparent 100%);
	border-radius: 50%;
	margin-bottom: var(--space-sm);
}

.stat-value {
	font-size: 42px;
	font-weight: 800;
	color: var(--text-primary);
	line-height: 1;
	letter-spacing: -1px;
}

.stat-label {
	color: var(--text-secondary);
	font-size: var(--font-size-sm);
	margin-top: var(--space-xs);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 500;
}

.dashboard-row {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: var(--space-xl);
	margin-bottom: var(--space-xl);
}

.dashboard-card {
	background: linear-gradient(145deg, var(--surface-elevated) 0%, var(--surface) 100%);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	overflow: hidden;
	transition: all var(--transition-base);
}

.dashboard-card:hover {
	border-color: var(--border-strong);
	box-shadow: var(--shadow-2);
}

.dashboard-card.full-width {
	grid-column: 1 / -1;
}

.dashboard-card .card-header {
	padding: var(--space-lg) var(--space-xl);
	border-bottom: 1px solid var(--border);
	background: var(--glass);
}

.dashboard-card .card-header h3 {
	margin: 0;
	font-size: var(--font-size-lg);
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.dashboard-card .card-body {
	padding: var(--space-xl);
}

.quick-actions-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-md);
}

.quick-action-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	padding: var(--space-xl) var(--space-lg);
	background: linear-gradient(145deg, var(--glass-light) 0%, var(--glass) 100%);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	cursor: pointer;
	transition: all var(--transition-base);
	color: var(--text-primary);
	min-height: 100px;
}

.quick-action-btn:hover {
	background: linear-gradient(145deg, var(--accent-glow) 0%, var(--glass-light) 100%);
	border-color: var(--accent);
	transform: translateY(-4px) scale(1.02);
	box-shadow: 0 10px 30px rgba(108, 140, 255, 0.2);
}

.quick-action-btn .qa-icon {
	font-size: 32px;
	transition: transform var(--transition-fast);
}

.quick-action-btn:hover .qa-icon {
	transform: scale(1.15);
}

.quick-action-btn span:last-child {
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	font-weight: 500;
}

/* ============================================================
   My Sites Grid
   ============================================================ */
.my-sites-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--space-md);
}

.site-card {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	padding: var(--space-md);
	background: var(--glass);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	cursor: pointer;
	transition: all var(--transition-fast);
}

.site-card:hover {
	background: var(--glass-light);
	border-color: var(--accent);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.site-favicon {
	width: 40px;
	height: 40px;
	border-radius: var(--radius-sm);
	background: var(--surface-elevated);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex-shrink: 0;
}

.site-favicon img {
	width: 24px;
	height: 24px;
	border-radius: 4px;
}

.site-info {
	flex: 1;
	min-width: 0;
}

.site-name {
	font-weight: 600;
	color: var(--text-primary);
	margin: 0 0 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.site-url {
	font-size: var(--font-size-xs);
	color: var(--text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.site-actions {
	display: flex;
	gap: var(--space-xs);
	opacity: 0;
	transition: opacity var(--transition-fast);
}

.site-card:hover .site-actions {
	opacity: 1;
}

.site-action-btn {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--glass);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	cursor: pointer;
	color: var(--text-secondary);
	transition: all var(--transition-fast);
}

.site-action-btn:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: white;
}

@media (max-width: 600px) {
	.my-sites-grid {
		grid-template-columns: 1fr;
	}

	.site-actions {
		opacity: 1;
	}
}

/* Tips Carousel */
.tips-carousel {
	position: relative;
	min-height: 100px;
}

.tip-card {
	display: none;
	align-items: flex-start;
	gap: var(--space-md);
	padding: var(--space-md);
	background: var(--glass);
	border-radius: var(--radius);
}

.tip-card.active {
	display: flex;
}

.tip-icon {
	font-size: 28px;
	flex-shrink: 0;
}

.tip-content strong {
	display: block;
	margin-bottom: var(--space-xs);
	color: var(--text-primary);
}

.tip-content p {
	margin: 0;
	color: var(--text-secondary);
	font-size: var(--font-size-sm);
	line-height: 1.5;
}

.tips-nav {
	display: flex;
	justify-content: center;
	gap: var(--space-sm);
	margin-top: var(--space-md);
}

.tip-nav-btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--border);
	background: var(--glass);
	color: var(--text-primary);
	cursor: pointer;
	transition: all var(--transition-fast);
}

.tip-nav-btn:hover {
	background: var(--accent);
	border-color: var(--accent);
}

/* Activity List */
.activity-item {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	padding: var(--space-sm) 0;
	border-bottom: 1px solid var(--border);
}

.activity-item:last-child {
	border-bottom: none;
}

.activity-icon {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--glass);
	border-radius: 50%;
	font-size: 14px;
}

.activity-text {
	flex: 1;
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
}

.activity-time {
	font-size: var(--font-size-xs);
	color: var(--text-muted);
}

/* Light mode */
.theme-light .stat-card {
	background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.theme-light .stat-card:hover {
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12), 0 0 30px rgba(108, 140, 255, 0.15);
}

.theme-light .dashboard-card {
	background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.theme-light .quick-action-btn {
	background: linear-gradient(145deg, #f8fafc 0%, #ffffff 100%);
}

.theme-light .tip-card {
	background: rgba(0, 0, 0, 0.02);
}

/* Large screens - 4 columns */
@media (min-width: 1200px) {
	.stats-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Medium screens - 2 columns */
@media (max-width: 1199px) and (min-width: 769px) {
	.stats-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.dashboard-row {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 768px) {
	.dashboard-container {
		padding: var(--space-lg);
	}

	.dashboard-header {
		text-align: left;
		margin-bottom: var(--space-xl);
	}

	.dashboard-header .page-title {
		font-size: 28px;
	}

	.stats-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-md);
	}

	.stat-card {
		padding: var(--space-lg);
	}

	.stat-icon {
		font-size: 28px;
		width: 56px;
		height: 56px;
	}

	.stat-value {
		font-size: 28px;
	}

	.stat-label {
		font-size: var(--font-size-xs);
		word-break: break-word;
	}

	.dashboard-row {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	.quick-actions-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 400px) {
	.stats-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-sm);
	}

	.stat-card {
		padding: var(--space-sm);
	}

	.stat-icon {
		font-size: 20px;
		width: 36px;
		height: 36px;
	}

	.stat-value {
		font-size: var(--font-size-lg);
	}

	.quick-actions-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ============================================================
   BRAND VOICE SECTION
   ============================================================ */

.brand-voice-section {
	margin: var(--space-md) 0;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--glass);
}

.brand-voice-section summary {
	cursor: pointer;
	padding: var(--space-sm) var(--space-md);
	font-weight: 500;
	user-select: none;
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.brand-voice-section summary::before {
	content: '🎨';
}

.brand-voice-section[open] summary {
	border-bottom: 1px solid var(--border);
}

.brand-voice-fields {
	padding: var(--space-md);
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.brand-voice-fields .field-label {
	margin-top: var(--space-xs);
}

.brand-voice-actions {
	display: flex;
	gap: var(--space-sm);
	margin-top: var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px solid var(--border);
}

.brand-voice-actions .btn {
	flex: 1;
}

.theme-light .brand-voice-section {
	background: rgba(0, 0, 0, 0.02);
}

/* Brand Voice Modal */
.brand-voice-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(4px);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.brand-voice-modal .modal-content {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--space-xl);
	max-width: 400px;
	width: 90%;
	max-height: 80vh;
	overflow-y: auto;
}

.brand-voice-selector h3 {
	margin: 0 0 var(--space-lg) 0;
	text-align: center;
}

.profile-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.profile-item {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	padding: var(--space-md);
	background: var(--glass);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	transition: all var(--transition-fast);
}

.profile-item:hover {
	border-color: var(--accent);
}

.profile-name {
	font-weight: 600;
	flex: 1;
}

.profile-tone {
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
}

.profile-actions {
	display: flex;
	gap: var(--space-xs);
}

.btn-danger {
	background: var(--danger-bg);
	color: var(--danger);
	border-color: var(--danger);
}

.btn-danger:hover {
	background: var(--danger);
	color: white;
}

.theme-light .brand-voice-modal .modal-content {
	background: #fff;
}


/* ============================================================
   SEO Content Score Card Styles
   ============================================================ */

#seoScoreCard {
  margin-top: var(--space-md);
}

.seo-grade-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  font-weight: 700;
  font-size: var(--font-size-sm);
}

.seo-grade-badge.grade-a { background: var(--success-bg); color: var(--success); }
.seo-grade-badge.grade-b { background: rgba(52, 211, 153, 0.15); color: #22c55e; }
.seo-grade-badge.grade-c { background: rgba(251, 191, 36, 0.15); color: var(--warning); }
.seo-grade-badge.grade-d { background: rgba(249, 115, 22, 0.15); color: #f97316; }
.seo-grade-badge.grade-f { background: var(--danger-bg); color: var(--danger); }

.seo-score-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-lg) 0;
}

.seo-score-circle {
  position: relative;
  width: 140px;
  height: 140px;
}

.seo-score-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.seo-score-bg {
  fill: none;
  stroke: var(--surface-elevated);
  stroke-width: 8;
}

.seo-score-progress {
  fill: none;
  stroke: var(--accent);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 1s ease-out, stroke 0.3s ease;
}

.seo-score-progress.score-high { stroke: var(--success); }
.seo-score-progress.score-medium { stroke: var(--warning); }
.seo-score-progress.score-low { stroke: var(--danger); }

.seo-score-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 36px;
  font-weight: 700;
  color: var(--text-primary);
}

.seo-score-label {
  margin-top: var(--space-sm);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.seo-breakdown {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
}

.seo-breakdown h4,
.seo-recommendations h4 {
  margin: 0 0 var(--space-md) 0;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
}

.seo-breakdown-list {
  display: grid;
  gap: var(--space-sm);
}

.seo-breakdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  background: var(--glass);
  border-radius: var(--radius-sm);
}

.seo-breakdown-item .item-label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.seo-breakdown-item .item-label .icon {
  font-size: 16px;
}

.seo-breakdown-item .item-score {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.seo-breakdown-item .score-bar {
  width: 60px;
  height: 6px;
  background: var(--surface-elevated);
  border-radius: 3px;
  overflow: hidden;
}

.seo-breakdown-item .score-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s ease-out;
}

.seo-breakdown-item .score-bar-fill.high { background: var(--success); }
.seo-breakdown-item .score-bar-fill.medium { background: var(--warning); }
.seo-breakdown-item .score-bar-fill.low { background: var(--danger); }

.seo-breakdown-item .score-value {
  min-width: 45px;
  text-align: right;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-primary);
}

.seo-recommendations {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
}

.seo-recommendations-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.seo-recommendations-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}

.seo-recommendations-list li:last-child {
  border-bottom: none;
}

.seo-recommendations-list li::before {
  content: "💡";
  flex-shrink: 0;
}

.seo-details-toggle {
  margin-top: var(--space-md);
  text-align: center;
}

.seo-details-section {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--surface);
  border-radius: var(--radius-sm);
}

.seo-details-section .code-block {
  max-height: 300px;
  overflow: auto;
  font-size: var(--font-size-xs);
}

/* Light theme overrides */
.theme-light .seo-breakdown-item {
  background: rgba(0, 0, 0, 0.03);
}

.theme-light .seo-score-bg {
  stroke: #e5e7eb;
}

.theme-light .score-bar {
  background: #e5e7eb;
}

.theme-light .seo-details-section {
  background: #f9fafb;
}

/* Loading state */
#seoScoreBtn.loading {
  pointer-events: none;
  opacity: 0.7;
}

#seoScoreBtn.loading::after {
  content: "...";
  animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
  0%, 20% { content: ""; }
  40% { content: "."; }
  60% { content: ".."; }
  80%, 100% { content: "..."; }
}

/* ============================================================
   Featured Snippet Optimizer
   ============================================================ */

#snippetOptimizerCard {
  margin-top: var(--space-md);
}

.snippet-score-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 600;
  background: var(--surface-alt);
  color: var(--muted);
}

.snippet-score-badge.score-high { background: var(--success-bg); color: var(--success); }
.snippet-score-badge.score-medium { background: rgba(251, 191, 36, 0.15); color: var(--warning); }
.snippet-score-badge.score-low { background: var(--danger-bg); color: var(--danger); }

.snippet-keyword-input {
  margin-bottom: var(--space-md);
}

.snippet-input-row {
  display: flex;
  gap: var(--space-sm);
}

.snippet-input-row .field {
  flex: 1;
}

.snippet-type-selector {
  margin-bottom: var(--space-lg);
}

.snippet-type-tabs {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.snippet-type-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 90px;
}

.snippet-type-tab:hover {
  border-color: var(--primary);
  background: var(--surface-alt);
}

.snippet-type-tab.active {
  border-color: var(--primary);
  background: var(--primary-muted);
  color: var(--primary);
}

.snippet-type-tab .tab-icon {
  font-size: 1.25rem;
}

.snippet-type-tab .tab-label {
  font-size: 0.75rem;
  font-weight: 500;
}

.snippet-results {
  margin-top: var(--space-lg);
}

/* Score Display */
.snippet-score-display {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-md);
  background: var(--surface-alt);
  border-radius: var(--radius);
  margin-bottom: var(--space-lg);
}

.snippet-score-circle {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.snippet-score-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.snippet-score-bg {
  fill: none;
  stroke: var(--border);
  stroke-width: 6;
}

.snippet-score-progress {
  fill: none;
  stroke: var(--primary);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 0.5s ease;
}

.snippet-score-progress.score-high { stroke: var(--success); }
.snippet-score-progress.score-medium { stroke: var(--warning); }
.snippet-score-progress.score-low { stroke: var(--danger); }

.snippet-score-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
}

.snippet-score-info {
  flex: 1;
}

.snippet-score-label {
  font-size: 0.875rem;
  color: var(--muted);
  margin-bottom: var(--space-xs);
}

.snippet-recommended-type {
  font-size: 0.875rem;
  color: var(--text);
}

.snippet-recommended-type span {
  font-weight: 600;
  color: var(--primary);
}

/* Content Analysis Section */
.snippet-analysis-section,
.snippet-preview-section,
.snippet-suggestions-section,
.snippet-tips-section,
.snippet-recommendations-section {
  margin-bottom: var(--space-lg);
}

.snippet-analysis-section h4,
.snippet-preview-section h4,
.snippet-suggestions-section h4,
.snippet-tips-section h4,
.snippet-recommendations-section h4 {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: var(--space-sm);
  color: var(--text);
}

.snippet-content-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.snippet-content-item {
  padding: var(--space-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.snippet-item-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.snippet-item-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 600;
}

.snippet-item-score.score-high { background: var(--success-bg); color: var(--success); }
.snippet-item-score.score-medium { background: rgba(251, 191, 36, 0.15); color: var(--warning); }
.snippet-item-score.score-low { background: var(--danger-bg); color: var(--danger); }

.snippet-item-meta {
  font-size: 0.75rem;
  color: var(--muted);
}

.snippet-item-preview {
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: var(--space-sm);
}

.snippet-item-actions {
  display: flex;
  gap: var(--space-xs);
}

.snippet-no-content {
  padding: var(--space-md);
  text-align: center;
  color: var(--muted);
  font-size: 0.875rem;
  background: var(--surface-alt);
  border-radius: var(--radius);
}

/* Google Featured Snippet Preview */
.google-snippet-preview {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.snippet-preview-box {
  padding: var(--space-md);
  background: linear-gradient(180deg, rgba(66, 133, 244, 0.05) 0%, transparent 100%);
  border-left: 4px solid #4285f4;
}

.snippet-preview-content {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: var(--space-sm);
}

.snippet-preview-content p {
  margin: 0;
}

.snippet-preview-content ul,
.snippet-preview-content ol {
  margin: 0;
  padding-left: var(--space-lg);
}

.snippet-preview-content li {
  margin-bottom: var(--space-xs);
}

.snippet-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.snippet-preview-table th,
.snippet-preview-table td {
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--border);
  text-align: left;
}

.snippet-preview-table th {
  background: var(--surface-alt);
  font-weight: 600;
}

.snippet-preview-source {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
}

.snippet-preview-favicon {
  width: 16px;
  height: 16px;
  border-radius: 2px;
}

.snippet-preview-url {
  font-size: 0.75rem;
}

.snippet-preview-domain {
  color: #202124;
}

.snippet-preview-path {
  color: #5f6368;
}

/* Suggestions */
.snippet-suggestions-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.snippet-suggestion {
  padding: var(--space-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.suggestion-header {
  margin-bottom: var(--space-sm);
}

.suggestion-format {
  font-weight: 600;
  color: var(--primary);
  font-size: 0.875rem;
}

.suggestion-template,
.suggestion-example {
  font-size: 0.8rem;
  margin-bottom: var(--space-sm);
  color: var(--text);
}

.suggestion-template code {
  display: block;
  margin-top: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  white-space: pre-wrap;
  font-size: 0.75rem;
}

.example-text {
  color: var(--muted);
  font-style: italic;
}

.snippet-no-suggestions {
  padding: var(--space-md);
  text-align: center;
  color: var(--muted);
  font-size: 0.875rem;
}

/* Tips */
.snippet-tips-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.snippet-tips-list li {
  padding: var(--space-xs) 0 var(--space-xs) var(--space-lg);
  position: relative;
  font-size: 0.875rem;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

.snippet-tips-list li:last-child {
  border-bottom: none;
}

.snippet-tips-list li::before {
  content: "💡";
  position: absolute;
  left: 0;
  font-size: 0.75rem;
}

/* Recommendations */
.snippet-recommendations-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.snippet-recommendations-list li {
  padding: var(--space-xs) 0 var(--space-xs) var(--space-lg);
  position: relative;
  font-size: 0.875rem;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

.snippet-recommendations-list li:last-child {
  border-bottom: none;
}

.snippet-recommendations-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--warning);
}

.snippet-recommendations-list li.snippet-good {
  color: var(--success);
}

.snippet-recommendations-list li.snippet-good::before {
  content: "✓";
  color: var(--success);
}

/* Loading state */
#snippetAnalyzeBtn.loading {
  pointer-events: none;
  opacity: 0.7;
}

/* Light theme adjustments */
.theme-light .snippet-preview-domain {
  color: #202124;
}

.theme-light .snippet-preview-path {
  color: #5f6368;
}

.theme-light .snippet-preview-box {
  background: linear-gradient(180deg, rgba(66, 133, 244, 0.08) 0%, rgba(66, 133, 244, 0.02) 100%);
}

/* Responsive */
@media (max-width: 640px) {
  .snippet-type-tabs {
    justify-content: space-between;
  }

  .snippet-type-tab {
    min-width: calc(25% - var(--space-xs));
    padding: var(--space-xs);
  }

  .snippet-type-tab .tab-label {
    display: none;
  }

  .snippet-type-tab .tab-icon {
    font-size: 1.5rem;
  }

  .snippet-score-display {
    flex-direction: column;
    text-align: center;
  }

  .snippet-input-row {
    flex-direction: column;
  }
}

/* ============================================================
   Plagiarism Checker
   ============================================================ */

#plagiarismCard {
  margin-top: var(--space-md);
}

.plagiarism-grade-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  font-weight: 700;
  font-size: var(--font-size-sm);
}

.plagiarism-grade-badge.grade-a { background: var(--success-bg); color: var(--success); }
.plagiarism-grade-badge.grade-b { background: rgba(52, 211, 153, 0.15); color: #22c55e; }
.plagiarism-grade-badge.grade-c { background: rgba(251, 191, 36, 0.15); color: var(--warning); }
.plagiarism-grade-badge.grade-d { background: rgba(249, 115, 22, 0.15); color: #f97316; }
.plagiarism-grade-badge.grade-f { background: var(--danger-bg); color: var(--danger); }

.plagiarism-score-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-lg) 0;
}

.plagiarism-score-circle {
  position: relative;
  width: 140px;
  height: 140px;
}

.plagiarism-score-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.plagiarism-score-bg {
  fill: none;
  stroke: var(--surface-elevated);
  stroke-width: 8;
}

.plagiarism-score-progress {
  fill: none;
  stroke: var(--accent);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 1s ease-out, stroke 0.3s ease;
}

.plagiarism-score-progress.score-high { stroke: var(--success); }
.plagiarism-score-progress.score-medium { stroke: var(--warning); }
.plagiarism-score-progress.score-low { stroke: var(--danger); }

.plagiarism-score-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 36px;
  font-weight: 700;
  color: var(--text-primary);
}

.plagiarism-score-label {
  margin-top: var(--space-sm);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.plagiarism-summary {
  display: flex;
  justify-content: center;
  gap: var(--space-xl);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border);
}

.plagiarism-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.plagiarism-stat .stat-number {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
}

.plagiarism-stat .stat-number.flagged {
  color: var(--danger);
}

.plagiarism-stat .stat-number.original {
  color: var(--success);
}

.plagiarism-stat .stat-label {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

.plagiarism-recommendations {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
}

.plagiarism-recommendations h4 {
  margin: 0 0 var(--space-md) 0;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
}

.plagiarism-recommendations-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.plagiarism-recommendations-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  background: var(--glass);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--border);
}

.plagiarism-recommendations-list li.priority-high {
  border-left-color: var(--danger);
  background: var(--danger-bg);
}

.plagiarism-recommendations-list li.priority-medium {
  border-left-color: var(--warning);
  background: rgba(251, 191, 36, 0.1);
}

.plagiarism-recommendations-list li.priority-low {
  border-left-color: var(--info);
  background: rgba(56, 189, 248, 0.1);
}

.plagiarism-recommendations-list li.priority-info {
  border-left-color: var(--success);
  background: var(--success-bg);
}

.plagiarism-sentences-section {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
}

.plagiarism-sentences-section h4 {
  margin: 0 0 var(--space-md) 0;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
}

.plagiarism-filter-bar {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.plagiarism-filter-btn {
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.plagiarism-filter-btn:hover {
  background: var(--glass);
  border-color: var(--border-strong);
}

.plagiarism-filter-btn.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.plagiarism-sentences-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-height: 400px;
  overflow-y: auto;
}

.plagiarism-sentence-item {
  padding: var(--space-md);
  background: var(--glass);
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--border);
}

.plagiarism-sentence-item.flagged {
  border-left-color: var(--danger);
  background: var(--danger-bg);
}

.plagiarism-sentence-item.original {
  border-left-color: var(--success);
  background: var(--success-bg);
}

.plagiarism-sentence-item .sentence-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
}

.plagiarism-sentence-item .sentence-status {
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.plagiarism-sentence-item.flagged .sentence-status {
  color: var(--danger);
}

.plagiarism-sentence-item.original .sentence-status {
  color: var(--success);
}

.plagiarism-sentence-item .similarity-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.plagiarism-sentence-item .similarity-fill {
  width: 60px;
  height: 6px;
  background: var(--surface-elevated);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}

.plagiarism-sentence-item .similarity-fill::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: attr(style width);
  background: var(--danger);
  border-radius: 3px;
}

.plagiarism-sentence-item .similarity-bar span {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.plagiarism-sentence-item .sentence-text {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  line-height: 1.6;
  margin-bottom: var(--space-sm);
}

.plagiarism-sentence-item .sentence-source,
.plagiarism-sentence-item .sentence-indicators {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  padding: var(--space-xs) 0;
}

.plagiarism-sentence-item .sentence-source strong,
.plagiarism-sentence-item .sentence-indicators strong {
  color: var(--text-secondary);
}

.plagiarism-details-toggle {
  margin-top: var(--space-md);
  text-align: center;
}

.plagiarism-details-section {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--surface);
  border-radius: var(--radius-sm);
}

.plagiarism-details-section .code-block {
  max-height: 300px;
  overflow: auto;
  font-size: var(--font-size-xs);
}

/* Plagiarism Button Loading State */
#plagiarismCheckBtn.loading {
  pointer-events: none;
  opacity: 0.7;
}

/* Light theme overrides for plagiarism */
.theme-light .plagiarism-sentence-item {
  background: rgba(0, 0, 0, 0.03);
}

.theme-light .plagiarism-sentence-item.flagged {
  background: rgba(248, 113, 113, 0.1);
}

.theme-light .plagiarism-sentence-item.original {
  background: rgba(52, 211, 153, 0.1);
}

.theme-light .plagiarism-score-bg {
  stroke: #e5e7eb;
}

.theme-light .plagiarism-details-section {
  background: #f9fafb;
}

.theme-light .plagiarism-filter-btn.active {
  background: var(--accent);
  color: white;
}

/* ============================================================
   Content Readability Analyzer
   ============================================================ */

#readabilityCard {
  margin-top: var(--space-md);
}

.readability-grade-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  font-weight: 700;
  font-size: var(--font-size-sm);
}

.readability-grade-badge.grade-easy { background: var(--success-bg); color: var(--success); }
.readability-grade-badge.grade-medium { background: rgba(251, 191, 36, 0.15); color: var(--warning); }
.readability-grade-badge.grade-hard { background: var(--danger-bg); color: var(--danger); }
.readability-grade-badge.grade-match { background: var(--success-bg); color: var(--success); }
.readability-grade-badge.grade-mismatch { background: rgba(249, 115, 22, 0.15); color: #f97316; }

/* Audience Selector */
.readability-audience-selector {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
}

.readability-audience-selector .field {
  margin-top: var(--space-xs);
}

/* Main Score Circle */
.readability-score-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-lg) 0;
}

.readability-score-circle {
  position: relative;
  width: 140px;
  height: 140px;
}

.readability-score-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.readability-score-bg {
  fill: none;
  stroke: var(--surface-elevated);
  stroke-width: 8;
}

.readability-score-progress {
  fill: none;
  stroke: var(--accent);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 1s ease-out, stroke 0.3s ease;
}

.readability-score-progress.score-easy { stroke: var(--success); }
.readability-score-progress.score-medium { stroke: var(--warning); }
.readability-score-progress.score-hard { stroke: var(--danger); }

.readability-score-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 36px;
  font-weight: 700;
  color: var(--text-primary);
}

.readability-score-label {
  margin-top: var(--space-sm);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.readability-level {
  margin-top: var(--space-xs);
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
}

/* Quick Stats */
.readability-quick-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border);
}

.readability-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.readability-stat .stat-number {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.readability-stat .stat-label {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

/* Readability Metrics Gauges */
.readability-metrics {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
}

.readability-metrics h4 {
  margin: 0 0 var(--space-md);
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
}

.readability-gauge-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.readability-gauge-item {
  padding: var(--space-sm) var(--space-md);
  background: var(--glass);
  border-radius: var(--radius-sm);
}

.gauge-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xs);
}

.gauge-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.gauge-value {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.gauge-bar {
  height: 8px;
  background: var(--surface-elevated);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.gauge-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s ease-out, background-color 0.3s ease;
  position: relative;
}

/* Flesch Ease (0-100, higher is better/easier) */
.gauge-fill.flesch-ease { background: linear-gradient(90deg, var(--danger), var(--warning) 50%, var(--success)); }
.gauge-fill.flesch-ease.easy { background: var(--success); }
.gauge-fill.flesch-ease.medium { background: var(--warning); }
.gauge-fill.flesch-ease.hard { background: var(--danger); }

/* FK Grade (1-18, lower is easier) */
.gauge-fill.fk-grade { background: linear-gradient(90deg, var(--success), var(--warning) 50%, var(--danger)); }
.gauge-fill.fk-grade.easy { background: var(--success); }
.gauge-fill.fk-grade.medium { background: var(--warning); }
.gauge-fill.fk-grade.hard { background: var(--danger); }

/* Gunning Fog (6-17+, lower is easier) */
.gauge-fill.gunning-fog { background: linear-gradient(90deg, var(--success), var(--warning) 50%, var(--danger)); }
.gauge-fill.gunning-fog.easy { background: var(--success); }
.gauge-fill.gunning-fog.medium { background: var(--warning); }
.gauge-fill.gunning-fog.hard { background: var(--danger); }

/* SMOG (6-18, lower is easier) */
.gauge-fill.smog { background: linear-gradient(90deg, var(--success), var(--warning) 50%, var(--danger)); }
.gauge-fill.smog.easy { background: var(--success); }
.gauge-fill.smog.medium { background: var(--warning); }
.gauge-fill.smog.hard { background: var(--danger); }

/* Avg Word Length (3-8+, lower is simpler) */
.gauge-fill.avg-word { background: linear-gradient(90deg, var(--success), var(--warning) 50%, var(--danger)); }
.gauge-fill.avg-word.easy { background: var(--success); }
.gauge-fill.avg-word.medium { background: var(--warning); }
.gauge-fill.avg-word.hard { background: var(--danger); }

.gauge-scale {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Grade Level Indicator */
.readability-grade-indicator {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
}

.readability-grade-indicator h4 {
  margin: 0 0 var(--space-md);
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
}

.grade-level-bar {
  position: relative;
  padding: var(--space-lg) 0;
  margin-bottom: var(--space-md);
}

.grade-level-track {
  display: flex;
  justify-content: space-between;
  position: relative;
  background: linear-gradient(90deg,
    var(--success) 0%,
    #22c55e 20%,
    var(--warning) 40%,
    #f97316 60%,
    var(--danger) 80%,
    #dc2626 100%
  );
  height: 8px;
  border-radius: 4px;
  margin-bottom: var(--space-md);
}

.grade-marker {
  position: relative;
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  flex: 1;
  padding-top: var(--space-md);
}

.grade-marker::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 16px;
  background: var(--border-strong);
}

.grade-level-pointer {
  position: absolute;
  top: 0;
  width: 20px;
  height: 20px;
  background: var(--accent);
  border: 3px solid var(--surface);
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: var(--shadow-sm);
  transition: left 0.6s ease-out, background 0.3s ease;
  z-index: 1;
}

.grade-level-pointer.level-elementary { background: var(--success); }
.grade-level-pointer.level-middle { background: #22c55e; }
.grade-level-pointer.level-high { background: var(--warning); }
.grade-level-pointer.level-college { background: #f97316; }
.grade-level-pointer.level-graduate { background: var(--danger); }

.grade-level-result {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

#gradeLevelText {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
}

.grade-match-badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.grade-match-badge.match {
  background: var(--success-bg);
  color: var(--success);
}

.grade-match-badge.too-easy {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.grade-match-badge.too-hard {
  background: var(--danger-bg);
  color: var(--danger);
}

/* Recommendations */
.readability-recommendations {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
}

.readability-recommendations h4 {
  margin: 0 0 var(--space-md);
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
}

.readability-recommendations-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.readability-recommendations-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}

.readability-recommendations-list li:last-child {
  border-bottom: none;
}

.readability-recommendations-list li.priority-high::before {
  content: "⚠️";
  flex-shrink: 0;
}

.readability-recommendations-list li.priority-medium::before {
  content: "💡";
  flex-shrink: 0;
}

.readability-recommendations-list li.priority-low::before {
  content: "ℹ️";
  flex-shrink: 0;
}

.readability-recommendations-list li.priority-success::before {
  content: "✅";
  flex-shrink: 0;
}

/* Complex Sentences Section */
.readability-complex-section {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
}

.complex-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

.complex-header h4 {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
}

.complex-sentences-list {
  max-height: 300px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.complex-sentence-item {
  padding: var(--space-sm) var(--space-md);
  background: var(--glass);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--warning);
}

.complex-sentence-item.very-complex {
  border-left-color: var(--danger);
}

.complex-sentence-text {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: var(--space-xs);
}

.complex-sentence-stats {
  display: flex;
  gap: var(--space-md);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.complex-sentence-stats span {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Details Section */
.readability-details-toggle {
  margin-top: var(--space-md);
  text-align: center;
}

.readability-details-section {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--surface);
  border-radius: var(--radius-sm);
}

.readability-details-section .code-block {
  max-height: 300px;
  overflow: auto;
  font-size: var(--font-size-xs);
}

/* Loading state */
#readabilityBtn.loading {
  pointer-events: none;
  opacity: 0.7;
}

#readabilityBtn.loading::after {
  content: "...";
  animation: dots 1.5s steps(4, end) infinite;
}

/* Preview highlight for complex sentences */
.highlight-complex-sentence {
  background: rgba(251, 191, 36, 0.3) !important;
  border-bottom: 2px wavy var(--warning) !important;
}

.highlight-very-complex-sentence {
  background: rgba(248, 113, 113, 0.3) !important;
  border-bottom: 2px wavy var(--danger) !important;
}

/* Light theme overrides for readability */
.theme-light .readability-gauge-item {
  background: rgba(0, 0, 0, 0.03);
}

.theme-light .readability-score-bg {
  stroke: #e5e7eb;
}

.theme-light .gauge-bar {
  background: #e5e7eb;
}

.theme-light .readability-details-section {
  background: #f9fafb;
}

.theme-light .complex-sentence-item {
  background: rgba(0, 0, 0, 0.02);
}

.theme-light .grade-level-pointer {
  border-color: #fff;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .readability-quick-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .grade-marker {
    font-size: 8px;
  }
}

/* ============================================================
   Image Alt Text Generator
   ============================================================ */

#altGenFieldset {
  margin-top: var(--space-md);
}

.alt-gen-controls {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.alt-gen-count {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.alt-gen-status {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.alt-gen-status.success {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid var(--success);
}

.alt-gen-status.error {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid var(--danger);
}

.alt-gen-status.warning {
  background: rgba(251, 191, 36, 0.1);
  color: var(--warning);
  border: 1px solid var(--warning);
}

.alt-gen-status.info {
  background: rgba(56, 189, 248, 0.1);
  color: var(--info);
  border: 1px solid var(--info);
}

/* === n8n Webhook Integration Styles === */
#webhookFieldset {
  margin-top: var(--space-md);
}

#webhookFieldset legend {
  display: flex;
  align-items: center;
  gap: 8px;
}

#webhookFieldset legend::before {
  content: "🔗";
}

.webhook-toggle-label {
  cursor: pointer;
  user-select: none;
}

.webhook-toggle-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.webhook-options {
  padding: var(--space-sm);
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.webhook-options label {
  cursor: pointer;
  font-size: 0.9rem;
}

.webhook-options input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.webhook-options input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.webhook-options input[type="checkbox"]:disabled + span {
  opacity: 0.5;
}

.webhook-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.webhook-status {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
}

.webhook-status-success {
  background: rgba(74, 222, 128, 0.15);
  color: var(--success, #4ade80);
  border: 1px solid var(--success, #4ade80);
}

.webhook-status-error {
  background: rgba(248, 113, 113, 0.15);
  color: var(--danger, #f87171);
  border: 1px solid var(--danger, #f87171);
}

.webhook-status-info {
  background: rgba(56, 189, 248, 0.1);
  color: var(--info, #38bdf8);
  border: 1px solid var(--info, #38bdf8);
}

#webhookUrl:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Light theme adjustments for webhook */
.theme-light .webhook-options {
  background: rgba(0, 0, 0, 0.03);
}

.theme-light .webhook-status-success {
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
  border-color: #16a34a;
}

.theme-light .webhook-status-error {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  border-color: #dc2626;
}

.alt-gen-image-list {
  margin-top: var(--space-md);
  max-height: 400px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.alt-gen-image-item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  align-items: center;
}

.alt-gen-image-preview {
  width: 80px;
  height: 60px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.alt-gen-image-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.alt-gen-image-preview .image-error {
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  padding: 4px;
}

.alt-gen-image-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}

.alt-gen-image-src {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alt-gen-image-status {
  font-size: 12px;
  color: var(--text-secondary);
}

.alt-gen-image-status.loading {
  color: var(--info);
}

.alt-gen-image-status.success {
  color: var(--success);
}

.alt-gen-image-status.error {
  color: var(--danger);
}

.alt-gen-input {
  width: 100%;
  margin-top: var(--space-xs);
  font-size: var(--font-size-sm);
}

.alt-gen-image-actions {
  flex-shrink: 0;
}

.alt-gen-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  align-items: center;
  flex-wrap: wrap;
}

.alt-gen-progress {
  font-size: var(--font-size-sm);
  color: var(--info);
}

.alt-gen-empty {
  text-align: center;
  padding: var(--space-lg);
  color: var(--success);
  font-size: var(--font-size-sm);
}

/* Light theme adjustments */
.theme-light .alt-gen-image-item {
  background: var(--surface);
}

.theme-light .alt-gen-image-preview {
  background: #f3f4f6;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .alt-gen-image-item {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .alt-gen-image-preview {
    width: 100%;
    height: 100px;
  }

  .alt-gen-image-actions {
    width: 100%;
  }

  .alt-gen-image-actions .btn {
    width: 100%;
  }
}

/* ============================================================
   SCHEMA GENERATOR
   ============================================================ */

#schema-generator-tab .panel-left {
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

.schema-form {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

.schema-form-header {
  margin-bottom: var(--space-md);
}

.schema-form-header h3 {
  margin: 0 0 var(--space-xs) 0;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
}

.schema-items-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.schema-item,
.breadcrumb-item,
.howto-step-item {
  padding: var(--space-md);
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.schema-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
}

.schema-item-label {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--accent);
}

.schema-remove-item,
.remove-step-btn,
.remove-tool-btn,
.remove-supply-btn,
.remove-hours-btn {
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  padding: 4px 8px;
}

.schema-remove-item:hover,
.remove-step-btn:hover,
.remove-tool-btn:hover,
.remove-supply-btn:hover,
.remove-hours-btn:hover {
  color: var(--danger);
  background: rgba(248, 113, 113, 0.1);
}

/* FAQ Form */
.faq-item .faq-question {
  margin-bottom: var(--space-xs);
}

/* HowTo Form */
.howto-tool-row,
.howto-supply-row {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  margin-bottom: var(--space-xs);
}

.howto-tool-row input,
.howto-supply-row input {
  flex: 1;
}

/* Opening Hours */
.opening-hours-row {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  margin-bottom: var(--space-sm);
  flex-wrap: wrap;
}

.opening-hours-row span {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.opening-hours-row input[type="time"] {
  max-width: 110px;
}

/* Breadcrumb Form */
.breadcrumb-item {
  padding: var(--space-md);
}

/* Schema Output */
#schemaOutput {
  min-height: 200px;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

/* Schema Test Links */
.schema-test-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.schema-test-links a {
  text-decoration: none;
}

/* Schema Validation Status */
.schema-validation-status {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.schema-validation-status.valid {
  background: var(--success-bg);
  color: var(--success);
}

.schema-validation-status.invalid {
  background: var(--danger-bg);
  color: var(--danger);
}

.schema-validation-status .validation-icon {
  font-weight: 700;
  font-size: var(--font-size-lg);
}

/* Schema Preview */
.schema-preview {
  min-height: 100px;
}

.schema-preview-faq,
.schema-preview-product,
.schema-preview-business,
.schema-preview-article,
.schema-preview-howto,
.schema-preview-breadcrumb {
  padding: var(--space-md);
  background: var(--glass);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

/* FAQ Preview */
.preview-faq-item {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border);
}

.preview-faq-item:last-child {
  border-bottom: none;
}

.preview-faq-question {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.preview-faq-answer {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* Product Preview */
.preview-product-name {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.preview-rating {
  color: #fbbf24;
  margin-bottom: var(--space-xs);
}

.preview-price {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--success);
  margin-bottom: var(--space-xs);
}

.preview-availability {
  font-size: var(--font-size-sm);
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
}

.preview-availability.in-stock {
  background: var(--success-bg);
  color: var(--success);
}

.preview-availability.out-stock {
  background: var(--danger-bg);
  color: var(--danger);
}

/* Business Preview */
.preview-business-name {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.preview-address,
.preview-phone {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-top: var(--space-xs);
}

/* Article Preview */
.preview-article-headline {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--accent);
  margin-bottom: var(--space-xs);
}

.preview-author {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.preview-date {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

.preview-description {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-top: var(--space-sm);
  line-height: 1.5;
}

/* HowTo Preview */
.preview-howto-title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.preview-time {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}

.preview-steps {
  margin-top: var(--space-sm);
}

.preview-step {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.preview-step .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  font-size: var(--font-size-xs);
  font-weight: 600;
  flex-shrink: 0;
}

.preview-more {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  font-style: italic;
  margin-top: var(--space-sm);
}

/* Breadcrumb Preview */
.schema-preview-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.breadcrumb-sep {
  color: var(--text-muted);
}

.breadcrumb-item-preview {
  color: var(--accent);
  font-size: var(--font-size-sm);
}

.breadcrumb-item-preview:last-child {
  color: var(--text-primary);
  font-weight: 500;
}

/* Light theme overrides */
.theme-light .schema-item,
.theme-light .breadcrumb-item,
.theme-light .howto-step-item {
  background: rgba(0, 0, 0, 0.02);
  border-color: var(--border);
}

.theme-light .schema-preview-faq,
.theme-light .schema-preview-product,
.theme-light .schema-preview-business,
.theme-light .schema-preview-article,
.theme-light .schema-preview-howto,
.theme-light .schema-preview-breadcrumb {
  background: rgba(0, 0, 0, 0.02);
}

/* Responsive */
@media (max-width: 768px) {
  #schema-generator-tab .dashboard {
    grid-template-columns: 1fr;
  }

  #schema-generator-tab .panel-left {
    position: static;
    max-height: none;
    width: 100%;
  }

  .opening-hours-row {
    flex-wrap: wrap;
  }

  .opening-hours-row select,
  .opening-hours-row input[type="time"] {
    flex: 1;
    min-width: 100px;
  }

  .schema-test-links {
    flex-direction: column;
  }

  .schema-test-links a {
    width: 100%;
    text-align: center;
  }
}

/* ============================================================
   Page History & Versions
   ============================================================ */
#pageHistoryCard {
  margin-top: var(--space-lg);
}

#pageHistoryCard .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#pageHistoryCard .badge {
  background: var(--accent);
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.history-controls {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-height: 500px;
  overflow-y: auto;
}

.history-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.history-item:hover {
  background: var(--surface-elevated);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.history-item-main {
  flex: 1;
  min-width: 0;
}

.history-item-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.history-type-icon {
  font-size: var(--font-size-lg);
}

.history-title-text {
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.history-type-badge {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: 600;
}

.history-type-badge.improved {
  background: var(--success-bg);
  color: var(--success);
}

.history-type-badge.manual {
  background: var(--info);
  background: rgba(56, 189, 248, 0.15);
  color: var(--info);
}

.history-item-meta {
  display: flex;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  flex-wrap: wrap;
}

.history-item-meta span {
  display: inline-flex;
  align-items: center;
}

.history-time {
  color: var(--text-muted);
}

.history-lang, .history-dir {
  background: var(--glass);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: var(--font-size-xs);
}

.history-notes {
  margin-top: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-item-actions {
  display: flex;
  gap: var(--space-xs);
  flex-shrink: 0;
}

.history-item-actions .btn {
  padding: 4px 8px;
  font-size: var(--font-size-sm);
  min-width: unset;
}

/* Diff Panel */
.history-diff-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-md);
}

.diff-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

.diff-selectors {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}

.diff-selectors > div {
  flex: 1;
  min-width: 150px;
}

.diff-output {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
}

.diff-line {
  padding: 2px 8px;
  border-radius: 2px;
}

.diff-line.diff-add {
  background: rgba(52, 211, 153, 0.15);
  color: var(--success);
}

.diff-line.diff-del {
  background: rgba(248, 113, 113, 0.15);
  color: var(--danger);
}

.diff-line.diff-same {
  color: var(--text-muted);
}

.diff-stats {
  background: var(--glass);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* Light theme adjustments */
.theme-light .history-item {
  background: var(--surface);
  border-color: var(--border);
}

.theme-light .history-item:hover {
  background: var(--bg-secondary);
}

.theme-light .diff-line.diff-add {
  background: rgba(52, 211, 153, 0.1);
}

.theme-light .diff-line.diff-del {
  background: rgba(248, 113, 113, 0.1);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .history-item {
    flex-direction: column;
  }

  .history-item-actions {
    width: 100%;
    justify-content: flex-end;
    margin-top: var(--space-sm);
  }

  .history-title-text {
    max-width: 150px;
  }

  .diff-selectors {
    flex-direction: column;
  }
}

/* ==========================================
   COMPETITOR ANALYSIS STYLES
   ========================================== */

.competitor-analysis-section {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

.competitor-analysis-section h3 {
  margin: 0 0 var(--space-xs) 0;
  font-size: var(--font-size-lg);
}

.competitor-score-overview {
  margin-bottom: var(--space-lg);
}

.competitor-score-card {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-md);
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

.competitor-score-card .score-circle {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.competitor-score-card .score-circle svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.competitor-score-card .score-circle circle {
  transition: stroke-dashoffset 0.5s ease-out, stroke 0.3s ease;
}

.grade-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 1.1rem;
}

/* SEO Comparison Table Styles */
#competitorComparisonTable tr.status-good td:first-child {
  border-left: 3px solid var(--success);
}

#competitorComparisonTable tr.status-warning td:first-child {
  border-left: 3px solid var(--warning);
}

#competitorComparisonTable tr.status-error td:first-child {
  border-left: 3px solid var(--danger);
}

/* Recommendations List */
.recommendations-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.recommendation-item {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.recommendation-item:last-child {
  border-bottom: none;
}

.recommendation-item.priority-high {
  background: rgba(239, 68, 68, 0.05);
  padding-left: var(--space-sm);
  border-radius: var(--radius-sm);
}

.recommendation-item.priority-medium {
  background: rgba(234, 179, 8, 0.05);
  padding-left: var(--space-sm);
  border-radius: var(--radius-sm);
}

/* Competitor Details Sections */
.competitor-details {
  margin-bottom: var(--space-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.competitor-details summary {
  cursor: pointer;
  padding: var(--space-sm) var(--space-md);
  font-weight: 500;
  background: var(--surface);
  user-select: none;
  transition: background 0.2s ease;
}

.competitor-details summary:hover {
  background: var(--bg-secondary);
}

.competitor-details[open] summary {
  border-bottom: 1px solid var(--border);
}

.competitor-details .details-content {
  padding: var(--space-md);
  background: var(--bg);
}

/* Status message styles for competitor analysis */
#competitorStatus.loading {
  color: var(--primary);
}

#competitorStatus.loading::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--primary);
  border-top-color: transparent;
  border-radius: 50%;
  margin-right: var(--space-xs);
  animation: spin 1s linear infinite;
  vertical-align: middle;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Light theme adjustments for competitor analysis */
.theme-light .competitor-score-card {
  background: var(--surface);
  border-color: var(--border);
}

.theme-light .competitor-details summary {
  background: var(--surface);
}

.theme-light .competitor-details .details-content {
  background: var(--bg);
}

.theme-light .recommendation-item.priority-high {
  background: rgba(239, 68, 68, 0.08);
}

.theme-light .recommendation-item.priority-medium {
  background: rgba(234, 179, 8, 0.08);
}

/* Mobile responsiveness for competitor analysis */
@media (max-width: 768px) {
  .competitor-score-card {
    flex-direction: column;
    text-align: center;
  }

  .competitor-score-card .score-info {
    text-align: center;
  }

  #competitorUrlDisplay {
    max-width: 100% !important;
  }
}

/* ============================================================
   Internal Linking Suggester
   ============================================================ */
.internal-linking-section {
  margin-top: var(--space-lg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--glass);
}

.internal-linking-section > summary {
  cursor: pointer;
  padding: var(--space-md);
  font-weight: 600;
  font-size: var(--font-size-base);
  color: var(--text-primary);
  user-select: none;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  transition: background var(--transition-fast);
}

.internal-linking-section > summary:hover {
  background: var(--glass-light);
}

.internal-linking-section[open] > summary {
  border-bottom: 1px solid var(--border);
}

.internal-linking-fields {
  padding: var(--space-md);
}

.sitemap-input-row {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.sitemap-input-row .field {
  flex: 1;
}

.sitemap-fetch-status {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.sitemap-fetch-status.status-loading {
  background: rgba(108, 140, 255, 0.1);
  color: var(--accent);
}

.sitemap-fetch-status.status-success {
  background: var(--success-bg);
  color: var(--success);
}

.sitemap-fetch-status.status-error {
  background: var(--danger-bg);
  color: var(--danger);
}

.manual-pages-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.stored-pages-section {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

.stored-pages-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
}

.stored-pages-list {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.15);
}

.stored-page-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border);
  transition: background var(--transition-fast);
}

.stored-page-item:last-child {
  border-bottom: none;
}

.stored-page-item:hover {
  background: var(--glass-light);
}

.stored-page-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.stored-page-title {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stored-page-url {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.remove-page-btn {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: 16px;
  color: var(--text-muted);
}

.remove-page-btn:hover {
  color: var(--danger);
  background: var(--danger-bg);
}

.empty-state-small {
  padding: var(--space-md);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.linking-actions {
  margin-top: var(--space-lg);
}

.linking-actions .btn {
  width: 100%;
}

.link-suggestions-container {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

.suggestions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

.suggestions-header h4 {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
}

.link-suggestions-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.link-suggestion-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.link-suggestion-item:hover {
  border-color: var(--border-strong);
  background: var(--surface-elevated);
}

.link-suggestion-item.inserted {
  opacity: 0.6;
  background: var(--success-bg);
  border-color: var(--success);
}

.suggestion-main {
  flex: 1;
  min-width: 0;
}

.suggestion-anchor {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-xs);
}

.suggestion-anchor strong {
  color: var(--text-primary);
  word-break: break-word;
}

.confidence-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.confidence-badge.confidence-high {
  background: var(--success-bg);
  color: var(--success);
}

.confidence-badge.confidence-medium {
  background: rgba(251, 191, 36, 0.15);
  color: var(--warning);
}

.confidence-badge.confidence-low {
  background: var(--glass);
  color: var(--text-muted);
}

.suggestion-target {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-xs);
}

.target-arrow {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.suggestion-target a {
  color: var(--accent);
  font-size: var(--font-size-sm);
  text-decoration: none;
  word-break: break-all;
}

.suggestion-target a:hover {
  text-decoration: underline;
}

.suggestion-context {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  line-height: 1.4;
  word-break: break-word;
}

.context-label {
  font-weight: 500;
  color: var(--text-secondary);
}

.suggestion-actions {
  flex-shrink: 0;
}

/* Light theme overrides for Internal Linking */
.theme-light .internal-linking-section {
  background: var(--surface-elevated);
  border-color: var(--border);
}

.theme-light .stored-pages-list {
  background: var(--surface);
}

.theme-light .link-suggestion-item {
  background: var(--surface);
}

.theme-light .link-suggestion-item:hover {
  background: var(--surface-elevated);
}

.theme-light .link-suggestion-item.inserted {
  background: rgba(5, 150, 105, 0.08);
}

/* Mobile responsiveness for Internal Linking */
@media (max-width: 520px) {
  .link-suggestion-item {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .suggestion-actions {
    width: 100%;
  }

  .suggestion-actions .btn {
    width: 100%;
  }
}

/* ============================================================
   AI VISIBILITY TRACKER (GEO) STYLES
   ============================================================ */

/* Info box */
.aiv-info-box {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  background: linear-gradient(135deg, rgba(108, 140, 255, 0.1), rgba(167, 139, 250, 0.08));
  border: 1px solid var(--accent-glow);
  border-radius: var(--radius);
  margin-bottom: var(--space-lg);
}

.aiv-info-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.aiv-info-content strong {
  display: block;
  font-size: var(--font-size-base);
  color: var(--accent);
  margin-bottom: 4px;
}

.aiv-info-content p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* API Notice */
.aiv-api-notice {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--glass);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  margin-top: var(--space-lg);
}

.aiv-notice-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.aiv-notice-content {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  line-height: 1.5;
}

.aiv-notice-content strong {
  color: var(--text-secondary);
}

.aiv-notice-content a {
  color: var(--accent);
  text-decoration: none;
}

.aiv-notice-content a:hover {
  text-decoration: underline;
}

/* Tracked brands list */
.aiv-brands-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  max-height: 250px;
  overflow-y: auto;
}

.aiv-brand-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.aiv-brand-item:hover {
  background: var(--glass-light);
  border-color: var(--border-strong);
}

.aiv-brand-item.active {
  background: rgba(108, 140, 255, 0.1);
  border-color: var(--accent);
}

.aiv-brand-info {
  flex: 1;
  min-width: 0;
}

.aiv-brand-name {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aiv-brand-domain {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.aiv-brand-score {
  font-weight: 700;
  font-size: var(--font-size-md);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--glass-strong);
}

.aiv-brand-score.high {
  color: var(--success);
  background: var(--success-bg);
}

.aiv-brand-score.medium {
  color: var(--warning);
  background: rgba(251, 191, 36, 0.15);
}

.aiv-brand-score.low {
  color: var(--danger);
  background: var(--danger-bg);
}

.aiv-remove-brand {
  opacity: 0;
  transition: opacity var(--transition-fast);
  padding: 4px 8px !important;
  font-size: 16px !important;
}

.aiv-brand-item:hover .aiv-remove-brand {
  opacity: 1;
}

/* Overview grid */
.aiv-overview-section {
  margin-bottom: var(--space-lg);
}

.aiv-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

@media (max-width: 900px) {
  .aiv-overview-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .aiv-overview-grid {
    grid-template-columns: 1fr;
  }
}

.aiv-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-lg);
  text-align: center;
  transition: all var(--transition-fast);
}

.aiv-stat-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-glow);
}

.aiv-stat-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.2;
}

.aiv-stat-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-top: 4px;
}

.aiv-stat-change {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: 8px;
}

.aiv-stat-change.positive {
  color: var(--success);
}

.aiv-stat-change.negative {
  color: var(--danger);
}

/* Platform breakdown */
.aiv-platform-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.aiv-platform-row {
  display: grid;
  grid-template-columns: 140px 100px 70px 70px 1fr;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border);
}

.aiv-platform-row:last-child {
  border-bottom: none;
}

@media (max-width: 768px) {
  .aiv-platform-row {
    grid-template-columns: 1fr auto;
    gap: var(--space-sm);
  }

  .aiv-platform-citations,
  .aiv-platform-position,
  .aiv-platform-bar {
    display: none;
  }
}

.aiv-platform-info {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.aiv-platform-icon {
  font-size: 18px;
}

.aiv-platform-name {
  font-weight: 500;
  font-size: var(--font-size-sm);
}

.aiv-platform-citations {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.aiv-platform-change {
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.aiv-platform-change.positive {
  color: var(--success);
}

.aiv-platform-change.negative {
  color: var(--danger);
}

.aiv-platform-position {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.aiv-platform-bar {
  height: 8px;
  background: var(--glass-strong);
  border-radius: 4px;
  overflow: hidden;
}

.aiv-platform-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width var(--transition-slow);
}

/* Mentions list */
.aiv-mentions-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-height: 400px;
  overflow-y: auto;
}

.aiv-mention-item {
  padding: var(--space-md);
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all var(--transition-fast);
}

.aiv-mention-item:hover {
  border-color: var(--border-strong);
  background: var(--glass-light);
}

.aiv-mention-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  flex-wrap: wrap;
}

.aiv-mention-platform {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: white;
}

.aiv-mention-position {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-glow);
  padding: 2px 8px;
  border-radius: 4px;
}

.aiv-mention-time {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-left: auto;
}

.aiv-mention-query {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  font-weight: 500;
  margin-bottom: 6px;
}

.aiv-mention-snippet {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  font-style: italic;
}

/* Query list */
.aiv-query-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.aiv-query-item {
  display: grid;
  grid-template-columns: 30px 1fr auto auto;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--glass);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.aiv-query-item:hover {
  background: var(--glass-light);
}

.aiv-query-rank {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
}

.aiv-query-text {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aiv-query-mentions {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  white-space: nowrap;
}

.aiv-query-trend {
  font-size: var(--font-size-xs);
  font-weight: 600;
  white-space: nowrap;
}

.aiv-query-trend.positive {
  color: var(--success);
}

.aiv-query-trend.negative {
  color: var(--danger);
}

/* Empty state */
.aiv-empty-state {
  text-align: center;
  padding: var(--space-2xl);
}

.aiv-empty-icon {
  font-size: 48px;
  margin-bottom: var(--space-md);
  opacity: 0.7;
}

.aiv-empty-state h3 {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-lg);
  color: var(--text-primary);
}

.aiv-empty-state p {
  margin: 0 0 var(--space-lg);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.aiv-platforms-preview {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.aiv-platform-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: white;
  transition: transform var(--transition-fast);
}

.aiv-platform-badge:hover {
  transform: scale(1.05);
}

.aiv-platform-badge.chatgpt {
  background: #10a37f;
}

.aiv-platform-badge.perplexity {
  background: #20b2aa;
}

.aiv-platform-badge.claude {
  background: #d97706;
}

.aiv-platform-badge.gemini {
  background: #4285f4;
}

.aiv-platform-badge.grok {
  background: #1d9bf0;
}

/* Light theme adjustments for AI Visibility */
.theme-light .aiv-info-box {
  background: linear-gradient(135deg, rgba(79, 108, 229, 0.08), rgba(124, 92, 219, 0.06));
  border-color: rgba(79, 108, 229, 0.2);
}

.theme-light .aiv-stat-card {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.theme-light .aiv-mention-item {
  background: var(--surface-elevated);
}

.theme-light .aiv-brand-item {
  background: var(--surface);
}

.theme-light .aiv-brand-item.active {
  background: rgba(79, 108, 229, 0.08);
}

/* Mobile adjustments */
@media (max-width: 520px) {
  .aiv-query-item {
    grid-template-columns: 24px 1fr auto;
  }

  .aiv-query-trend {
    display: none;
  }

  .aiv-mention-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .aiv-mention-time {
    margin-left: 0;
  }
}

/* ============================================================
   AI VISIBILITY SUBTABS & GEO FEATURES
   ============================================================ */

/* Subtab Navigation */
.aiv-subtabs-container {
  padding: var(--space-md);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  overflow-x: auto;
}

.aiv-subtabs {
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-xs);
  background: var(--glass);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  min-width: max-content;
}

.aiv-subtab-btn {
  padding: var(--space-sm) var(--space-md);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-weight: 500;
  font-size: var(--font-size-sm);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.aiv-subtab-btn:hover {
  color: var(--text-primary);
  background: var(--glass-light);
}

.aiv-subtab-btn.active {
  background: var(--accent);
  color: white;
}

.aiv-subtab-content {
  display: none;
}

.aiv-subtab-content.active {
  display: contents;
}

/* AI Content Optimizer Styles */
.aco-score-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.aco-score-card {
  background: var(--surface-elevated);
  border-radius: var(--radius);
  padding: var(--space-md);
  text-align: center;
  border: 1px solid var(--border);
}

.aco-score-value {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--accent);
}

.aco-score-label {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

.aco-content-output {
  background: var(--glass);
  border-radius: var(--radius);
  padding: var(--space-md);
  border: 1px solid var(--border);
  line-height: 1.7;
  white-space: pre-wrap;
}

.aco-suggestions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.aco-suggestion-item {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--glass);
  border-radius: var(--radius);
  border-left: 3px solid var(--accent);
}

.aco-suggestion-icon {
  font-size: var(--font-size-lg);
}

.aco-suggestion-text {
  flex: 1;
  font-size: var(--font-size-sm);
}

.aco-faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.aco-faq-item {
  background: var(--glass);
  border-radius: var(--radius);
  padding: var(--space-md);
  border: 1px solid var(--border);
}

.aco-faq-question {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.aco-faq-answer {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

.aco-features-list, .eb-features-list, .kgb-features-list, .asa-features-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  justify-content: center;
}

.aco-feature, .eb-feature, .kgb-feature, .asa-feature {
  background: var(--glass);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

/* Entity Builder Styles */
.eb-score-section {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
  padding: var(--space-lg);
  background: var(--surface-elevated);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

.eb-completeness-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.eb-completeness-ring {
  width: 120px;
  height: 120px;
}

.eb-circular-chart {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 120px;
}

.eb-circle-bg {
  fill: none;
  stroke: var(--glass-strong);
  stroke-width: 3;
}

.eb-circle {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dasharray 0.6s ease;
}

.eb-percentage {
  fill: var(--text-primary);
  font-size: 0.5em;
  font-weight: 700;
  text-anchor: middle;
}

.eb-completeness-label {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  font-weight: 500;
}

.eb-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.eb-checklist-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  transition: background 0.2s;
}

.eb-checklist-item:hover {
  background: var(--glass);
}

.eb-checklist-icon {
  width: 18px;
  text-align: center;
}

.eb-checklist-item.complete .eb-checklist-icon {
  color: var(--success);
}

.eb-checklist-item.incomplete .eb-checklist-icon {
  color: var(--text-muted);
}

.eb-wiki-content {
  background: var(--glass);
  border-radius: var(--radius);
  padding: var(--space-lg);
  border: 1px solid var(--border);
  line-height: 1.8;
}

.eb-wiki-content p {
  margin: 0 0 var(--space-md) 0;
}

.eb-wiki-content p:last-child {
  margin-bottom: 0;
}

.eb-suggestions-list, .eb-tips-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.eb-suggestion-item, .eb-tip-item {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--glass);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.eb-suggestion-icon, .eb-tip-icon {
  font-size: var(--font-size-lg);
  flex-shrink: 0;
}

.eb-suggestion-content, .eb-tip-content {
  flex: 1;
}

.eb-suggestion-title, .eb-tip-title {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.eb-suggestion-desc, .eb-tip-desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

.eb-suggestion-link {
  display: inline-block;
  margin-top: var(--space-xs);
  color: var(--accent);
  font-size: var(--font-size-sm);
  text-decoration: none;
}

.eb-suggestion-link:hover {
  text-decoration: underline;
}

/* AI SERP Simulator Styles */
.ais-assessment-card {
  background: linear-gradient(135deg, var(--surface-elevated), var(--surface));
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  border: 1px solid var(--border);
}

.ais-assessment-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.ais-assessment-icon {
  font-size: var(--font-size-xl);
}

.ais-assessment-title {
  font-weight: 600;
  color: var(--text-primary);
}

.ais-assessment-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.ais-metric {
  text-align: center;
  padding: var(--space-md);
  background: var(--glass);
  border-radius: var(--radius);
}

.ais-metric-value {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--accent);
}

.ais-metric-label {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

.ais-responses-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.ais-response-card {
  background: var(--surface-elevated);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
}

.ais-response-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--glass);
  border-bottom: 1px solid var(--border);
}

.ais-response-platform {
  font-weight: 600;
}

.ais-response-badge {
  margin-left: auto;
  padding: var(--space-xs) var(--space-sm);
  background: var(--success-bg);
  color: var(--success);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.ais-response-badge.not-mentioned {
  background: var(--danger-bg);
  color: var(--danger);
}

.ais-response-body {
  padding: var(--space-md);
}

.ais-response-content {
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
}

.ais-response-sources {
  border-top: 1px solid var(--border);
  padding-top: var(--space-sm);
}

.ais-sources-label {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
}

.ais-sources-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.ais-source-tag {
  background: var(--glass);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.ais-source-tag.highlighted {
  background: var(--accent-glow);
  color: var(--accent);
  font-weight: 500;
}

.ais-recommendations {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.ais-recommendation-item {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--glass);
  border-radius: var(--radius);
  border-left: 3px solid var(--accent);
}

.ais-recommendation-icon {
  font-size: var(--font-size-lg);
  flex-shrink: 0;
}

.ais-recommendation-text {
  flex: 1;
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.ais-comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.ais-comparison-col h4 {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
}

.ais-response-preview {
  background: var(--glass);
  border-radius: var(--radius);
  padding: var(--space-md);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  border: 1px solid var(--border);
  max-height: 200px;
  overflow-y: auto;
}

.ais-response-preview.optimized {
  border-color: var(--success);
  background: var(--success-bg);
}

.ais-platforms-grid {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
}

.ais-platform-badge {
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.ais-platform-badge.chatgpt {
  background: rgba(16, 163, 127, 0.1);
  color: #10a37f;
}

.ais-platform-badge.perplexity {
  background: rgba(32, 178, 170, 0.1);
  color: #20b2aa;
}

.ais-platform-badge.gemini {
  background: rgba(66, 133, 244, 0.1);
  color: #4285f4;
}

.ais-platform-badge.claude {
  background: rgba(217, 119, 6, 0.1);
  color: #d97706;
}

/* Knowledge Graph Builder Styles */
.kgb-connection-map {
  background: var(--glass);
  border-radius: var(--radius);
  padding: var(--space-xl);
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
}

.kgb-map-center {
  background: var(--accent);
  color: white;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius);
  font-weight: 600;
  margin-bottom: var(--space-lg);
  box-shadow: var(--shadow-glow);
}

.kgb-map-connections {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
}

.kgb-connection-node {
  background: var(--surface-elevated);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius);
  font-size: var(--font-size-sm);
  border: 1px solid var(--border);
  position: relative;
}

.kgb-connection-node::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  width: 1px;
  height: 10px;
  background: var(--border);
}

.kgb-platform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-md);
}

.kgb-platform-card {
  background: var(--glass);
  border-radius: var(--radius);
  padding: var(--space-md);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.kgb-platform-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.kgb-platform-icon {
  font-size: var(--font-size-lg);
}

.kgb-platform-name {
  font-weight: 600;
}

.kgb-platform-status {
  margin-left: auto;
  font-size: var(--font-size-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
}

.kgb-platform-status.recommended {
  background: var(--success-bg);
  color: var(--success);
}

.kgb-platform-status.optional {
  background: var(--glass);
  color: var(--text-muted);
}

.kgb-platform-desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

.kgb-platform-link {
  color: var(--accent);
  font-size: var(--font-size-sm);
  text-decoration: none;
}

.kgb-platform-link:hover {
  text-decoration: underline;
}

.kgb-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.kgb-checklist-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--glass);
  border-radius: var(--radius);
}

.kgb-checklist-icon {
  font-size: var(--font-size-lg);
  flex-shrink: 0;
}

.kgb-checklist-content {
  flex: 1;
}

.kgb-checklist-title {
  font-weight: 500;
  margin-bottom: var(--space-xs);
}

.kgb-checklist-desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.kgb-action-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.kgb-action-item {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--glass);
  border-radius: var(--radius);
  border-left: 3px solid var(--warning);
}

.kgb-action-priority {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
  height: fit-content;
}

.kgb-action-priority.high {
  background: var(--danger-bg);
  color: var(--danger);
}

.kgb-action-priority.medium {
  background: rgba(251, 191, 36, 0.15);
  color: var(--warning);
}

.kgb-action-priority.low {
  background: var(--glass);
  color: var(--text-muted);
}

.kgb-action-content {
  flex: 1;
}

.kgb-action-title {
  font-weight: 500;
  margin-bottom: var(--space-xs);
}

.kgb-action-desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* AI Source Analyzer Styles */
.asa-gap-card {
  background: var(--surface-elevated);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  border: 1px solid var(--border);
}

.asa-gap-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.asa-gap-icon {
  font-size: 2rem;
}

.asa-gap-title {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.asa-gap-title span:first-child {
  font-weight: 600;
  font-size: var(--font-size-lg);
}

.asa-gap-message {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.asa-gap-card.cited {
  border-color: var(--success);
  background: linear-gradient(135deg, var(--success-bg), var(--surface));
}

.asa-gap-card.cited .asa-gap-icon {
  color: var(--success);
}

.asa-gap-card.not-cited {
  border-color: var(--warning);
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), var(--surface));
}

.asa-gap-card.not-cited .asa-gap-icon {
  color: var(--warning);
}

.asa-sources-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.asa-source-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--glass);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.asa-source-rank {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-elevated);
  border-radius: 50%;
  font-weight: 700;
  font-size: var(--font-size-sm);
  color: var(--accent);
}

.asa-source-info {
  flex: 1;
  min-width: 0;
}

.asa-source-domain {
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.asa-source-type {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.asa-source-mentions {
  text-align: right;
}

.asa-mentions-count {
  font-weight: 600;
  color: var(--accent);
}

.asa-mentions-label {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.asa-source-item.your-domain {
  border-color: var(--accent);
  background: var(--accent-glow);
}

.asa-source-types {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-md);
}

.asa-type-card {
  background: var(--glass);
  border-radius: var(--radius);
  padding: var(--space-md);
  text-align: center;
  border: 1px solid var(--border);
}

.asa-type-icon {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-xs);
}

.asa-type-name {
  font-weight: 500;
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-xs);
}

.asa-type-percent {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--accent);
}

.asa-patterns-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.asa-pattern-item {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--glass);
  border-radius: var(--radius);
  border-left: 3px solid var(--info);
}

.asa-pattern-icon {
  font-size: var(--font-size-lg);
  flex-shrink: 0;
}

.asa-pattern-content {
  flex: 1;
}

.asa-pattern-title {
  font-weight: 500;
  margin-bottom: var(--space-xs);
}

.asa-pattern-desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.asa-recommendations {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.asa-rec-item {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--glass);
  border-radius: var(--radius);
}

.asa-rec-number {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: white;
  border-radius: 50%;
  font-weight: 700;
  font-size: var(--font-size-sm);
  flex-shrink: 0;
}

.asa-rec-content {
  flex: 1;
}

.asa-rec-title {
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.asa-rec-desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .aiv-subtabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .aco-score-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .eb-score-section {
    grid-template-columns: 1fr;
  }

  .ais-assessment-grid {
    grid-template-columns: 1fr;
  }

  .ais-comparison-grid {
    grid-template-columns: 1fr;
  }

  .kgb-platform-grid {
    grid-template-columns: 1fr;
  }

  .asa-source-types {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .aiv-subtab-btn {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-xs);
  }

  .aco-score-grid {
    grid-template-columns: 1fr 1fr;
  }

  .asa-source-types {
    grid-template-columns: 1fr 1fr;
  }
}

/* Light theme adjustments */
.theme-light .aiv-subtab-btn.active {
  background: var(--accent);
  color: white;
}

.theme-light .aco-score-card,
.theme-light .ais-assessment-card,
.theme-light .eb-score-section,
.theme-light .asa-gap-card {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   RANK TRACKER STYLES
   ============================================================ */

.rank-tracker-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: var(--space-xl);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-lg);
}

/* Rank Tracker Add Form */
.rt-add-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.rt-import-section {
  margin-top: var(--space-md);
}

/* Dashboard Header */
.rt-dashboard {
  position: relative;
}

.rt-dashboard-header {
  margin-bottom: var(--space-lg);
}

/* Stats Row */
.rt-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.rt-stat-box {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-md);
  text-align: center;
  transition: all var(--transition-fast);
}

.rt-stat-box:hover {
  border-color: var(--border-strong);
  background: var(--glass-light);
}

.rt-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.rt-stat-value.rt-improved {
  color: var(--success);
}

.rt-stat-value.rt-declined {
  color: var(--danger);
}

.rt-stat-label {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

/* Actions Row */
.rt-actions-row {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.rt-actions-row .btn-icon {
  margin-right: 4px;
}

/* Last Checked */
.rt-last-checked {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--glass);
  border-radius: var(--radius-sm);
  display: inline-block;
}

/* Table Container */
.rt-table-container {
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.rt-keywords-table {
  width: 100%;
  min-width: 700px;
}

.rt-keywords-table th {
  background: var(--surface-elevated);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.rt-keywords-table td {
  vertical-align: middle;
}

/* Column widths */
.rt-col-keyword { min-width: 180px; }
.rt-col-url { min-width: 180px; max-width: 250px; }
.rt-col-position { width: 90px; text-align: center; }
.rt-col-change { width: 80px; text-align: center; }
.rt-col-best { width: 70px; text-align: center; }
.rt-col-history { width: 90px; text-align: center; }
.rt-col-actions { width: 60px; text-align: center; }

/* Keyword Cell */
.rt-keyword-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rt-keyword-text {
  font-weight: 500;
  color: var(--text-primary);
}

.rt-keyword-meta {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* URL Link */
.rt-url-link {
  color: var(--accent);
  text-decoration: none;
  font-size: var(--font-size-sm);
  word-break: break-all;
}

.rt-url-link:hover {
  text-decoration: underline;
}

/* Position Badge */
.rt-position-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--font-size-sm);
  background: var(--glass);
  color: var(--text-primary);
}

.rt-position-badge.rt-position-top3 {
  background: linear-gradient(135deg, #ffd700, #ffb700);
  color: #1a1a1a;
}

.rt-position-badge.rt-position-top10 {
  background: rgba(52, 211, 153, 0.2);
  color: var(--success);
}

.rt-position-badge.rt-position-top20 {
  background: rgba(108, 140, 255, 0.15);
  color: var(--accent);
}

.rt-position-badge.rt-position-top50 {
  background: rgba(251, 191, 36, 0.15);
  color: var(--warning);
}

.rt-position-badge.rt-position-low {
  background: rgba(248, 113, 113, 0.1);
  color: var(--danger);
}

/* Change Indicator */
.rt-change {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: var(--font-size-sm);
}

.rt-change-up {
  color: var(--success);
}

.rt-change-down {
  color: var(--danger);
}

.rt-change-same {
  color: var(--text-muted);
}

/* Best Badge */
.rt-best-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  background: var(--glass);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

/* History Button */
.rt-history-btn {
  font-size: var(--font-size-xs);
}

.rt-history-btn:disabled {
  opacity: 0.4;
}

/* Delete Button */
.rt-delete-btn {
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}

.rt-delete-btn:hover {
  opacity: 1;
}

/* Empty State */
.rt-empty-state {
  margin: 0;
  border: none;
  border-radius: 0;
}

.rt-empty-state::before {
  content: '📊';
  display: block;
  font-size: 48px;
  background: none;
  border: none;
  margin-bottom: var(--space-md);
}

/* Chart Card */
.rt-chart-card {
  margin-top: var(--space-lg);
}

.rt-chart-container {
  position: relative;
  width: 100%;
  height: 200px;
  background: var(--glass);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
}

.rt-chart-container canvas {
  width: 100% !important;
  height: 100% !important;
}

.rt-chart-legend {
  display: flex;
  justify-content: center;
  margin-top: var(--space-sm);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.rt-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rt-legend-dot {
  width: 12px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
}

/* Responsive */
@media (max-width: 1080px) {
  .rank-tracker-layout {
    grid-template-columns: 1fr;
  }

  .rank-tracker-layout .panel-left {
    position: static;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .rt-stats-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .rt-stat-value {
    font-size: 22px;
  }

  .rt-actions-row {
    flex-direction: column;
  }

  .rt-actions-row .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 520px) {
  .rt-col-url {
    display: none;
  }

  .rt-col-best {
    display: none;
  }
}

/* Light Theme Overrides */
.theme-light .rt-stat-box {
  background: var(--surface-elevated);
}

.theme-light .rt-position-badge.rt-position-top3 {
  background: linear-gradient(135deg, #ffd700, #ffb700);
  color: #1a1a1a;
}

.theme-light .rt-position-badge.rt-position-top10 {
  background: rgba(5, 150, 105, 0.15);
  color: var(--success);
}

.theme-light .rt-position-badge.rt-position-top20 {
  background: rgba(79, 108, 229, 0.12);
  color: var(--accent);
}

.theme-light .rt-chart-container {
  background: var(--surface-elevated);
}

/* ============================================================
   CONTENT DECAY MONITORING
   ============================================================ */

/* Info Box */
.cd-info-box {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  background: linear-gradient(135deg, rgba(108, 140, 255, 0.08), rgba(167, 139, 250, 0.05));
  border: 1px solid rgba(108, 140, 255, 0.2);
  border-radius: var(--radius);
  margin-bottom: var(--space-lg);
}

.cd-info-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.cd-info-content strong {
  display: block;
  font-size: var(--font-size-md);
  margin-bottom: 4px;
  color: var(--text-primary);
}

.cd-info-content p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Add Form */
.cd-add-form {
  padding: var(--space-lg);
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Toggle Label */
.cd-toggle-label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

/* Threshold Input */
.cd-threshold-input {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* Quick Stats */
.cd-stats-mini {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
}

.cd-stat-mini {
  text-align: center;
  padding: var(--space-sm);
  background: var(--glass);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.cd-stat-mini-value {
  display: block;
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--text-primary);
}

.cd-stat-mini-value.cd-healthy {
  color: var(--success);
}

.cd-stat-mini-value.cd-warning {
  color: var(--warning);
}

.cd-stat-mini-value.cd-declining {
  color: var(--danger);
}

.cd-stat-mini-label {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Toolbar */
.cd-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}

.cd-filters {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.cd-actions-bar {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* Last Checked */
.cd-last-checked {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* Pages List */
.cd-pages-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.cd-page-item {
  display: grid;
  grid-template-columns: 40px 1fr 80px 120px 80px 80px;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all var(--transition-fast);
}

.cd-page-item:hover {
  border-color: var(--border-strong);
  background: var(--glass-light);
}

.cd-page-item.cd-status-healthy {
  border-left: 3px solid var(--success);
}

.cd-page-item.cd-status-warning {
  border-left: 3px solid var(--warning);
}

.cd-page-item.cd-status-declining {
  border-left: 3px solid var(--danger);
}

.cd-page-status {
  text-align: center;
}

.cd-status-icon {
  font-size: 20px;
}

.cd-page-info {
  min-width: 0;
}

.cd-page-keyword {
  font-weight: 600;
  font-size: var(--font-size-base);
  color: var(--text-primary);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cd-page-url {
  font-size: var(--font-size-sm);
}

.cd-page-url a {
  color: var(--text-muted);
  text-decoration: none;
}

.cd-page-url a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.cd-page-position {
  text-align: center;
}

.cd-position-value {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--text-primary);
}

.cd-position-value.cd-no-data {
  font-size: var(--font-size-sm);
  font-weight: 400;
  color: var(--text-muted);
}

.cd-page-trend {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.cd-trend-icon {
  font-size: 16px;
  font-weight: 700;
}

.cd-trend-text {
  font-size: var(--font-size-xs);
}

.cd-page-trend.cd-trend-up {
  color: var(--success);
}

.cd-page-trend.cd-trend-down {
  color: var(--danger);
}

.cd-page-trend.cd-trend-stable {
  color: var(--text-muted);
}

.cd-page-updated {
  text-align: center;
}

.cd-updated-days {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.cd-updated-days.cd-no-data {
  font-style: italic;
}

.cd-page-actions {
  display: flex;
  gap: var(--space-xs);
  justify-content: flex-end;
}

/* Empty State */
.cd-empty-state {
  text-align: center;
  padding: var(--space-2xl);
}

.cd-empty-icon {
  font-size: 48px;
  margin-bottom: var(--space-md);
}

.cd-empty-state h3 {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-lg);
  color: var(--text-primary);
}

.cd-empty-state p {
  margin: 0 0 var(--space-lg);
  color: var(--text-muted);
}

.cd-empty-tips {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 300px;
  margin: 0 auto;
}

.cd-tip {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  text-align: left;
}

.cd-tip-icon {
  flex-shrink: 0;
}

/* No Results */
.cd-no-results {
  text-align: center;
  padding: var(--space-xl);
  color: var(--text-muted);
}

/* Declining Card */
.cd-badge-declining {
  background: var(--danger);
  color: white;
}

.cd-declining-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.cd-declining-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.2);
  border-radius: var(--radius-sm);
}

.cd-declining-keyword {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.cd-declining-change {
  font-size: var(--font-size-sm);
  color: var(--danger);
}

/* Recommendations */
.cd-recommendations-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.cd-recommendation-item {
  padding: var(--space-md);
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.cd-recommendation-item.cd-rec-declining {
  border-left: 3px solid var(--danger);
}

.cd-recommendation-item.cd-rec-stale {
  border-left: 3px solid var(--warning);
}

.cd-rec-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.cd-rec-icon {
  font-size: 20px;
}

.cd-rec-title {
  font-weight: 600;
  color: var(--text-primary);
}

.cd-rec-tips {
  margin: 0;
  padding-left: 24px;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

.cd-rec-tips li {
  margin-bottom: 4px;
}

/* History Chart */
.cd-history-chart {
  min-height: 200px;
}

.cd-chart-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--text-muted);
  background: var(--glass);
  border-radius: var(--radius);
}

.cd-chart-visual {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--glass);
  border-radius: var(--radius);
  height: 220px;
}

.cd-chart-y-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  padding: var(--space-sm) 0;
}

.cd-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: var(--space-xs);
  flex: 1;
  height: 100%;
  padding-bottom: 24px;
}

.cd-chart-bar-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  max-width: 60px;
}

.cd-chart-bar {
  width: 100%;
  min-height: 20px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 4px;
  transition: all var(--transition-fast);
}

.cd-chart-bar.cd-bar-top {
  background: linear-gradient(180deg, #ffd700, #ffb700);
}

.cd-chart-bar.cd-bar-good {
  background: linear-gradient(180deg, var(--success), #2aa876);
}

.cd-chart-bar.cd-bar-ok {
  background: linear-gradient(180deg, var(--accent), var(--accent-hover));
}

.cd-chart-bar.cd-bar-low {
  background: linear-gradient(180deg, var(--warning), #e09000);
}

.cd-bar-value {
  font-size: 10px;
  font-weight: 600;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.cd-bar-date {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

/* History Table */
.cd-history-table {
  margin-top: var(--space-md);
  max-height: 300px;
  overflow-y: auto;
}

.cd-change-up {
  color: var(--success);
  font-weight: 600;
}

.cd-change-down {
  color: var(--danger);
  font-weight: 600;
}

.cd-change-stable {
  color: var(--text-muted);
}

/* Toast Notification */
.cd-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 12px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  font-size: var(--font-size-sm);
  z-index: 10000;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
}

.cd-toast-visible {
  opacity: 1;
  transform: translateY(0);
}

.cd-toast-success {
  border-color: var(--success);
  background: var(--success-bg);
  color: var(--success);
}

.cd-toast-error {
  border-color: var(--danger);
  background: var(--danger-bg);
  color: var(--danger);
}

/* Responsive */
@media (max-width: 1200px) {
  .cd-page-item {
    grid-template-columns: 40px 1fr 70px 100px 70px 70px;
    gap: var(--space-sm);
  }
}

@media (max-width: 900px) {
  .cd-page-item {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    text-align: center;
  }

  .cd-page-status {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
  }

  .cd-page-item {
    position: relative;
    padding-left: 50px;
  }

  .cd-page-actions {
    justify-content: center;
    margin-top: var(--space-sm);
  }

  .cd-stats-mini {
    grid-template-columns: repeat(2, 1fr);
  }

  .cd-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .cd-filters,
  .cd-actions-bar {
    justify-content: center;
  }
}

/* Light Theme Overrides */
.theme-light .cd-info-box {
  background: linear-gradient(135deg, rgba(79, 108, 229, 0.06), rgba(124, 92, 219, 0.04));
  border-color: rgba(79, 108, 229, 0.15);
}

.theme-light .cd-page-item {
  background: var(--surface);
}

.theme-light .cd-page-item:hover {
  background: var(--surface-elevated);
}

.theme-light .cd-declining-item {
  background: rgba(220, 38, 38, 0.06);
  border-color: rgba(220, 38, 38, 0.15);
}

.theme-light .cd-chart-visual {
  background: var(--surface-elevated);
}

.theme-light .cd-toast {
  background: var(--surface);
}

.theme-light .cd-toast-success {
  background: rgba(5, 150, 105, 0.08);
}

.theme-light .cd-toast-error {
  background: rgba(220, 38, 38, 0.08);
}

/* =============================================================================
   WordPress Direct Publishing Styles
   ============================================================================= */

/* WordPress Settings Button in Header */
#wpSettingsBtn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.wp-settings-icon {
  font-size: 1rem;
}

/* WordPress Connection Status */
.wp-connection-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-radius: 8px;
  font-size: 0.875rem;
}

.wp-connection-status.connected {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #16a34a;
}

.wp-connection-status.disconnected {
  background: rgba(234, 179, 8, 0.1);
  border: 1px solid rgba(234, 179, 8, 0.3);
  color: #ca8a04;
}

.wp-connection-status.error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #dc2626;
}

.wp-conn-icon {
  font-size: 1.125rem;
}

/* WordPress Publish Button */
#publishWpBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.wp-btn-icon {
  font-size: 1rem;
}

/* WordPress Publish Status */
.wp-publish-status {
  padding: 12px 16px;
  border-radius: 8px;
  margin-top: 12px;
  display: flex;
  align-items: center;
}

.wp-publish-status.success {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.wp-publish-status.error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.wp-publish-status.loading {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.wp-status-content {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.wp-status-icon {
  font-size: 1.125rem;
}

.wp-status-message {
  font-size: 0.875rem;
  font-weight: 500;
}

.wp-status-link {
  font-size: 0.875rem;
  color: var(--primary);
  text-decoration: none;
  margin-left: 8px;
}

.wp-status-link:hover {
  text-decoration: underline;
}

/* WordPress Security Note */
.wp-security-note {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.wp-security-note strong {
  color: var(--text-primary);
}

/* WordPress Status Options */
.wp-status-options {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.wp-status-options .radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  transition: all 0.15s ease;
}

.wp-status-options .radio-label:hover {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.05);
}

.wp-status-options input[type="radio"] {
  accent-color: var(--primary);
}

.wp-status-options input[type="radio"]:checked + span {
  color: var(--primary);
  font-weight: 500;
}

/* Status Message Styles (reused) */
.status-message {
  padding: 12px;
  border-radius: 8px;
  font-size: 0.875rem;
}

.status-message.success {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #16a34a;
}

.status-message.error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #dc2626;
}

/* Dark theme adjustments */
.theme-dark .wp-connection-status.connected {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

.theme-dark .wp-connection-status.disconnected {
  background: rgba(234, 179, 8, 0.15);
  color: #fbbf24;
}

.theme-dark .wp-connection-status.error {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.theme-dark .wp-publish-status.success {
  background: rgba(34, 197, 94, 0.15);
}

.theme-dark .wp-publish-status.error {
  background: rgba(239, 68, 68, 0.15);
}

.theme-dark .status-message.success {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

.theme-dark .status-message.error {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.theme-dark .wp-security-note {
  background: var(--bg-tertiary);
}

/* ============================================================
   AI Content Detector Styles
   ============================================================ */

/* Input stats */
.ai-detector-stats {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-sm) 0;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.ai-detector-stats .stat-row {
  display: flex;
  gap: var(--space-xs);
}

.ai-detector-stats .stat-label {
  color: var(--text-secondary);
}

/* AI Score Display */
.ai-score-display {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  padding: var(--space-lg);
  background: var(--glass);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.ai-score-circle {
  position: relative;
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}

.ai-score-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.ai-score-bg {
  fill: none;
  stroke: var(--glass-strong);
  stroke-width: 8;
}

.ai-score-progress {
  fill: none;
  stroke: var(--accent);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 1s ease-out, stroke 0.3s ease;
}

.ai-score-progress.ai-score-high {
  stroke: var(--danger);
}

.ai-score-progress.ai-score-medium {
  stroke: var(--warning);
}

.ai-score-progress.ai-score-low {
  stroke: var(--success);
}

.ai-score-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
}

.ai-score-info {
  flex: 1;
}

.ai-score-label {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.ai-confidence {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.confidence-label {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.confidence-value {
  font-size: var(--font-size-sm);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: capitalize;
}

.confidence-value.confidence-high {
  background: rgba(52, 211, 153, 0.15);
  color: var(--success);
}

.confidence-value.confidence-medium {
  background: rgba(251, 191, 36, 0.15);
  color: var(--warning);
}

.confidence-value.confidence-low {
  background: var(--glass);
  color: var(--text-muted);
}

.ai-result-message {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* AI Breakdown */
.ai-breakdown h4 {
  margin: 0 0 var(--space-md);
  font-size: var(--font-size-md);
  font-weight: 600;
}

.ai-breakdown-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.ai-breakdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  background: var(--glass);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.breakdown-label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.breakdown-icon {
  font-size: 1.1rem;
}

.breakdown-value {
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.breakdown-value.high {
  color: var(--danger);
}

.breakdown-value.medium {
  color: var(--warning);
}

.breakdown-value.low {
  color: var(--success);
}

/* Flagged Sections */
.ai-flagged-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.ai-flagged-item {
  padding: var(--space-md);
  background: var(--glass);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--warning);
}

.ai-flagged-item.severity-high {
  border-left-color: var(--danger);
  background: rgba(248, 113, 113, 0.05);
}

.ai-flagged-item.severity-medium {
  border-left-color: var(--warning);
  background: rgba(251, 191, 36, 0.05);
}

.ai-flagged-item.severity-low {
  border-left-color: var(--accent);
  background: rgba(108, 140, 255, 0.05);
}

.flagged-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.flagged-number {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-muted);
}

.flagged-severity {
  font-size: var(--font-size-xs);
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  background: var(--glass);
}

.severity-high .flagged-severity {
  background: rgba(248, 113, 113, 0.15);
  color: var(--danger);
}

.severity-medium .flagged-severity {
  background: rgba(251, 191, 36, 0.15);
  color: var(--warning);
}

.severity-low .flagged-severity {
  background: rgba(108, 140, 255, 0.15);
  color: var(--accent);
}

.flagged-text {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  line-height: 1.6;
  margin-bottom: var(--space-xs);
  padding: var(--space-sm);
  background: rgba(0, 0, 0, 0.15);
  border-radius: var(--radius-sm);
}

.flagged-reason {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  font-style: italic;
}

/* Comparison Card */
.comparison-score-change {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.score-badge {
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
}

.score-badge.score-original {
  background: rgba(248, 113, 113, 0.15);
  color: var(--danger);
}

.score-badge.score-new {
  background: rgba(52, 211, 153, 0.15);
  color: var(--success);
}

.score-arrow {
  color: var(--text-muted);
}

.improvement-badge {
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--glass);
  color: var(--text-secondary);
}

.improvement-badge.positive {
  background: rgba(52, 211, 153, 0.15);
  color: var(--success);
}

.improvement-badge.negative {
  background: rgba(248, 113, 113, 0.15);
  color: var(--danger);
}

/* Comparison Tabs */
.comparison-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: var(--space-md);
  background: var(--glass);
  border-radius: var(--radius-sm);
  padding: 2px;
}

.comparison-tab {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.comparison-tab:hover {
  color: var(--text-primary);
  background: var(--glass-light);
}

.comparison-tab.active {
  background: var(--accent);
  color: #fff;
}

/* Comparison Content */
.comparison-content {
  position: relative;
}

.comparison-pane {
  display: none;
}

.comparison-pane.active {
  display: block;
}

.comparison-pane .code-block {
  max-height: 400px;
  overflow-y: auto;
}

/* Diff Display */
.diff-display {
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-sm);
  line-height: 1.7;
  padding: var(--space-md);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-sm);
  max-height: 400px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.diff-content {
  color: var(--text-primary);
}

.diff-added {
  background: rgba(52, 211, 153, 0.2);
  color: var(--success);
  padding: 1px 2px;
  border-radius: 2px;
}

.diff-removed {
  background: rgba(248, 113, 113, 0.2);
  color: var(--danger);
  text-decoration: line-through;
  padding: 1px 2px;
  border-radius: 2px;
}

/* Comparison Actions */
.comparison-actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: flex-end;
}

/* AI Details Section */
.ai-details-section {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.ai-details-summary {
  padding: var(--space-md);
  cursor: pointer;
  user-select: none;
}

.ai-details-summary h4 {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

.ai-details-summary:hover h4 {
  color: var(--text-primary);
}

.ai-details-content {
  padding: 0 var(--space-md) var(--space-md);
}

.ai-details-content .code-block {
  max-height: 300px;
  overflow-y: auto;
  font-size: var(--font-size-xs);
}

/* Status Messages */
.status-message {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.status-message.status-info {
  background: rgba(108, 140, 255, 0.1);
  border: 1px solid rgba(108, 140, 255, 0.3);
  color: var(--accent);
}

.status-message.status-success {
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.3);
  color: var(--success);
}

.status-message.status-error {
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.3);
  color: var(--danger);
}

/* Light Theme Overrides for AI Detector */
.theme-light .ai-score-display {
  background: var(--surface-elevated);
}

.theme-light .ai-score-bg {
  stroke: var(--border-strong);
}

.theme-light .ai-breakdown-item {
  background: var(--surface-elevated);
}

.theme-light .ai-flagged-item {
  background: var(--surface-elevated);
}

.theme-light .ai-flagged-item.severity-high {
  background: rgba(220, 38, 38, 0.05);
}

.theme-light .ai-flagged-item.severity-medium {
  background: rgba(217, 119, 6, 0.05);
}

.theme-light .ai-flagged-item.severity-low {
  background: rgba(79, 108, 229, 0.05);
}

.theme-light .flagged-text {
  background: rgba(0, 0, 0, 0.05);
}

.theme-light .diff-display {
  background: var(--surface-elevated);
}

.theme-light .comparison-tabs {
  background: var(--surface-elevated);
}

/* Responsive */
@media (max-width: 768px) {
  .ai-score-display {
    flex-direction: column;
    text-align: center;
  }

  .ai-score-info {
    text-align: center;
  }

  .ai-confidence {
    justify-content: center;
  }

  .comparison-score-change {
    justify-content: center;
  }
}

/* ============================================================
   Content Outline Generator Styles
   ============================================================ */

.outline-generator-section {
  padding-top: var(--space-md);
}

.outline-generator-section h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-xs);
}

/* Analysis Summary */
.outline-analysis-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.outline-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Meta Suggestions */
.outline-meta-suggestions {
  transition: all var(--transition-base);
}

.outline-meta-suggestions:hover {
  border-color: var(--accent);
}

.outline-meta-suggestions [contenteditable] {
  padding: 4px 8px;
  border-radius: 4px;
  transition: background var(--transition-fast);
}

.outline-meta-suggestions [contenteditable]:hover,
.outline-meta-suggestions [contenteditable]:focus {
  background: rgba(255, 255, 255, 0.05);
  outline: none;
}

/* H1 Container */
.outline-h1-container .outline-h1 {
  transition: border-color var(--transition-fast);
}

.outline-h1-container .outline-h1:focus {
  border-color: var(--accent);
  outline: none;
}

/* Sections Container */
.outline-sections-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Section Item */
.outline-section-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all var(--transition-fast);
  cursor: grab;
}

.outline-section-item:hover {
  border-color: var(--border-strong);
}

.outline-section-item.dragging {
  opacity: 0.5;
  border-color: var(--accent);
}

.outline-section-item.drag-over-top {
  border-top: 3px solid var(--accent);
}

.outline-section-item.drag-over-bottom {
  border-bottom: 3px solid var(--accent);
}

.outline-section-item .section-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
}

.outline-section-item .drag-handle {
  color: var(--text-muted);
  cursor: grab;
  user-select: none;
  font-size: 14px;
  line-height: 1;
  padding: 4px;
}

.outline-section-item .drag-handle:hover {
  color: var(--text-secondary);
}

.outline-section-item .section-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--accent);
  color: white;
  border-radius: 50%;
  font-size: 0.875rem;
  font-weight: 600;
  flex-shrink: 0;
}

.outline-section-item .section-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.outline-section-item .section-h2 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  padding: 2px 6px;
  border-radius: 4px;
  transition: background var(--transition-fast);
}

.outline-section-item .section-h2:hover,
.outline-section-item .section-h2:focus {
  background: rgba(255, 255, 255, 0.05);
  outline: none;
}

.outline-section-item .section-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
}

.outline-section-item .section-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* H3 List */
.outline-h3-list {
  padding: 0 var(--space-md) var(--space-md);
  padding-left: calc(var(--space-md) + 28px + var(--space-sm) + 24px);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.outline-h3-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: grab;
  transition: all var(--transition-fast);
}

.outline-h3-item:hover {
  border-color: var(--border);
}

.outline-h3-item.dragging {
  opacity: 0.5;
}

.outline-h3-item.drag-over-top {
  border-top: 2px solid var(--accent);
}

.outline-h3-item.drag-over-bottom {
  border-bottom: 2px solid var(--accent);
}

.outline-h3-item .drag-handle {
  color: var(--text-muted);
  cursor: grab;
  font-size: 12px;
  padding: 2px;
}

.outline-h3-item .h3-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.outline-h3-item .h3-text {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
  padding: 2px 4px;
  border-radius: 3px;
}

.outline-h3-item .h3-text:hover,
.outline-h3-item .h3-text:focus {
  background: rgba(255, 255, 255, 0.05);
  outline: none;
}

.outline-h3-item .h3-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
}

/* Questions List */
.outline-questions-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.outline-question-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: grab;
  transition: all var(--transition-fast);
}

.outline-question-item:hover {
  border-color: var(--border-strong);
}

.outline-question-item.dragging {
  opacity: 0.5;
}

.outline-question-item.drag-over-top {
  border-top: 2px solid var(--accent);
}

.outline-question-item.drag-over-bottom {
  border-bottom: 2px solid var(--accent);
}

.outline-question-item .drag-handle {
  color: var(--text-muted);
  cursor: grab;
  font-size: 12px;
  padding: 2px;
}

.outline-question-item .question-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--warning);
  color: #000;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
}

.outline-question-item .question-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.outline-question-item .question-text {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-primary);
  padding: 2px 4px;
  border-radius: 3px;
}

.outline-question-item .question-text:hover,
.outline-question-item .question-text:focus {
  background: rgba(255, 255, 255, 0.05);
  outline: none;
}

.outline-question-item .question-brief {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
}

/* Action Buttons */
.outline-item-add,
.outline-item-delete {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  transition: all var(--transition-fast);
}

.outline-item-add {
  color: var(--accent);
}

.outline-item-add:hover {
  background: var(--accent-glow);
}

.outline-item-delete {
  color: var(--text-muted);
  font-size: 1rem;
}

.outline-item-delete:hover {
  color: var(--danger);
  background: var(--danger-bg);
}

/* Add Section/Question Buttons */
.outline-add-section-btn,
.outline-add-question-btn {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-top: var(--space-sm);
}

.outline-add-section-btn:hover,
.outline-add-question-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-glow);
}

/* Sources List */
.outline-sources-details summary {
  transition: color var(--transition-fast);
}

.outline-sources-details summary:hover {
  color: var(--text-primary);
}

.outline-sources-list .sources-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.outline-sources-list .sources-list li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  font-size: 0.85rem;
}

.outline-sources-list .sources-list li a {
  color: var(--accent);
  text-decoration: none;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.outline-sources-list .sources-list li a:hover {
  text-decoration: underline;
}

.outline-sources-list .source-status {
  color: var(--text-muted);
  font-size: 0.75rem;
}

/* Empty State */
.empty-state-small {
  padding: var(--space-md);
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Spinner Small */
.spinner-small {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Toast Animations */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100px);
  }
}

.toast {
  font-size: 0.9rem;
}

.toast-success {
  border-left: 4px solid var(--success);
}

.toast-error {
  border-left: 4px solid var(--danger);
}

.toast-info {
  border-left: 4px solid var(--accent);
}

/* Responsive */
@media (max-width: 768px) {
  .outline-analysis-summary {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .outline-section-item .section-header {
    flex-wrap: wrap;
  }

  .outline-section-item .section-actions {
    width: 100%;
    justify-content: flex-end;
    margin-top: var(--space-xs);
  }

  .outline-h3-list {
    padding-left: var(--space-md);
  }
}

/* Light theme adjustments */
.theme-light .outline-section-item,
.theme-light .outline-question-item {
  background: var(--surface);
}

.theme-light .outline-h3-item {
  background: var(--bg);
}

.theme-light .outline-section-item .section-h2:hover,
.theme-light .outline-section-item .section-h2:focus,
.theme-light .outline-h3-item .h3-text:hover,
.theme-light .outline-h3-item .h3-text:focus,
.theme-light .outline-question-item .question-text:hover,
.theme-light .outline-question-item .question-text:focus,
.theme-light .outline-meta-suggestions [contenteditable]:hover,
.theme-light .outline-meta-suggestions [contenteditable]:focus {
  background: rgba(0, 0, 0, 0.03);
}

/* ============================================================
   Toast Notification System
   ============================================================ */
.toast-container {
  position: fixed;
  bottom: var(--space-lg);
  right: var(--space-lg);
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-sm);
  pointer-events: none;
  max-height: calc(100vh - var(--space-2xl));
  overflow: hidden;
}

.toast-notification {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  min-width: 300px;
  max-width: 420px;
  padding: var(--space-md) var(--space-lg);
  background: var(--surface-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  pointer-events: auto;
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast-notification.toast-visible {
  transform: translateX(0);
  opacity: 1;
}

.toast-notification.toast-hiding {
  transform: translateX(120%);
  opacity: 0;
}

/* Toast icon */
.toast-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  margin-top: 2px;
}

/* Toast content */
.toast-content {
  flex: 1;
  min-width: 0;
}

.toast-title {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  margin: 0 0 2px;
  line-height: 1.3;
}

.toast-message {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.4;
  word-break: break-word;
}

/* Toast close button */
.toast-close {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
  margin: -4px -8px -4px 0;
  font-size: 16px;
  line-height: 1;
}

.toast-close:hover {
  background: var(--glass-light);
  color: var(--text-primary);
}

/* Toast action button */
.toast-action {
  margin-top: var(--space-sm);
}

.toast-action .btn {
  padding: 4px 12px;
  font-size: var(--font-size-xs);
}

/* Toast progress bar */
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--glass);
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden;
}

.toast-progress-bar {
  height: 100%;
  width: 100%;
  transform-origin: left;
  transition: transform linear;
}

/* Toast Types */
.toast-success {
  border-left: 4px solid var(--success);
}
.toast-success .toast-icon {
  background: var(--success-bg);
  color: var(--success);
}
.toast-success .toast-progress-bar {
  background: var(--success);
}

.toast-error {
  border-left: 4px solid var(--danger);
}
.toast-error .toast-icon {
  background: var(--danger-bg);
  color: var(--danger);
}
.toast-error .toast-progress-bar {
  background: var(--danger);
}

.toast-warning {
  border-left: 4px solid var(--warning);
}
.toast-warning .toast-icon {
  background: rgba(251, 191, 36, 0.15);
  color: var(--warning);
}
.toast-warning .toast-progress-bar {
  background: var(--warning);
}

.toast-info {
  border-left: 4px solid var(--info);
}
.toast-info .toast-icon {
  background: rgba(56, 189, 248, 0.15);
  color: var(--info);
}
.toast-info .toast-progress-bar {
  background: var(--info);
}

/* Light theme toast adjustments */
.theme-light .toast-notification {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-2), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.theme-light .toast-success .toast-icon {
  background: rgba(5, 150, 105, 0.12);
}

.theme-light .toast-error .toast-icon {
  background: rgba(220, 38, 38, 0.1);
}

.theme-light .toast-warning .toast-icon {
  background: rgba(217, 119, 6, 0.12);
}

.theme-light .toast-info .toast-icon {
  background: rgba(2, 132, 199, 0.12);
}

/* Mobile responsive toasts */
@media (max-width: 520px) {
  .toast-container {
    left: var(--space-sm);
    right: var(--space-sm);
    bottom: var(--space-sm);
  }

  .toast-notification {
    min-width: auto;
    max-width: none;
    width: 100%;
  }
}

/* ============================================================
   TOPIC CLUSTER VISUALIZATION
   ============================================================ */

/* Section Container */
.topic-cluster-section {
  animation: fadeIn 0.3s ease;
}

/* Status Message */
.tc-status {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.tc-status.loading {
  background: rgba(108, 140, 255, 0.1);
  color: var(--accent);
  border: 1px solid rgba(108, 140, 255, 0.3);
}

.tc-status.success {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid rgba(52, 211, 153, 0.3);
}

.tc-status.error {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid rgba(248, 113, 113, 0.3);
}

/* Legend */
.tc-legend {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  padding: var(--space-md);
  background: var(--glass);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-lg);
}

.tc-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.tc-legend-color {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 2px solid transparent;
}

.tc-status-planned {
  background: linear-gradient(135deg, #6366f1, #818cf8);
  border-color: #4f46e5;
}

.tc-status-writing {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  border-color: #d97706;
}

.tc-status-published {
  background: linear-gradient(135deg, #10b981, #34d399);
  border-color: #059669;
}

/* Mind Map Container */
.tc-mind-map {
  position: relative;
  min-height: 500px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
}

.tc-mind-map-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 450px;
  transition: transform 0.3s ease;
}

/* SVG Lines Container */
.tc-lines-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.tc-connection-line {
  stroke: var(--border-strong);
  stroke-width: 2;
  fill: none;
  opacity: 0.6;
  transition: opacity 0.3s ease, stroke 0.3s ease;
}

.tc-connection-line.highlighted {
  stroke: var(--accent);
  stroke-width: 3;
  opacity: 1;
}

/* Node Base Styles */
.tc-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  user-select: none;
}

.tc-node:hover {
  transform: scale(1.08);
  z-index: 10;
}

.tc-node.selected {
  z-index: 20;
}

/* Pillar Node (Center) */
.tc-node-pillar {
  width: 160px;
  height: 160px;
}

.tc-node-pillar .tc-node-circle {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-grad-start), var(--accent-grad-mid), var(--accent-grad-end));
  box-shadow:
    0 8px 32px rgba(108, 140, 255, 0.3),
    0 0 0 4px var(--surface),
    0 0 0 6px var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  transition: all 0.3s ease;
}

.tc-node-pillar:hover .tc-node-circle {
  box-shadow:
    0 12px 48px rgba(108, 140, 255, 0.4),
    0 0 0 4px var(--surface),
    0 0 0 8px var(--accent);
}

.tc-node-pillar.selected .tc-node-circle {
  box-shadow:
    0 12px 48px rgba(108, 140, 255, 0.5),
    0 0 0 4px var(--surface),
    0 0 0 10px var(--accent),
    0 0 30px var(--accent-glow);
}

.tc-node-pillar .tc-node-label {
  color: #fff;
  font-size: var(--font-size-md);
  font-weight: 700;
  line-height: 1.3;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  max-width: 120px;
  word-wrap: break-word;
}

.tc-node-pillar .tc-node-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: #fff;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

/* Cluster Node (Subtopic) */
.tc-node-cluster {
  width: 130px;
  height: 130px;
}

.tc-node-cluster .tc-node-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--surface-elevated);
  border: 3px solid var(--border-strong);
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm);
  transition: all 0.3s ease;
}

.tc-node-cluster:hover .tc-node-circle {
  border-color: var(--accent);
  box-shadow: var(--shadow-2), 0 0 0 3px var(--accent-glow);
}

.tc-node-cluster.selected .tc-node-circle {
  border-color: var(--accent);
  box-shadow: var(--shadow-2), 0 0 0 5px var(--accent-glow);
}

.tc-node-cluster .tc-node-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  max-width: 85px;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tc-node-cluster .tc-node-status {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 6px;
  box-shadow: 0 0 6px currentColor;
}

/* Status colors for cluster nodes */
.tc-node-cluster[data-status="planned"] .tc-node-circle {
  border-color: #818cf8;
}
.tc-node-cluster[data-status="planned"] .tc-node-status {
  background: linear-gradient(135deg, #6366f1, #818cf8);
}

.tc-node-cluster[data-status="writing"] .tc-node-circle {
  border-color: #fbbf24;
}
.tc-node-cluster[data-status="writing"] .tc-node-status {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

.tc-node-cluster[data-status="published"] .tc-node-circle {
  border-color: #34d399;
}
.tc-node-cluster[data-status="published"] .tc-node-status {
  background: linear-gradient(135deg, #10b981, #34d399);
}

/* Node Details Panel */
.tc-node-details {
  position: absolute;
  right: 0;
  top: 0;
  width: 320px;
  height: 100%;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
  z-index: 100;
  display: flex;
  flex-direction: column;
  animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.tc-node-details-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border);
  background: var(--glass);
}

.tc-node-details-header h5 {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
}

.tc-node-details-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-lg);
}

.tc-node-details-body .form-group {
  margin-bottom: var(--space-md);
}

.tc-node-details-body .form-group:last-child {
  margin-bottom: 0;
}

/* Visualization Controls */
.tc-viz-controls {
  display: flex;
  gap: 4px;
}

.tc-viz-controls .btn {
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 18px;
  font-weight: 700;
}

/* Table View */
.tc-table {
  font-size: var(--font-size-sm);
}

.tc-table td {
  vertical-align: middle;
}

.tc-table .tc-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.tc-type-badge.pillar {
  background: linear-gradient(135deg, var(--accent-glow), rgba(167, 139, 250, 0.2));
  color: var(--accent);
  border: 1px solid var(--accent);
}

.tc-type-badge.cluster {
  background: var(--glass);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.tc-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.tc-status-badge.planned {
  background: rgba(99, 102, 241, 0.15);
  color: #818cf8;
}

.tc-status-badge.writing {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

.tc-status-badge.published {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}

.tc-links-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tc-link-chip {
  display: inline-flex;
  padding: 2px 8px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 10px;
  color: var(--text-muted);
}

/* Export Section */
.tc-export-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* Saved Clusters List */
.tc-saved-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-height: 300px;
  overflow-y: auto;
}

.tc-saved-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.tc-saved-item:hover {
  border-color: var(--accent);
  background: var(--glass-light);
}

.tc-saved-item-info {
  flex: 1;
  min-width: 0;
}

.tc-saved-item-title {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  margin-bottom: 2px;
}

.tc-saved-item-meta {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.tc-saved-item-actions {
  display: flex;
  gap: 4px;
}

/* Empty State */
.empty-state-small {
  text-align: center;
  padding: var(--space-xl) var(--space-lg);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

/* Add Node Modal */
.tc-add-node-modal .modal-content {
  max-width: 500px;
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
  .tc-node-details {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: 400px;
    height: 100vh;
  }
}

@media (max-width: 768px) {
  .tc-mind-map {
    min-height: 400px;
    padding: var(--space-md);
  }

  .tc-node-pillar {
    width: 120px;
    height: 120px;
  }

  .tc-node-pillar .tc-node-circle {
    width: 100px;
    height: 100px;
  }

  .tc-node-pillar .tc-node-label {
    font-size: var(--font-size-sm);
    max-width: 80px;
  }

  .tc-node-cluster {
    width: 100px;
    height: 100px;
  }

  .tc-node-cluster .tc-node-circle {
    width: 75px;
    height: 75px;
  }

  .tc-node-cluster .tc-node-label {
    font-size: 10px;
    max-width: 65px;
  }

  .tc-legend {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .tc-node-details {
    width: 100%;
    max-width: none;
  }

  .tc-export-buttons {
    flex-direction: column;
  }

  .tc-export-buttons .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Light Theme Adjustments */
.theme-light .tc-mind-map {
  background: var(--surface-elevated);
}

.theme-light .tc-node-cluster .tc-node-circle {
  background: var(--surface);
  border-color: var(--border);
}

.theme-light .tc-node-details {
  background: var(--surface);
}

.theme-light .tc-saved-item {
  background: var(--surface);
}

.theme-light .tc-connection-line {
  stroke: rgba(0, 0, 0, 0.15);
}

.theme-light .tc-connection-line.highlighted {
  stroke: var(--accent);
}

/* ============================================================
   Onboarding Wizard
   ============================================================ */
.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 14, 26, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: fadeIn 0.3s ease;
}

.onboarding-container {
  position: relative;
  width: 100%;
  max-width: 560px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-3), 0 0 60px rgba(108, 140, 255, 0.15);
  animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 90vh;
  overflow-y: auto;
}

.onboarding-close-btn {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--glass);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  z-index: 10;
}

.onboarding-close-btn:hover {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
}

.onboarding-skip-btn {
  position: absolute;
  top: var(--space-md);
  right: 56px; /* Adjusted to not overlap with close button */
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  cursor: pointer;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.onboarding-skip-btn:hover {
  background: var(--glass);
  color: var(--text-primary);
}

/* Progress Dots */
.onboarding-progress {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.progress-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--glass-strong);
  transition: all var(--transition-base);
  cursor: pointer;
}

.progress-dot.active {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  transform: scale(1.2);
}

.progress-dot.completed {
  background: var(--success);
}

/* Steps */
.onboarding-step {
  display: none;
  animation: fadeIn 0.3s ease;
}

.onboarding-step.active {
  display: block;
}

.onboarding-icon {
  font-size: 48px;
  text-align: center;
  margin-bottom: var(--space-md);
  animation: bounce 0.6s ease;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.onboarding-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  text-align: center;
  margin: 0 0 var(--space-sm);
  color: var(--text-primary);
  letter-spacing: -0.5px;
}

.onboarding-desc {
  text-align: center;
  color: var(--text-muted);
  font-size: var(--font-size-base);
  margin: 0 0 var(--space-xl);
  line-height: 1.6;
}

.onboarding-field-group {
  margin-bottom: var(--space-lg);
}

.onboarding-field-group .field {
  text-align: center;
  font-size: var(--font-size-md);
}

.onboarding-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.onboarding-actions .btn {
  min-width: 120px;
}

/* Use Case Selection */
.onboarding-use-cases {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.use-case-option {
  cursor: pointer;
}

.use-case-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.use-case-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--glass);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  transition: all var(--transition-fast);
}

.use-case-option input:checked + .use-case-card {
  border-color: var(--accent);
  background: rgba(108, 140, 255, 0.1);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.use-case-option:hover .use-case-card {
  border-color: var(--border-strong);
  background: var(--glass-light);
}

.use-case-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.use-case-label {
  font-weight: 600;
  font-size: var(--font-size-base);
  color: var(--text-primary);
  display: block;
}

.use-case-desc {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  display: block;
  margin-top: 2px;
}

/* Feature Tour */
.onboarding-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.feature-highlight {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.feature-highlight:hover {
  background: var(--glass-light);
  border-color: var(--accent);
  transform: translateX(4px);
}

.feature-icon {
  font-size: 24px;
  flex-shrink: 0;
  width: 32px;
  text-align: center;
}

.feature-info {
  flex: 1;
}

.feature-info strong {
  display: block;
  font-size: var(--font-size-base);
  color: var(--text-primary);
  margin-bottom: 2px;
}

.feature-info span {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* API Key Reminder */
.onboarding-api-reminder {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.api-reminder-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.api-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.api-info {
  flex: 1;
}

.api-info strong {
  display: block;
  font-size: var(--font-size-base);
  color: var(--text-primary);
}

.api-info span {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.api-status {
  font-size: var(--font-size-xs);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--warning);
  color: #000;
  font-weight: 600;
}

.api-status.configured {
  background: var(--success);
  color: #fff;
}

.onboarding-cta-buttons {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-lg);
}

.onboarding-dont-show {
  display: flex;
  justify-content: center;
  margin-top: var(--space-md);
}

.onboarding-dont-show .checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  cursor: pointer;
}

/* Help Menu */
.help-menu-container {
  position: relative;
}

.help-menu-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  z-index: 1000;
  overflow: hidden;
  animation: fadeIn 0.15s ease;
}

.help-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: 12px var(--space-md);
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: background var(--transition-fast);
}

.help-menu-item:hover {
  background: var(--glass-light);
}

.help-item-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
}

.help-icon {
  font-size: 14px;
}

/* Settings Hamburger Menu */
.settings-menu-container {
  position: relative;
}

.settings-menu-btn {
  padding: 8px 12px !important;
  min-width: auto !important;
}

.settings-hamburger {
  font-size: 18px;
  line-height: 1;
}

.settings-menu-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  z-index: 1000;
  overflow: hidden;
  animation: fadeIn 0.15s ease;
}

.settings-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: 12px var(--space-md);
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: background var(--transition-fast);
}

.settings-menu-item:hover {
  background: var(--glass-light);
}

.settings-item-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
}

.settings-menu-divider {
  margin: 4px 0;
  border: none;
  border-top: 1px solid var(--border);
}

.theme-light .settings-menu-dropdown {
  background: var(--surface);
  border-color: var(--border);
}

/* Light Theme */
.theme-light .onboarding-overlay {
  background: rgba(245, 247, 251, 0.95);
}

.theme-light .onboarding-container {
  box-shadow: var(--shadow-2), 0 0 40px rgba(79, 108, 229, 0.08);
}

.theme-light .use-case-option input:checked + .use-case-card {
  background: rgba(79, 108, 229, 0.08);
}

.theme-light .help-menu-dropdown {
  background: var(--surface);
  border-color: var(--border);
}

/* Responsive */
@media (max-width: 600px) {
  .onboarding-container {
    margin: var(--space-md);
    padding: var(--space-lg);
    max-height: calc(100vh - var(--space-lg) * 2);
  }

  .onboarding-title {
    font-size: var(--font-size-lg);
  }

  .onboarding-icon {
    font-size: 36px;
  }

  .onboarding-actions {
    flex-direction: column;
  }

  .onboarding-actions .btn {
    width: 100%;
  }

  .use-case-card {
    padding: var(--space-sm) var(--space-md);
  }

  .feature-highlight {
    padding: var(--space-sm);
  }
}

/* ============================================================
   LOADING STATES & SKELETON SCREENS
   Comprehensive loading experience system
   ============================================================ */

/* === Skeleton Base & Animations === */
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes skeleton-wave {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.skeleton,
.skeleton-base {
  background: linear-gradient(
    90deg,
    var(--glass) 0%,
    var(--glass-light) 20%,
    var(--glass-strong) 50%,
    var(--glass-light) 80%,
    var(--glass) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
}

/* Pulse animation variant */
.skeleton-pulse {
  background: var(--glass-light);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

/* Wave overlay effect */
.skeleton-wave::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.08),
    transparent
  );
  animation: skeleton-wave 1.5s ease-in-out infinite;
}

/* === Skeleton Text Variants === */
.skeleton-text {
  height: 14px;
  margin-bottom: 8px;
  border-radius: 4px;
  width: 100%;
}

.skeleton-text:last-child {
  width: 70%;
  margin-bottom: 0;
}

.skeleton-text-sm {
  height: 12px;
  margin-bottom: 6px;
}

.skeleton-text-lg {
  height: 18px;
  margin-bottom: 10px;
}

.skeleton-text-short { width: 40%; }
.skeleton-text-medium { width: 70%; }
.skeleton-text-full { width: 100%; }

/* Skeleton paragraph (multiple lines) */
.skeleton-paragraph {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skeleton-paragraph .skeleton-text:nth-child(1) { width: 100%; }
.skeleton-paragraph .skeleton-text:nth-child(2) { width: 95%; }
.skeleton-paragraph .skeleton-text:nth-child(3) { width: 88%; }
.skeleton-paragraph .skeleton-text:nth-child(4) { width: 92%; }
.skeleton-paragraph .skeleton-text:nth-child(5) { width: 65%; }

/* === Skeleton Headings === */
.skeleton-heading {
  height: 24px;
  width: 60%;
  margin-bottom: 12px;
  border-radius: 4px;
}

.skeleton-heading-sm {
  height: 18px;
  width: 50%;
  margin-bottom: 10px;
}

.skeleton-heading-lg {
  height: 32px;
  width: 70%;
  margin-bottom: 16px;
}

.skeleton-title {
  height: 28px;
  width: 45%;
  margin-bottom: 16px;
}

/* === Skeleton Button === */
.skeleton-button {
  height: 36px;
  width: 100px;
  border-radius: var(--radius-sm);
}

.skeleton-button-sm {
  height: 28px;
  width: 80px;
}

.skeleton-button-lg {
  height: 44px;
  width: 140px;
}

.skeleton-button-full {
  width: 100%;
}

/* === Skeleton Avatar/Image === */
.skeleton-avatar {
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton-avatar-sm {
  width: 32px;
  height: 32px;
}

.skeleton-avatar-md {
  width: 48px;
  height: 48px;
}

.skeleton-avatar-lg {
  width: 64px;
  height: 64px;
}

.skeleton-image {
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--radius-sm);
}

.skeleton-image-square {
  aspect-ratio: 1;
}

.skeleton-image-portrait {
  aspect-ratio: 3 / 4;
}

.skeleton-thumbnail {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

/* === Skeleton Card === */
.skeleton-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  overflow: hidden;
}

.skeleton-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
}

.skeleton-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.skeleton-card-footer {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

/* Preset card skeleton layouts */
.skeleton-card-simple .skeleton-card-body {
  padding: var(--space-md);
}

.skeleton-card-media {
  padding: 0;
}

.skeleton-card-media .skeleton-image {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.skeleton-card-media .skeleton-card-body {
  padding: var(--space-lg);
}

/* === Skeleton List === */
.skeleton-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.skeleton-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
}

.skeleton-list-item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.skeleton-list-bordered .skeleton-list-item {
  padding: var(--space-md);
  border-bottom: 1px solid var(--border);
}

.skeleton-list-bordered .skeleton-list-item:last-child {
  border-bottom: none;
}

/* === Skeleton Table === */
.skeleton-table {
  width: 100%;
  border-collapse: collapse;
}

.skeleton-table-header {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--surface-elevated);
  border-bottom: 2px solid var(--border);
}

.skeleton-table-row {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  border-bottom: 1px solid var(--border);
}

.skeleton-table-cell {
  flex: 1;
}

.skeleton-table-cell-sm { flex: 0.5; }
.skeleton-table-cell-lg { flex: 2; }

/* === Skeleton Form === */
.skeleton-form-group {
  margin-bottom: var(--space-md);
}

.skeleton-label {
  height: 12px;
  width: 100px;
  margin-bottom: 8px;
}

.skeleton-input {
  height: 40px;
  width: 100%;
  border-radius: var(--radius-sm);
}

.skeleton-textarea {
  height: 100px;
  width: 100%;
  border-radius: var(--radius-sm);
}

.skeleton-select {
  height: 40px;
  width: 100%;
  border-radius: var(--radius-sm);
}

/* === Skeleton Badge/Tag === */
.skeleton-badge {
  height: 22px;
  width: 60px;
  border-radius: 999px;
  display: inline-block;
}

.skeleton-tag {
  height: 26px;
  width: 80px;
  border-radius: var(--radius-sm);
  display: inline-block;
}

/* === Spinner Components === */
.spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid var(--glass-strong);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner-sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.spinner-md {
  width: 24px;
  height: 24px;
  border-width: 2.5px;
}

.spinner-lg {
  width: 48px;
  height: 48px;
  border-width: 4px;
}

.spinner-xl {
  width: 64px;
  height: 64px;
  border-width: 5px;
}

/* Spinner color variants */
.spinner-primary {
  border-top-color: var(--accent);
}

.spinner-success {
  border-top-color: var(--success);
}

.spinner-danger {
  border-top-color: var(--danger);
}

.spinner-warning {
  border-top-color: var(--warning);
}

.spinner-white {
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
}

/* Dual-ring spinner */
.spinner-dual {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--accent);
  border-bottom-color: var(--accent);
  animation: spin 1s linear infinite;
}

/* Dots spinner */
.spinner-dots {
  display: flex;
  gap: 4px;
  align-items: center;
}

.spinner-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: spinner-dots-bounce 1.4s ease-in-out infinite both;
}

.spinner-dots span:nth-child(1) { animation-delay: -0.32s; }
.spinner-dots span:nth-child(2) { animation-delay: -0.16s; }
.spinner-dots span:nth-child(3) { animation-delay: 0s; }

@keyframes spinner-dots-bounce {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Pulse spinner */
.spinner-pulse {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  animation: spinner-pulse 1.5s ease-in-out infinite;
}

@keyframes spinner-pulse {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/* === Progress Bar (Linear) === */
.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--glass-strong);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.progress-bar-sm { height: 4px; }
.progress-bar-lg { height: 12px; }

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  border-radius: inherit;
  transition: width 0.3s ease;
  position: relative;
}

/* Animated striped progress */
.progress-bar-striped .progress-bar-fill {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
}

.progress-bar-animated .progress-bar-fill {
  animation: progress-bar-stripes 1s linear infinite;
}

@keyframes progress-bar-stripes {
  from { background-position: 1rem 0; }
  to { background-position: 0 0; }
}

/* Indeterminate progress */
.progress-bar-indeterminate .progress-bar-fill {
  width: 30% !important;
  animation: progress-indeterminate 1.5s ease-in-out infinite;
}

@keyframes progress-indeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

/* Progress bar colors */
.progress-bar-success .progress-bar-fill {
  background: linear-gradient(90deg, var(--success), #2fb37c);
}

.progress-bar-danger .progress-bar-fill {
  background: linear-gradient(90deg, var(--danger), #e35d5d);
}

.progress-bar-warning .progress-bar-fill {
  background: linear-gradient(90deg, var(--warning), #e5a820);
}

/* Progress with label */
.progress-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.progress-label {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.progress-value {
  font-weight: 600;
  color: var(--text-primary);
}

/* === Circular Progress === */
.progress-circle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.progress-circle svg {
  transform: rotate(-90deg);
}

.progress-circle-track {
  fill: none;
  stroke: var(--glass-strong);
}

.progress-circle-fill {
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.3s ease;
}

.progress-circle-value {
  position: absolute;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
}

/* Circular progress sizes */
.progress-circle-sm {
  width: 40px;
  height: 40px;
}

.progress-circle-sm .progress-circle-value {
  font-size: 10px;
}

.progress-circle-md {
  width: 64px;
  height: 64px;
}

.progress-circle-lg {
  width: 100px;
  height: 100px;
}

.progress-circle-lg .progress-circle-value {
  font-size: var(--font-size-lg);
}

/* Circular progress spinning (indeterminate) */
.progress-circle-spin svg {
  animation: spin 1.5s linear infinite;
}

/* === Button Loading States === */
.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 0.8s linear infinite;
  opacity: 1;
  color: var(--text-primary);
}

.btn-primary.btn-loading::after {
  border-color: rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  color: #fff;
}

.btn-loading .btn-text {
  visibility: hidden;
}

.btn-loading .btn-spinner {
  display: inline-flex;
}

/* Button with inline spinner */
.btn .btn-spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 0.8s linear infinite;
  margin-right: 6px;
}

/* Loading text state */
.btn-loading-text {
  opacity: 0.7;
  cursor: wait;
}

.btn-loading-text::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
}

/* === Loading Overlays === */
.loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  background: rgba(10, 14, 26, 0.85);
  backdrop-filter: blur(4px);
  border-radius: inherit;
  z-index: 10;
  opacity: 1;
  transition: opacity var(--transition-base);
}

.loading-overlay-light {
  background: rgba(255, 255, 255, 0.9);
}

.loading-overlay-transparent {
  background: rgba(10, 14, 26, 0.6);
}

.loading-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}

.loading-text {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  text-align: center;
  max-width: 200px;
}

.loading-percentage {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--accent);
}

/* Full page loading */
.loading-fullpage {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
}

.loading-fullpage-content {
  text-align: center;
}

.loading-fullpage-logo {
  font-size: 48px;
  margin-bottom: var(--space-md);
  color: var(--accent);
}

.loading-fullpage-text {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  margin-top: var(--space-md);
}

/* === Tab/Page Loading States === */
.tab-content-loading {
  position: relative;
  min-height: 300px;
}

.tab-content-loading::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg);
  z-index: 5;
}

.tab-content-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border: 3px solid var(--glass-strong);
  border-radius: 50%;
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
  z-index: 6;
}

/* Content fade-in */
.content-fade-in {
  animation: contentFadeIn 0.4s ease both;
}

@keyframes contentFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Content placeholder while loading */
.content-placeholder {
  opacity: 0;
  transition: opacity var(--transition-base);
}

.content-placeholder.loaded {
  opacity: 1;
}

/* Staggered content loading */
.stagger-load > * {
  opacity: 0;
  animation: contentFadeIn 0.4s ease both;
}

.stagger-load > *:nth-child(1) { animation-delay: 0s; }
.stagger-load > *:nth-child(2) { animation-delay: 0.05s; }
.stagger-load > *:nth-child(3) { animation-delay: 0.1s; }
.stagger-load > *:nth-child(4) { animation-delay: 0.15s; }
.stagger-load > *:nth-child(5) { animation-delay: 0.2s; }
.stagger-load > *:nth-child(6) { animation-delay: 0.25s; }
.stagger-load > *:nth-child(7) { animation-delay: 0.3s; }
.stagger-load > *:nth-child(8) { animation-delay: 0.35s; }

/* === API Call States === */
.api-loading {
  position: relative;
  pointer-events: none;
}

.api-loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size: 200% 100%;
  animation: api-loading-bar 1.5s ease-in-out infinite;
}

@keyframes api-loading-bar {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.api-state-loading {
  opacity: 0.7;
}

.api-state-success {
  animation: api-success-flash 0.5s ease;
}

@keyframes api-success-flash {
  0% { background-color: transparent; }
  50% { background-color: var(--success-bg); }
  100% { background-color: transparent; }
}

.api-state-error {
  border-color: var(--danger) !important;
}

/* Inline loading indicator */
.inline-loading {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.inline-loading .spinner {
  width: 14px;
  height: 14px;
  border-width: 2px;
}

/* === Skeleton Screen Presets === */

/* Dashboard skeleton */
.skeleton-dashboard {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-xl);
  padding: var(--space-xl);
}

.skeleton-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.skeleton-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* Card grid skeleton */
.skeleton-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
}

/* Article skeleton */
.skeleton-article {
  max-width: 700px;
  margin: 0 auto;
}

.skeleton-article .skeleton-title {
  width: 80%;
  height: 36px;
  margin-bottom: var(--space-lg);
}

.skeleton-article .skeleton-meta {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.skeleton-article .skeleton-image {
  margin-bottom: var(--space-xl);
}

/* Profile skeleton */
.skeleton-profile {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xl);
}

.skeleton-profile-info {
  flex: 1;
}

/* Chat skeleton */
.skeleton-chat {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-md);
}

.skeleton-chat-message {
  display: flex;
  gap: var(--space-sm);
  max-width: 70%;
}

.skeleton-chat-message.sent {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.skeleton-chat-bubble {
  padding: var(--space-md);
  background: var(--glass);
  border-radius: var(--radius);
  flex: 1;
}

/* === Light Theme Loading Overrides === */
.theme-light .skeleton,
.theme-light .skeleton-base {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.04) 0%,
    rgba(0, 0, 0, 0.08) 20%,
    rgba(0, 0, 0, 0.12) 50%,
    rgba(0, 0, 0, 0.08) 80%,
    rgba(0, 0, 0, 0.04) 100%
  );
  background-size: 200% 100%;
}

.theme-light .skeleton-pulse {
  background: rgba(0, 0, 0, 0.08);
}

.theme-light .loading-overlay {
  background: rgba(255, 255, 255, 0.9);
}

.theme-light .loading-overlay-light {
  background: rgba(255, 255, 255, 0.95);
}

.theme-light .spinner {
  border-color: rgba(0, 0, 0, 0.1);
  border-top-color: var(--accent);
}

.theme-light .progress-bar {
  background: rgba(0, 0, 0, 0.08);
}

.theme-light .loading-fullpage {
  background: var(--bg);
}

/* === Utility Classes === */
.loading { cursor: wait; }
.loading * { cursor: wait; }

.hidden-while-loading {
  transition: opacity var(--transition-base);
}

.is-loading .hidden-while-loading {
  opacity: 0;
  pointer-events: none;
}

.shown-while-loading {
  display: none;
}

.is-loading .shown-while-loading {
  display: flex;
}

/* Disable interactions while loading */
.loading-disabled {
  pointer-events: none;
  user-select: none;
  opacity: 0.6;
}

/* ============================================================
   Content Calendar Styles
   ============================================================ */

/* Break out of dashboard grid constraints */
#content-calendar-tab {
  grid-column: 1 / -1;
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  box-sizing: border-box;
  padding: 0 var(--space-xl);
}

.content-calendar-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-lg) 0;
}

/* Calendar Header */
.cc-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
  padding: var(--space-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.cc-header-left {
  flex: 1;
  min-width: 200px;
}

.cc-title {
  margin: 0;
  font-size: var(--font-size-2xl);
  font-weight: 700;
  background: linear-gradient(135deg, var(--text-primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cc-subtitle {
  margin: var(--space-xs) 0 0;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.cc-header-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
}

/* View Toggle */
.cc-view-toggle {
  display: flex;
  background: var(--glass);
  border-radius: var(--radius-sm);
  padding: 3px;
  border: 1px solid var(--border);
}

.cc-view-btn {
  border: none;
  background: transparent;
  padding: 8px 16px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.cc-view-btn:hover {
  color: var(--text-primary);
  background: var(--glass-light);
}

.cc-view-btn.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: white;
  box-shadow: 0 2px 8px var(--accent-glow);
}

/* Filter Bar */
.cc-filter-bar {
  display: flex;
  gap: var(--space-sm);
}

.cc-filter-select {
  min-width: 140px;
  padding: 8px 12px !important;
  font-size: var(--font-size-sm) !important;
}

/* Export Dropdown */
.cc-export-dropdown {
  position: relative;
}

.cc-export-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
  z-index: 100;
  min-width: 150px;
  overflow: hidden;
}

.cc-export-item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: none;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.cc-export-item:hover {
  background: var(--glass-light);
}

/* Calendar Navigation */
.cc-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  background: var(--glass);
  border-radius: var(--radius);
}

.cc-current-period {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  min-width: 200px;
  text-align: center;
}

.cc-nav-btn {
  padding: 8px 16px !important;
}

/* Month View */
.cc-month-view {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.cc-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--glass);
  border-bottom: 1px solid var(--border);
}

.cc-weekday {
  padding: var(--space-md);
  text-align: center;
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cc-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border);
}

.cc-day {
  min-height: 120px;
  padding: var(--space-sm);
  background: var(--surface);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.cc-day:hover {
  background: var(--glass-light);
}

.cc-day-other {
  background: var(--bg-secondary);
  opacity: 0.5;
}

.cc-day-today {
  background: rgba(108, 140, 255, 0.08);
}

.cc-day-today .cc-day-number {
  background: var(--accent);
  color: white;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cc-day-number {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}

.cc-day-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cc-drag-over {
  background: rgba(108, 140, 255, 0.15) !important;
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}

/* Week View */
.cc-week-view {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.cc-week-header {
  background: var(--glass);
  border-bottom: 1px solid var(--border);
}

#ccWeekDayHeaders {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.cc-week-header-day {
  padding: var(--space-md);
  text-align: center;
  border-right: 1px solid var(--border);
}

.cc-week-header-day:last-child {
  border-right: none;
}

.cc-week-header-day.cc-today {
  background: rgba(108, 140, 255, 0.1);
}

.cc-week-day-name {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.cc-week-day-num {
  display: block;
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--text-primary);
}

.cc-today .cc-week-day-num {
  color: var(--accent);
}

.cc-week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  min-height: 400px;
}

.cc-week-day {
  padding: var(--space-md);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.cc-week-day:last-child {
  border-right: none;
}

.cc-week-day:hover {
  background: var(--glass-light);
}

.cc-week-empty {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  text-align: center;
  padding: var(--space-lg) 0;
}

/* List View */
.cc-list-view {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.cc-list-header {
  display: grid;
  grid-template-columns: 120px 1fr 100px 120px 150px 100px;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--glass);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.cc-list-items {
  max-height: 500px;
  overflow-y: auto;
}

.cc-list-row {
  display: grid;
  grid-template-columns: 120px 1fr 100px 120px 150px 100px;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border);
  align-items: center;
  transition: background var(--transition-fast);
}

.cc-list-row:hover {
  background: var(--glass-light);
}

.cc-list-row:last-child {
  border-bottom: none;
}

.cc-list-title-text {
  cursor: pointer;
  color: var(--text-primary);
  font-weight: 500;
  transition: color var(--transition-fast);
}

.cc-list-title-text:hover {
  color: var(--accent);
}

.cc-list-empty {
  padding: var(--space-2xl);
  text-align: center;
  color: var(--text-muted);
}

/* Content Cards */
.cc-content-card {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  cursor: grab;
  transition: all var(--transition-fast);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cc-content-card:active {
  cursor: grabbing;
}

.cc-content-card.cc-dragging {
  opacity: 0.5;
  transform: scale(0.95);
}

.cc-content-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Type colors */
.cc-content-card.cc-type-blog {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1));
  border-left: 3px solid #3b82f6;
  color: #3b82f6;
}

.cc-content-card.cc-type-landing {
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.2), rgba(234, 88, 12, 0.1));
  border-left: 3px solid #ea580c;
  color: #ea580c;
}

.cc-content-card.cc-type-social {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(168, 85, 247, 0.1));
  border-left: 3px solid #a855f7;
  color: #a855f7;
}

/* Status badges */
.cc-status-planned {
  opacity: 0.8;
}

.cc-status-in-progress .cc-card-title {
  font-weight: 600;
}

.cc-status-published {
  opacity: 0.7;
}

.cc-status-published .cc-card-title {
  text-decoration: line-through;
}

.cc-card-icon {
  flex-shrink: 0;
}

.cc-card-title {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Type & Status Badges for List View */
.cc-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  text-transform: capitalize;
}

.cc-type-badge.cc-type-blog {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.cc-type-badge.cc-type-landing {
  background: rgba(234, 88, 12, 0.15);
  color: #ea580c;
}

.cc-type-badge.cc-type-social {
  background: rgba(168, 85, 247, 0.15);
  color: #a855f7;
}

.cc-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  text-transform: capitalize;
}

.cc-status-badge.cc-status-planned {
  background: rgba(100, 116, 139, 0.15);
  color: #64748b;
}

.cc-status-badge.cc-status-in-progress {
  background: rgba(251, 146, 60, 0.15);
  color: #f97316;
}

.cc-status-badge.cc-status-published {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

/* Empty State */
.cc-empty-state {
  text-align: center;
  padding: var(--space-2xl) var(--space-xl);
  background: var(--surface);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg);
}

.cc-empty-icon {
  font-size: 48px;
  margin-bottom: var(--space-md);
}

.cc-empty-state h3 {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-lg);
  color: var(--text-primary);
}

.cc-empty-state p {
  margin: 0 0 var(--space-lg);
  color: var(--text-muted);
}

/* Stats Bar */
.cc-stats-bar {
  display: flex;
  justify-content: center;
  gap: var(--space-2xl);
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  background: var(--glass);
  border-radius: var(--radius);
}

.cc-stat {
  text-align: center;
}

.cc-stat-value {
  display: block;
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--text-primary);
}

.cc-stat-label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

.cc-stat-planned {
  color: #64748b;
}

.cc-stat-progress {
  color: #f97316;
}

.cc-stat-published {
  color: #22c55e;
}

/* Calendar Toast */
.cc-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 12px 24px;
  background: var(--surface-elevated);
  color: var(--text-primary);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  z-index: 10000;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s ease;
}

.cc-toast-visible {
  transform: translateY(0);
  opacity: 1;
}

.cc-toast-success {
  border-left: 4px solid var(--success);
}

.cc-toast-error {
  border-left: 4px solid var(--danger);
}

.cc-toast-info {
  border-left: 4px solid var(--accent);
}

/* Content Calendar Modal Adjustments */
#ccContentModal .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

/* Responsive */
@media (max-width: 1200px) {
  .cc-header {
    flex-direction: column;
    align-items: stretch;
  }

  .cc-header-actions {
    justify-content: flex-start;
  }

  .cc-list-header,
  .cc-list-row {
    grid-template-columns: 100px 1fr 80px 100px;
  }

  .cc-list-keyword,
  .cc-list-actions {
    display: none;
  }
}

@media (max-width: 900px) {
  #content-calendar-tab {
    padding: 0 var(--space-md);
  }

  .cc-nav {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .cc-current-period {
    order: -1;
    width: 100%;
    text-align: center;
  }

  .cc-day {
    min-height: 80px;
    padding: var(--space-xs);
  }

  .cc-weekday {
    font-size: 10px;
    padding: var(--space-sm);
  }

  .cc-content-card {
    font-size: 10px;
    padding: 2px 4px;
  }

  .cc-card-title {
    display: none;
  }

  .cc-stats-bar {
    flex-wrap: wrap;
    gap: var(--space-lg);
  }
}

@media (max-width: 600px) {
  .cc-header-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cc-view-toggle {
    justify-content: center;
  }

  .cc-filter-bar {
    flex-direction: column;
  }

  .cc-filter-select {
    width: 100%;
  }

  .cc-week-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .cc-week-day {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  #ccWeekDayHeaders {
    display: none;
  }

  .cc-list-header,
  .cc-list-row {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
  }

  .cc-list-col {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }

  .cc-list-col::before {
    content: attr(class);
    font-weight: 600;
    min-width: 80px;
  }

  #ccContentModal .form-row {
    grid-template-columns: 1fr;
  }
}

/* Light theme adjustments */
.theme-light .cc-content-card.cc-type-blog {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0.06));
}

.theme-light .cc-content-card.cc-type-landing {
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.12), rgba(234, 88, 12, 0.06));
}

.theme-light .cc-content-card.cc-type-social {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.12), rgba(168, 85, 247, 0.06));
}
/* ============================================================
   UI/UX IMPROVEMENTS - Modern Design Enhancements
   Add these styles to enhance the existing design
   ============================================================ */

/* ============================================================
   GLOBAL IMPROVEMENTS
   ============================================================ */

/* Smoother page transitions */
html {
  scroll-behavior: smooth;
}

/* Better font rendering */
body {
  text-rendering: optimizeLegibility;
}

/* ============================================================
   TOAST NOTIFICATION SYSTEM
   ============================================================ */
.toast-container {
  position: fixed;
  bottom: var(--space-xl);
  right: var(--space-xl);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  pointer-events: auto;
  min-width: 300px;
  max-width: 450px;
  animation: toastEnter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  backdrop-filter: blur(12px);
}

.toast.toast-exit {
  animation: toastExit 0.3s ease-out forwards;
}

.toast-icon {
  font-size: 20px;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}

.toast-content {
  flex: 1;
  min-width: 0;
}

.toast-title {
  font-weight: 600;
  font-size: var(--font-size-sm);
  margin-bottom: 2px;
  color: var(--text-primary);
}

.toast-message {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  line-height: 1.4;
}

.toast-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.toast-close:hover {
  background: var(--glass-light);
  color: var(--text-primary);
}

.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--accent);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  animation: toastProgress 5s linear;
}

/* Toast variants */
.toast.toast-success {
  border-color: rgba(52, 211, 153, 0.3);
  background: linear-gradient(135deg, var(--surface), rgba(52, 211, 153, 0.05));
}
.toast.toast-success .toast-icon {
  background: var(--success-bg);
  color: var(--success);
}
.toast.toast-success .toast-progress {
  background: var(--success);
}

.toast.toast-error {
  border-color: rgba(248, 113, 113, 0.3);
  background: linear-gradient(135deg, var(--surface), rgba(248, 113, 113, 0.05));
}
.toast.toast-error .toast-icon {
  background: var(--danger-bg);
  color: var(--danger);
}
.toast.toast-error .toast-progress {
  background: var(--danger);
}

.toast.toast-warning {
  border-color: rgba(251, 191, 36, 0.3);
  background: linear-gradient(135deg, var(--surface), rgba(251, 191, 36, 0.05));
}
.toast.toast-warning .toast-icon {
  background: rgba(251, 191, 36, 0.15);
  color: var(--warning);
}
.toast.toast-warning .toast-progress {
  background: var(--warning);
}

.toast.toast-info {
  border-color: rgba(56, 189, 248, 0.3);
  background: linear-gradient(135deg, var(--surface), rgba(56, 189, 248, 0.05));
}
.toast.toast-info .toast-icon {
  background: rgba(56, 189, 248, 0.15);
  color: var(--info);
}
.toast.toast-info .toast-progress {
  background: var(--info);
}

@keyframes toastEnter {
  from {
    transform: translateX(100%) scale(0.8);
    opacity: 0;
  }
  to {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

@keyframes toastExit {
  to {
    transform: translateX(100%) scale(0.8);
    opacity: 0;
  }
}

@keyframes toastProgress {
  from { width: 100%; }
  to { width: 0%; }
}

/* ============================================================
   ENHANCED MOBILE NAVIGATION
   ============================================================ */
.mobile-nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all var(--transition-fast);
}

.mobile-nav-toggle:hover {
  background: var(--glass-light);
  border-color: var(--accent);
}

.mobile-nav-toggle span {
  width: 20px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: all var(--transition-base);
  transform-origin: center;
}

.mobile-nav-toggle.active span:first-child {
  transform: translateY(7px) rotate(45deg);
}

.mobile-nav-toggle.active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.mobile-nav-toggle.active span:last-child {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile dropdown menu */
.mobile-nav-menu {
  display: none;
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  z-index: 999;
  overflow-y: auto;
  padding: var(--space-md);
  animation: mobileMenuSlide 0.3s ease-out;
}

.mobile-nav-menu.active {
  display: block;
}

.mobile-nav-menu .tab-btn {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-xs);
  font-size: var(--font-size-base);
  border-radius: var(--radius);
  text-align: left;
}

.mobile-nav-menu .tab-btn .tab-icon {
  font-size: 20px;
  margin-right: 0;
}

.mobile-nav-menu .tab-btn.active {
  background: var(--accent-glow);
}

.mobile-nav-menu .tab-btn.active::after {
  display: none;
}

@keyframes mobileMenuSlide {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 900px) {
  .mobile-nav-toggle {
    display: flex;
  }

  .tab-nav {
    display: none;
  }

  .tab-nav.mobile-visible {
    display: block;
  }
}

/* ============================================================
   ENHANCED SKELETON LOADING STATES
   ============================================================ */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--glass);
  border-radius: var(--radius-sm);
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 100%
  );
  animation: skeleton-shimmer 1.5s infinite;
}

@keyframes skeleton-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Skeleton variants */
.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.skeleton-title {
  height: 24px;
  width: 60%;
  margin-bottom: var(--space-sm);
}

.skeleton-text {
  height: 14px;
  margin-bottom: var(--space-xs);
}

.skeleton-text:last-child {
  width: 80%;
  margin-bottom: 0;
}

.skeleton-button {
  height: 40px;
  width: 120px;
  border-radius: var(--radius-sm);
}

.skeleton-card {
  padding: var(--space-lg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.skeleton-image {
  width: 100%;
  height: 200px;
  border-radius: var(--radius);
}

/* Card skeleton pattern */
.skeleton-card-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* ============================================================
   ENHANCED EMPTY STATES
   ============================================================ */
.empty-state-enhanced {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
  text-align: center;
  background: linear-gradient(180deg, var(--glass) 0%, transparent 100%);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-xl);
  min-height: 300px;
}

.empty-state-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent-glow), var(--glass));
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-lg);
  font-size: 36px;
  animation: emptyIconFloat 3s ease-in-out infinite;
}

@keyframes emptyIconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.empty-state-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-sm);
}

.empty-state-description {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  max-width: 320px;
  line-height: 1.6;
  margin: 0 0 var(--space-lg);
}

.empty-state-actions {
  display: flex;
  gap: var(--space-sm);
}

/* Empty state illustrations (using gradients as fallback) */
.empty-state-illustration {
  width: 120px;
  height: 120px;
  margin-bottom: var(--space-lg);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-state-illustration::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 50%, var(--accent-glow) 0%, transparent 70%);
  animation: pulseGlow 3s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.1); }
}

/* ============================================================
   FLOATING LABELS FOR FORMS
   ============================================================ */
.form-field-floating {
  position: relative;
  margin-bottom: var(--space-md);
}

.form-field-floating .field {
  padding-top: 20px;
  padding-bottom: 8px;
}

.form-field-floating .field-label-float {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--font-size-base);
  color: var(--text-muted);
  pointer-events: none;
  transition: all var(--transition-base);
  background: transparent;
}

.form-field-floating .field:focus ~ .field-label-float,
.form-field-floating .field:not(:placeholder-shown) ~ .field-label-float,
.form-field-floating .field.has-value ~ .field-label-float {
  top: 10px;
  transform: translateY(0);
  font-size: var(--font-size-xs);
  color: var(--accent);
}

.form-field-floating .field::placeholder {
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.form-field-floating .field:focus::placeholder {
  opacity: 0.5;
}

/* RTL support */
[dir="rtl"] .form-field-floating .field-label-float {
  left: auto;
  right: 14px;
}

/* ============================================================
   ENHANCED BUTTON STYLES
   ============================================================ */
/* Button with icon */
.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.btn-icon .icon {
  font-size: 16px;
  transition: transform var(--transition-fast);
}

.btn-icon:hover .icon {
  transform: scale(1.1);
}

/* Button loading state */
.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn-loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin: -8px 0 0 -8px;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  animation: btnSpinner 0.8s linear infinite;
}

.btn-primary.btn-loading::after {
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
}

@keyframes btnSpinner {
  to { transform: rotate(360deg); }
}

/* Button ripple effect */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple::before {
  content: '';
  position: absolute;
  top: var(--ripple-y, 50%);
  left: var(--ripple-x, 50%);
  width: 200%;
  padding-bottom: 200%;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: transform 0.5s, opacity 0.4s;
}

.btn-ripple:active::before {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  transition: transform 0.2s, opacity 0s;
}

/* Subtle button (minimal styling) */
.btn-subtle {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: var(--space-xs) var(--space-sm);
}

.btn-subtle:hover {
  background: var(--glass);
  color: var(--text-primary);
}

/* Icon-only button */
.btn-icon-only {
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}

.btn-icon-only.btn-sm {
  width: 32px;
  height: 32px;
  font-size: var(--font-size-sm);
}

/* ============================================================
   ENHANCED CARD STYLES
   ============================================================ */
/* Card with gradient border on hover */
.card-gradient-hover {
  position: relative;
  background: var(--surface);
  z-index: 1;
}

.card-gradient-hover::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(135deg, var(--accent-grad-start), var(--accent-grad-mid), var(--accent-grad-end));
  border-radius: inherit;
  opacity: 0;
  z-index: -1;
  transition: opacity var(--transition-base);
}

.card-gradient-hover:hover::before {
  opacity: 1;
}

.card-gradient-hover::after {
  content: '';
  position: absolute;
  inset: 1px;
  background: var(--surface);
  border-radius: calc(var(--radius-lg) - 1px);
  z-index: -1;
}

/* Card with shine effect */
.card-shine {
  position: relative;
  overflow: hidden;
}

.card-shine::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 40%,
    rgba(255, 255, 255, 0.03) 50%,
    transparent 60%
  );
  transform: rotate(45deg) translateY(-100%);
  transition: transform 0.8s ease-out;
}

.card-shine:hover::before {
  transform: rotate(45deg) translateY(100%);
}

/* Card with lift effect */
.card-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.card-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
}

/* ============================================================
   PROGRESS INDICATORS
   ============================================================ */
/* Linear progress bar */
.progress-bar {
  width: 100%;
  height: 4px;
  background: var(--glass-strong);
  border-radius: 2px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-grad-mid));
  border-radius: 2px;
  transition: width var(--transition-base);
}

.progress-bar-fill.animated {
  animation: progressPulse 2s ease-in-out infinite;
}

@keyframes progressPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Indeterminate progress */
.progress-bar-indeterminate .progress-bar-fill {
  width: 30%;
  animation: progressIndeterminate 1.5s infinite;
}

@keyframes progressIndeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

/* Circular progress */
.progress-circle {
  position: relative;
  width: 48px;
  height: 48px;
}

.progress-circle svg {
  transform: rotate(-90deg);
}

.progress-circle-bg {
  fill: none;
  stroke: var(--glass-strong);
  stroke-width: 4;
}

.progress-circle-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 126;
  stroke-dashoffset: 126;
  transition: stroke-dashoffset var(--transition-slow);
}

.progress-circle-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

/* Step progress */
.progress-steps {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.progress-step {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.progress-step-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--glass-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  transition: all var(--transition-base);
}

.progress-step.active .progress-step-dot {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 4px var(--accent-glow);
}

.progress-step.complete .progress-step-dot {
  background: var(--success);
  color: #fff;
}

.progress-step-label {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.progress-step.active .progress-step-label,
.progress-step.complete .progress-step-label {
  color: var(--text-primary);
}

.progress-step-line {
  flex: 1;
  height: 2px;
  background: var(--glass-strong);
  min-width: 40px;
}

.progress-step.complete + .progress-step-line,
.progress-step-line.complete {
  background: var(--success);
}

/* ============================================================
   ENHANCED TAB NAVIGATION
   ============================================================ */
/* Tab nav with pill style */
.tab-nav-pills {
  display: flex;
  gap: var(--space-xs);
  padding: 4px;
  background: var(--glass);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

.tab-nav-pills .tab-btn {
  border-radius: var(--radius);
}

.tab-nav-pills .tab-btn.active {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.tab-nav-pills .tab-btn.active::after {
  display: none;
}

/* Enhanced existing tab styles */
.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.tab-btn .tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--glass);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.tab-btn:hover .tab-icon {
  background: var(--glass-light);
  transform: scale(1.05);
}

.tab-btn.active .tab-icon {
  background: var(--accent-glow);
}

/* Tab badge/counter */
.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  border-radius: 9px;
  margin-left: var(--space-xs);
}

/* ============================================================
   ENHANCED INPUT FOCUS STATES
   ============================================================ */
.field:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow:
    0 0 0 3px var(--accent-glow),
    inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Input with icon */
.input-with-icon {
  position: relative;
}

.input-with-icon .field {
  padding-left: 40px;
}

.input-with-icon .input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--text-muted);
  pointer-events: none;
  transition: color var(--transition-fast);
}

.input-with-icon .field:focus ~ .input-icon {
  color: var(--accent);
}

[dir="rtl"] .input-with-icon .field {
  padding-left: 14px;
  padding-right: 40px;
}

[dir="rtl"] .input-with-icon .input-icon {
  left: auto;
  right: 12px;
}

/* Input with clear button */
.input-clearable {
  position: relative;
}

.input-clearable .input-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: none;
  background: var(--glass);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text-muted);
}

.input-clearable .field:not(:placeholder-shown) ~ .input-clear {
  opacity: 1;
}

.input-clearable .input-clear:hover {
  background: var(--glass-strong);
  color: var(--text-primary);
}

/* Validation states */
.field.is-valid {
  border-color: var(--success);
}

.field.is-valid:focus-visible {
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.2);
}

.field.is-invalid {
  border-color: var(--danger);
}

.field.is-invalid:focus-visible {
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.2);
}

.field-feedback {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
  font-size: var(--font-size-xs);
}

.field-feedback.is-valid {
  color: var(--success);
}

.field-feedback.is-invalid {
  color: var(--danger);
}

.field-feedback-icon {
  font-size: 14px;
}

/* ============================================================
   MICRO-INTERACTIONS & ANIMATIONS
   ============================================================ */
/* Bounce on click */
.click-bounce {
  transition: transform var(--transition-fast);
}

.click-bounce:active {
  transform: scale(0.97);
}

/* Shake animation for errors */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

.shake {
  animation: shake 0.4s ease-in-out;
}

/* Success checkmark animation */
@keyframes checkmark {
  0% { stroke-dashoffset: 50; }
  100% { stroke-dashoffset: 0; }
}

.checkmark-animated {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: checkmark 0.3s ease-out forwards;
  animation-delay: 0.2s;
}

/* Fade in up */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.4s ease-out;
}

/* Scale in */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.scale-in {
  animation: scaleIn 0.3s ease-out;
}

/* Stagger children animation */
.stagger-children > * {
  opacity: 0;
  animation: fadeInUp 0.4s ease-out forwards;
}

.stagger-children > *:nth-child(1) { animation-delay: 0s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.05s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.15s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.25s; }
.stagger-children > *:nth-child(7) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(8) { animation-delay: 0.35s; }

/* Pulse attention */
@keyframes pulseAttention {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
  50% { box-shadow: 0 0 0 8px transparent; }
}

.pulse-attention {
  animation: pulseAttention 2s ease-in-out infinite;
}

/* ============================================================
   TOOLTIP IMPROVEMENTS
   ============================================================ */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 6px 12px;
  background: var(--surface-elevated);
  color: var(--text-primary);
  font-size: var(--font-size-xs);
  font-weight: 500;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
  border: 1px solid var(--border);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-fast);
  z-index: 1000;
  pointer-events: none;
}

[data-tooltip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 5px solid transparent;
  border-top-color: var(--border);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-fast);
  z-index: 1000;
}

[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Tooltip positions */
[data-tooltip-pos="bottom"]::after {
  bottom: auto;
  top: calc(100% + 8px);
}

[data-tooltip-pos="bottom"]::before {
  bottom: auto;
  top: calc(100% + 4px);
  border-top-color: transparent;
  border-bottom-color: var(--border);
}

[data-tooltip-pos="left"]::after {
  bottom: auto;
  left: auto;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) translateX(4px);
}

[data-tooltip-pos="left"]:hover::after {
  transform: translateY(-50%) translateX(0);
}

[data-tooltip-pos="right"]::after {
  bottom: auto;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
}

[data-tooltip-pos="right"]:hover::after {
  transform: translateY(-50%) translateX(0);
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.breadcrumb-link {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb-link:hover {
  color: var(--accent);
}

.breadcrumb-separator {
  color: var(--text-muted);
  font-size: 10px;
}

.breadcrumb-current {
  color: var(--text-primary);
  font-weight: 500;
}

/* ============================================================
   BADGE IMPROVEMENTS
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  border-radius: 99px;
  background: var(--glass);
  color: var(--text-secondary);
}

.badge-primary {
  background: var(--accent-glow);
  color: var(--accent);
}

.badge-success {
  background: var(--success-bg);
  color: var(--success);
}

.badge-danger {
  background: var(--danger-bg);
  color: var(--danger);
}

.badge-warning {
  background: rgba(251, 191, 36, 0.15);
  color: var(--warning);
}

.badge-info {
  background: rgba(56, 189, 248, 0.15);
  color: var(--info);
}

/* Badge with dot indicator */
.badge-dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 6px;
}

/* ============================================================
   DROPDOWN IMPROVEMENTS
   ============================================================ */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 180px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--transition-fast);
}

.dropdown.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.dropdown-item:hover {
  background: var(--glass);
  color: var(--text-primary);
}

.dropdown-item:first-child {
  border-radius: var(--radius) var(--radius) 0 0;
}

.dropdown-item:last-child {
  border-radius: 0 0 var(--radius) var(--radius);
}

.dropdown-item-icon {
  font-size: 14px;
  width: 20px;
  text-align: center;
}

.dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: var(--space-xs) 0;
}

/* ============================================================
   AVATAR & USER COMPONENTS
   ============================================================ */
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-grad-mid));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: var(--font-size-sm);
  flex-shrink: 0;
}

.avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.avatar-sm {
  width: 32px;
  height: 32px;
  font-size: var(--font-size-xs);
}

.avatar-lg {
  width: 56px;
  height: 56px;
  font-size: var(--font-size-lg);
}

.avatar-group {
  display: flex;
}

.avatar-group .avatar {
  margin-left: -8px;
  border: 2px solid var(--surface);
}

.avatar-group .avatar:first-child {
  margin-left: 0;
}

/* Status indicator */
.avatar-status {
  position: relative;
}

.avatar-status::after {
  content: '';
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 10px;
  height: 10px;
  background: var(--text-muted);
  border: 2px solid var(--surface);
  border-radius: 50%;
}

.avatar-status.online::after {
  background: var(--success);
}

.avatar-status.busy::after {
  background: var(--danger);
}

.avatar-status.away::after {
  background: var(--warning);
}

/* ============================================================
   RESPONSIVE IMPROVEMENTS
   ============================================================ */
@media (max-width: 768px) {
  .toast-container {
    left: var(--space-md);
    right: var(--space-md);
    bottom: var(--space-md);
  }

  .toast {
    min-width: auto;
    max-width: none;
    width: 100%;
  }

  .empty-state-enhanced {
    padding: var(--space-xl) var(--space-md);
    min-height: 200px;
  }

  .empty-state-icon {
    width: 60px;
    height: 60px;
    font-size: 28px;
  }

  /* Touch-friendly sizes */
  .btn {
    min-height: 44px;
  }

  .field {
    min-height: 44px;
  }

  .tab-btn {
    min-height: 44px;
    padding: 10px 16px;
  }

  /* Tooltip disabled on touch */
  [data-tooltip]::after,
  [data-tooltip]::before {
    display: none;
  }
}

/* ============================================================
   LIGHT THEME ADJUSTMENTS
   ============================================================ */
.theme-light .toast {
  background: #fff;
}

.theme-light .skeleton::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.04) 50%,
    transparent 100%
  );
}

.theme-light .empty-state-enhanced {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, transparent 100%);
}

.theme-light .dropdown-menu {
  background: #fff;
}

.theme-light .dropdown-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

.theme-light .mobile-nav-menu {
  background: #fff;
}

.theme-light .progress-steps .progress-step-dot {
  background: rgba(0, 0, 0, 0.08);
}

/* ============================================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================================ */
/* Focus visible only (keyboard navigation) */
:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* High contrast mode improvements */
@media (prefers-contrast: high) {
  .btn {
    border-width: 2px;
  }

  .field {
    border-width: 2px;
  }

  .card {
    border-width: 2px;
  }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
  .toast-container,
  .mobile-nav-toggle,
  .mobile-nav-menu,
  .tab-nav {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
  }

  .card,
  .panel {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }
}

/* ============================================================
   SITE AUDIT
   ============================================================ */
.site-audit-container {
  padding: var(--space-xl);
  max-width: 1200px;
  margin: 0 auto;
}

.site-audit-layout {
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: var(--space-xl);
  margin-top: var(--space-lg);
}

@media (max-width: 900px) {
  .site-audit-layout {
    grid-template-columns: 1fr;
  }
}

.audit-input-panel {
  position: sticky;
  top: 80px;
  align-self: start;
}

.audit-results-panel {
  min-height: 400px;
}

/* Placeholder State */
.audit-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  background: var(--surface);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
}

.placeholder-content {
  text-align: center;
  max-width: 400px;
}

.placeholder-icon {
  font-size: 64px;
  margin-bottom: var(--space-md);
  opacity: 0.6;
}

.placeholder-content h3 {
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  margin: 0 0 var(--space-sm);
}

.placeholder-content p {
  color: var(--text-muted);
  margin: 0 0 var(--space-lg);
}

.placeholder-features {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xs) var(--space-md);
}

.placeholder-features li {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  padding: var(--space-xs) 0;
}

/* Loading State */
.audit-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  gap: var(--space-md);
}

.audit-loading p {
  color: var(--text-muted);
  margin: 0;
}

.audit-loading-url {
  font-size: var(--font-size-sm);
  color: var(--accent);
  word-break: break-all;
  max-width: 300px;
  text-align: center;
}

/* Error State */
.audit-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  background: var(--danger-bg);
  border: 1px solid var(--danger);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  text-align: center;
  gap: var(--space-md);
}

.audit-error .error-icon {
  font-size: 48px;
}

.audit-error h3 {
  color: var(--danger);
  margin: 0;
}

.audit-error p {
  color: var(--text-secondary);
  margin: 0;
  max-width: 400px;
}

/* Results */
.audit-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* Score Card */
.audit-score-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-xl);
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

.audit-score-circle {
  position: relative;
  width: 140px;
  height: 140px;
}

.audit-score-circle .score-svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}

.audit-score-circle .score-bg {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 8;
}

.audit-score-circle .score-progress {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s ease-out;
}

.audit-score-circle .score-progress.score-high {
  stroke: var(--success);
}

.audit-score-circle .score-progress.score-medium {
  stroke: var(--warning);
}

.audit-score-circle .score-progress.score-low {
  stroke: var(--danger);
}

.audit-score-circle .score-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 36px;
  font-weight: 700;
  color: var(--text-primary);
}

.audit-score-card .score-label {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  margin-top: var(--space-sm);
}

.audit-score-card .score-url {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-top: var(--space-xs);
  word-break: break-all;
  max-width: 100%;
  text-align: center;
}

/* Issue Summary Badges */
.audit-issues-summary {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.issue-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius);
  min-width: 100px;
}

.issue-badge.critical {
  background: var(--danger-bg);
  border: 1px solid rgba(248, 113, 113, 0.3);
}

.issue-badge.warning {
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.issue-badge.info {
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.issue-badge .issue-count {
  font-size: 28px;
  font-weight: 700;
}

.issue-badge.critical .issue-count {
  color: var(--danger);
}

.issue-badge.warning .issue-count {
  color: var(--warning);
}

.issue-badge.info .issue-count {
  color: var(--info);
}

.issue-badge .issue-label {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

/* Audit Sections */
.audit-section {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: var(--space-lg);
}

.audit-section-title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border);
}

/* Issues List */
.audit-issues-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.audit-issue {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
}

.audit-issue.critical {
  background: var(--danger-bg);
  border-left: 3px solid var(--danger);
}

.audit-issue.warning {
  background: rgba(251, 191, 36, 0.08);
  border-left: 3px solid var(--warning);
}

.audit-issue.info {
  background: rgba(56, 189, 248, 0.08);
  border-left: 3px solid var(--info);
}

.audit-issue .issue-icon {
  flex-shrink: 0;
}

.audit-issue .issue-text {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  line-height: 1.5;
}

.audit-no-issues {
  text-align: center;
  padding: var(--space-lg);
  color: var(--success);
  font-size: var(--font-size-md);
}

/* Recommendations */
.audit-recommendations {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.audit-recommendation {
  padding: var(--space-md);
  border-radius: var(--radius);
  background: var(--glass);
  border: 1px solid var(--border);
}

.audit-recommendation.priority-high {
  border-left: 4px solid var(--danger);
}

.audit-recommendation.priority-medium {
  border-left: 4px solid var(--warning);
}

.audit-recommendation.priority-low {
  border-left: 4px solid var(--info);
}

.audit-recommendation .rec-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.audit-recommendation .rec-priority {
  font-size: var(--font-size-sm);
}

.audit-recommendation .rec-category {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.audit-recommendation .rec-title {
  font-weight: 600;
  font-size: var(--font-size-base);
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.audit-recommendation .rec-description {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

.audit-no-recommendations {
  text-align: center;
  padding: var(--space-lg);
  color: var(--text-muted);
}

/* Details Accordion */
.audit-details {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: var(--space-sm);
  overflow: hidden;
}

.audit-details summary {
  padding: var(--space-md);
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  transition: background var(--transition-fast);
}

.audit-details summary:hover {
  background: var(--glass-light);
}

.audit-details[open] summary {
  border-bottom: 1px solid var(--border);
}

.audit-detail-content {
  padding: var(--space-md);
}

/* Detail Rows */
.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border);
  gap: var(--space-md);
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-label {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  flex-shrink: 0;
}

.detail-value {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  text-align: right;
  word-break: break-word;
}

.detail-value.success {
  color: var(--success);
}

.detail-value.warning {
  color: var(--warning);
}

.detail-value.error {
  color: var(--danger);
}

.detail-value small {
  color: var(--text-muted);
}

.detail-list {
  margin: var(--space-xs) 0 0;
  padding-left: var(--space-lg);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.detail-list li {
  margin-bottom: var(--space-xs);
  word-break: break-all;
}

.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.detail-tag {
  padding: 2px 8px;
  background: var(--glass-strong);
  border-radius: 999px;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

/* Light theme adjustments */
.theme-light .audit-placeholder {
  background: var(--surface);
}

.theme-light .audit-score-card,
.theme-light .audit-section,
.theme-light .audit-details {
  background: var(--surface);
}

.theme-light .audit-details summary:hover {
  background: var(--surface-elevated);
}

/* ============================================================
   Backlink Analyzer Styles
   ============================================================ */
.backlink-analyzer-section {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
}

.backlink-analyzer-section h3 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-md);
  font-weight: 600;
}

.backlink-domain-info {
  padding: var(--space-md);
  background: linear-gradient(135deg, var(--glass), transparent);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.backlink-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-md);
}

.backlink-stat-card {
  background: var(--surface-elevated);
  border-radius: var(--radius);
  padding: var(--space-lg);
  text-align: center;
  border: 1px solid var(--border);
  transition: all var(--transition-fast);
}

.backlink-stat-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-sm);
  transform: translateY(-2px);
}

.backlink-stat-card .stat-icon {
  font-size: 1.5rem;
  margin-bottom: var(--space-xs);
}

.backlink-stat-card .stat-value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}

.backlink-stat-card .stat-label {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: var(--space-xs);
}

.backlink-trend-section {
  padding: var(--space-md);
  background: var(--glass);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.backlink-trend-section h4 {
  margin: 0 0 var(--space-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.trend-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.trend-label {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.trend-value {
  font-size: 1.25rem;
  font-weight: 600;
}

.trend-badge {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.backlink-charts-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
}

.backlink-chart-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--space-md);
  border: 1px solid var(--border);
}

.backlink-chart-card h4 {
  margin: 0 0 var(--space-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.backlink-bar-chart .chart-bar-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.backlink-top-domains h4 {
  margin: 0 0 var(--space-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.backlink-list-section h4 {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.backlink-filters {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.backlink-pagination {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  flex-wrap: wrap;
  align-items: center;
}

.backlink-data-note {
  padding: var(--space-md);
  background: var(--glass);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  border-left: 3px solid var(--warning);
}

.da-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--font-size-xs);
}

/* Light theme overrides for backlink analyzer */
.theme-light .backlink-stat-card {
  background: var(--surface);
  border-color: var(--border-strong);
}

.theme-light .backlink-trend-section,
.theme-light .backlink-chart-card {
  background: var(--surface-elevated);
}

.theme-light .backlink-data-note {
  background: rgba(251, 191, 36, 0.08);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .backlink-overview-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .backlink-stat-card .stat-value {
    font-size: 1.5rem;
  }

  .backlink-charts-row {
    grid-template-columns: 1fr;
  }

  .backlink-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .backlink-filters .field {
    max-width: none !important;
  }
}

@media (max-width: 520px) {
  .backlink-overview-grid {
    grid-template-columns: 1fr;
  }

  .trend-item {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   Content Gap Analysis
   ============================================================ */

.content-gap-section {
  background: var(--glass);
  border-radius: var(--radius);
  padding: var(--space-md);
}

.content-gap-section h3 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.content-gap-competitors {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.content-gap-competitor-input {
  transition: border-color 0.2s ease;
}

.content-gap-competitor-input:focus {
  border-color: var(--primary);
}

/* Content Gap Summary Stats */
.content-gap-summary {
  margin-bottom: var(--space-lg);
}

.content-gap-stat-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.content-gap-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.content-gap-stat-card.quick-win-stat {
  position: relative;
  overflow: hidden;
}

.content-gap-stat-card.quick-win-stat::before {
  content: '⚡';
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 3rem;
  opacity: 0.1;
}

/* Quick Win Badge */
.quick-win-badge {
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  }
  50% {
    box-shadow: 0 0 8px 4px rgba(34, 197, 94, 0.2);
  }
}

/* Content Gap Table */
#contentGapTable {
  font-size: 0.9rem;
}

#contentGapTable th {
  background: var(--surface-elevated);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
}

#contentGapTable td {
  vertical-align: middle;
}

#contentGapTable tr:hover {
  background: var(--glass);
}

.difficulty-bar {
  min-width: 80px;
}

.potential-score {
  font-size: 1.1rem;
}

.type-badge {
  white-space: nowrap;
}

/* Content Gap Controls */
.content-gap-controls select {
  padding: 6px 10px;
  font-size: 0.85rem;
  min-width: 140px;
}

/* Category Tabs */
.content-gap-category-tab {
  transition: all 0.2s ease;
}

.content-gap-category-tab:hover:not(.active) {
  background: var(--glass) !important;
}

.category-topic-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.category-topic-card:hover {
  transform: translateX(4px);
  box-shadow: -4px 0 0 var(--primary);
}

/* Content Gap Overlap Visualization */
.content-gap-overlap {
  position: relative;
}

.venn-diagram {
  flex-shrink: 0;
}

.venn-circle {
  transition: transform 0.3s ease;
}

.venn-diagram:hover .venn-you {
  transform: translateX(-5px);
}

.venn-diagram:hover .venn-competitors {
  transform: translateX(5px);
}

.overlap-stats {
  flex: 1;
  min-width: 200px;
}

.overlap-percentage {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Create Content Button */
.content-gap-create-btn {
  white-space: nowrap;
  font-size: 0.8rem;
  padding: 4px 12px;
}

.content-gap-create-btn:hover {
  transform: scale(1.05);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .content-gap-summary {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .content-gap-overlap .overlap-visual {
    flex-direction: column;
    align-items: flex-start;
  }

  .venn-diagram {
    margin-bottom: var(--space-md);
  }

  .content-gap-controls {
    flex-direction: column;
  }

  .content-gap-controls select {
    width: 100%;
  }

  .category-tabs {
    flex-wrap: wrap;
  }

  .content-gap-category-tab {
    flex: 1;
    min-width: 100px;
    text-align: center;
    font-size: 0.8rem;
  }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  .content-gap-stat-card.quick-win-stat {
    background: linear-gradient(135deg, rgba(34,197,94,0.15), rgba(34,197,94,0.05));
  }

  .category-topic-card {
    background: var(--surface-elevated);
  }
}

/* ============================================================
   Keyword Cannibalization Detector
   ============================================================ */

.cannibalization-section {
  background: var(--glass);
  border-radius: var(--radius);
  padding: var(--space-md);
}

.cannibalization-section h3 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Radio group for input method */
.radio-group {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  cursor: pointer;
  font-size: var(--font-size-sm);
}

.radio-label input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

/* Manual entry rows */
.manual-entry-row {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  align-items: center;
}

.manual-entry-row .field {
  flex: 1;
}

.manual-entry-row .cannibalization-remove-entry {
  flex: 0 0 auto;
  padding: var(--space-xs) var(--space-sm);
  color: var(--danger);
  opacity: 0.7;
}

.manual-entry-row .cannibalization-remove-entry:hover {
  opacity: 1;
  background: rgba(239, 68, 68, 0.1);
}

/* Summary stats grid */
.cannibalization-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.cannibalization-stat-card {
  background: var(--surface-elevated);
  border-radius: 12px;
  padding: var(--space-md);
  text-align: center;
  border: 1px solid var(--border);
  transition: transform 0.2s, box-shadow 0.2s;
}

.cannibalization-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Cluster cards */
.cannibalization-clusters-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.cannibalization-cluster-card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.cannibalization-cluster-card:hover {
  box-shadow: var(--shadow-md);
}

.cannibalization-cluster-card.high {
  border-left: 4px solid var(--danger);
}

.cannibalization-cluster-card.medium {
  border-left: 4px solid var(--warning);
}

.cannibalization-cluster-card.low {
  border-left: 4px solid var(--success);
}

.cluster-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  background: var(--glass);
  cursor: pointer;
}

.cluster-keyword {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.keyword-text {
  font-weight: 600;
  font-size: var(--font-size-md);
  color: var(--text-primary);
}

.page-count {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.cluster-toggle {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-sm);
  opacity: 0.6;
}

.cluster-toggle:hover {
  opacity: 1;
}

.cluster-content {
  padding: var(--space-md);
  border-top: 1px solid var(--border);
}

.cluster-content h5 {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-sm);
}

/* Competing pages list */
.cluster-pages {
  margin-bottom: var(--space-md);
}

.cannibalization-page-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-xs);
  border-radius: var(--radius-sm);
  flex-wrap: wrap;
}

.cannibalization-page-item:hover {
  background: var(--glass);
}

.cannibalization-page-url {
  color: var(--primary);
  font-size: var(--font-size-sm);
  text-decoration: none;
  flex: 1;
  min-width: 150px;
}

.cannibalization-page-url:hover {
  text-decoration: underline;
}

.cannibalization-page-title {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  flex: 2;
  min-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cannibalization-page-indicators {
  display: flex;
  gap: 4px;
}

.cannibalization-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
}

.cannibalization-indicator.title {
  background: rgba(var(--primary-rgb), 0.15);
  color: var(--primary);
}

.cannibalization-indicator.h1 {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}

/* Severity badges */
.severity-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.severity-badge.high {
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger);
}

.severity-badge.medium {
  background: rgba(251, 191, 36, 0.15);
  color: var(--warning);
}

.severity-badge.low {
  background: rgba(34, 197, 94, 0.15);
  color: var(--success);
}

/* Recommendations */
.cluster-recommendations {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

.cannibalization-recommendation {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-xs);
  border-radius: var(--radius-sm);
  background: var(--glass);
  border-left: 3px solid var(--border);
}

.cannibalization-recommendation.high {
  border-left-color: var(--danger);
  background: rgba(239, 68, 68, 0.05);
}

.cannibalization-recommendation.medium {
  border-left-color: var(--warning);
  background: rgba(251, 191, 36, 0.05);
}

.cannibalization-recommendation.low {
  border-left-color: var(--success);
  background: rgba(34, 197, 94, 0.05);
}

.recommendation-type {
  font-size: var(--font-size-md);
  flex-shrink: 0;
}

.recommendation-text {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Responsive styles */
@media (max-width: 768px) {
  .cannibalization-summary {
    grid-template-columns: repeat(2, 1fr);
  }

  .radio-group {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .manual-entry-row {
    flex-direction: column;
  }

  .manual-entry-row .field {
    width: 100%;
  }

  .cannibalization-page-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .cannibalization-page-url,
  .cannibalization-page-title {
    width: 100%;
  }
}

/* Light theme overrides */
.theme-light .cannibalization-cluster-card {
  background: var(--surface);
}

.theme-light .cluster-header {
  background: rgba(0, 0, 0, 0.02);
}

.theme-light .cannibalization-recommendation {
  background: rgba(0, 0, 0, 0.02);
}

/* ============================================================
   Templates Gallery
   ============================================================ */
.templates-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-xl);
}

.templates-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}

.templates-header-content {
  flex: 1;
  min-width: 200px;
}

.templates-header .page-title {
  margin-bottom: var(--space-xs);
}

.templates-header .page-subtitle {
  color: var(--text-muted);
  font-size: var(--font-size-md);
}

.templates-search-bar {
  width: 300px;
}

.templates-search-bar .field {
  background: var(--surface);
  border: 1px solid var(--border-strong);
}

/* Category Filter Bar */
.templates-filter-bar {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
  padding: var(--space-sm);
  background: var(--glass);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.template-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.template-filter-btn:hover {
  background: var(--glass-light);
  color: var(--text-primary);
}

.template-filter-btn.active {
  background: var(--accent);
  color: white;
  box-shadow: 0 2px 8px var(--accent-glow);
}

.filter-icon {
  font-size: 1rem;
}

/* Templates Grid */
.templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-lg);
}

/* Template Card */
.template-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition-base);
}

.template-card:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 0 0 1px var(--accent);
  transform: translateY(-4px);
}

.template-card-preview {
  background: linear-gradient(135deg, var(--surface-elevated) 0%, var(--glass-strong) 100%);
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.template-card-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(108, 140, 255, 0.05) 0%,
    rgba(167, 139, 250, 0.05) 50%,
    rgba(244, 114, 182, 0.05) 100%);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.template-card:hover .template-card-preview::before {
  opacity: 1;
}

.template-card-icon {
  font-size: 5rem;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
  transition: transform var(--transition-base);
}

.template-card:hover .template-card-icon {
  transform: scale(1.1);
}

.template-card-content {
  padding: var(--space-lg);
}

.template-card-category {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-xs);
}

.template-card-title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
  line-height: 1.3;
}

.template-card-description {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: var(--space-md);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.template-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.template-card-type {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  background: var(--glass);
  padding: 4px 10px;
  border-radius: 20px;
}

.template-card-actions {
  display: flex;
  gap: var(--space-sm);
}

.template-card-actions .btn {
  flex: 1;
  justify-content: center;
}

/* Empty State */
.templates-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-2xl);
  background: var(--glass);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
}

.templates-empty-state .empty-icon {
  font-size: 4rem;
  margin-bottom: var(--space-md);
  opacity: 0.6;
}

.templates-empty-state h3 {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.templates-empty-state p {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

/* Template Preview Modal */
.template-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}

.template-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.template-modal-content {
  position: relative;
  width: 100%;
  max-width: 1000px;
  max-height: 90vh;
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.template-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 1px solid var(--border);
}

.template-modal-header h2 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin: 0;
}

.template-modal-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--glass);
  color: var(--text-secondary);
  font-size: 1.5rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.template-modal-close:hover {
  background: var(--glass-strong);
  color: var(--text-primary);
}

.template-modal-body {
  flex: 1;
  overflow: auto;
  padding: var(--space-lg);
}

.template-modal-preview {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--space-lg);
}

.template-modal-preview iframe {
  width: 100%;
  height: 450px;
  border: none;
  display: block;
}

.template-modal-info {
  padding: var(--space-md);
  background: var(--glass);
  border-radius: var(--radius);
}

.template-modal-info p {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  margin-bottom: var(--space-sm);
}

.template-modal-meta {
  display: flex;
  gap: var(--space-sm);
}

.template-modal-category,
.template-modal-type {
  font-size: var(--font-size-xs);
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--surface);
  color: var(--text-muted);
}

.template-modal-category {
  background: rgba(108, 140, 255, 0.1);
  color: var(--accent);
}

.template-modal-footer {
  display: flex;
  gap: var(--space-sm);
  justify-content: flex-end;
  padding: var(--space-lg) var(--space-xl);
  border-top: 1px solid var(--border);
  background: var(--glass);
}

/* Light theme overrides for Templates */
.theme-light .template-card {
  background: var(--surface);
  border-color: var(--border-strong);
}

.theme-light .template-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--accent);
}

.theme-light .template-card-preview {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.theme-light .templates-filter-bar {
  background: var(--surface);
}

.theme-light .template-modal-content {
  background: var(--surface);
}

.theme-light .template-modal-preview {
  background: white;
}

/* Responsive */
@media (max-width: 768px) {
  .templates-container {
    padding: var(--space-md);
  }

  .templates-header {
    flex-direction: column;
    align-items: stretch;
  }

  .templates-search-bar {
    width: 100%;
  }

  .templates-filter-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-sm);
  }

  .templates-filter-bar::-webkit-scrollbar {
    height: 4px;
  }

  .templates-grid {
    grid-template-columns: 1fr;
  }

  .template-modal-content {
    max-height: 100vh;
    border-radius: 0;
  }

  .template-modal-preview iframe {
    height: 300px;
  }

  .template-modal-footer {
    flex-direction: column;
  }

  .template-modal-footer .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 520px) {
  .template-card-actions {
    flex-direction: column;
  }
}

/* ============================================================
   EXPORT DROPDOWN & MODAL STYLES
   ============================================================ */

/* Export Dropdown Container */
.export-dropdown-container {
  position: relative;
  display: inline-block;
}

.export-dropdown-container .dropdown-arrow {
  font-size: 8px;
  margin-left: 4px;
  transition: transform var(--transition-fast);
}

.export-dropdown-container.open .dropdown-arrow {
  transform: rotate(180deg);
}

.export-btn-icon {
  margin-right: 4px;
}

/* Export Dropdown Menu */
.export-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  z-index: 100;
  overflow: hidden;
  animation: dropdownFadeIn 0.15s ease-out;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.export-dropdown-header {
  padding: 8px 12px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  background: var(--glass);
  border-bottom: 1px solid var(--border);
}

.export-menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
  text-align: left;
}

.export-menu-item:hover {
  background: var(--glass-light);
}

.export-menu-item:active {
  background: var(--glass-strong);
}

.export-item-icon {
  width: 24px;
  font-size: 16px;
  text-align: center;
  flex-shrink: 0;
}

.export-item-text {
  flex: 1;
}

.export-dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* Export Modal */
.export-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}

.export-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.export-modal-content {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-3);
  animation: modalSlideIn 0.25s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.export-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 1px solid var(--border);
  background: var(--glass);
}

.export-modal-header h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.export-modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--glass);
  border-radius: var(--radius-sm);
  font-size: 20px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.export-modal-close:hover {
  background: var(--glass-strong);
  color: var(--text-primary);
}

.export-modal-body {
  padding: var(--space-xl);
  max-height: 60vh;
  overflow-y: auto;
}

.export-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  border-top: 1px solid var(--border);
  background: var(--glass);
}

/* Export Settings Section */
.export-settings-section {
  margin-bottom: var(--space-lg);
}

.export-settings-section:last-child {
  margin-bottom: 0;
}

.export-settings-section h4 {
  margin: 0 0 var(--space-md);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.export-checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
  margin-bottom: var(--space-xs);
}

.export-checkbox-label:hover {
  background: var(--glass-light);
}

.export-checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.export-checkbox-label span {
  font-size: var(--font-size-sm);
}

.export-radio-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-right: var(--space-xs);
  margin-bottom: var(--space-xs);
}

.export-radio-label:hover {
  border-color: var(--accent);
  background: var(--glass-light);
}

.export-radio-label:has(input:checked) {
  border-color: var(--accent);
  background: rgba(108, 140, 255, 0.1);
}

.export-radio-label input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.export-radio-label span {
  font-size: var(--font-size-sm);
}

.export-format-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.export-field-group {
  margin-bottom: var(--space-md);
}

.export-field-group:last-child {
  margin-bottom: 0;
}

.export-field-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

.export-field-row .field-label {
  margin: 0;
  min-width: 100px;
  font-size: var(--font-size-sm);
}

.export-field-row .field {
  flex: 1;
}

/* Export Email Status */
.export-email-status {
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  margin-top: var(--space-md);
}

.export-email-status.loading {
  background: rgba(56, 189, 248, 0.1);
  color: var(--info);
  border: 1px solid rgba(56, 189, 248, 0.2);
}

.export-email-status.success {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid rgba(52, 211, 153, 0.2);
}

.export-email-status.error {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid rgba(248, 113, 113, 0.2);
}

/* Export Progress Indicator */
.export-progress {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--glass);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
}

.export-progress-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.export-progress-text {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* Light theme overrides for Export */
.theme-light .export-dropdown-menu {
  background: var(--surface);
  border-color: var(--border-strong);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.theme-light .export-modal-content {
  background: var(--surface);
}

.theme-light .export-menu-item:hover {
  background: var(--surface-elevated);
}

.theme-light .export-checkbox-label:hover,
.theme-light .export-radio-label:hover {
  background: var(--surface-elevated);
}

/* Responsive */
@media (max-width: 520px) {
  .export-dropdown-menu {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 70vh;
    overflow-y: auto;
  }

  .export-modal-content {
    max-width: 100%;
    max-height: 90vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    margin-top: auto;
  }

  .export-format-options {
    flex-direction: column;
  }

  .export-radio-label {
    width: 100%;
    justify-content: flex-start;
    margin-right: 0;
  }
}


/* ============================================================
   Multi-language Content Generation Styles
   ============================================================ */

.multilang-section {
  margin-top: var(--space-md);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--glass);
}

.multilang-section summary {
  padding: var(--space-md);
  cursor: pointer;
  user-select: none;
  font-weight: 500;
}

.multilang-section[open] summary {
  border-bottom: 1px solid var(--border);
}

.multilang-fields {
  padding: var(--space-md);
}

.multilang-targets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-xs);
  padding: var(--space-sm);
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  max-height: 200px;
  overflow-y: auto;
}

.multilang-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-size-sm);
  transition: background var(--transition-fast);
}

.multilang-checkbox:hover {
  background: var(--glass-light);
}

.multilang-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent);
}

.multilang-checkbox input[type="checkbox"]:checked + span {
  font-weight: 500;
  color: var(--accent);
}

.multilang-select-actions {
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.multilang-option {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  cursor: pointer;
}

.multilang-option:hover {
  color: var(--text-primary);
}

.multilang-actions {
  margin-top: var(--space-md);
}

.multilang-actions .btn {
  width: 100%;
}

.ml-btn-icon {
  margin-right: var(--space-xs);
}

.multilang-status {
  margin-top: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.multilang-status.loading {
  background: rgba(56, 189, 248, 0.1);
  color: var(--info);
  border: 1px solid rgba(56, 189, 248, 0.2);
}

.multilang-status.success {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid rgba(52, 211, 153, 0.2);
}

.multilang-status.error {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid rgba(248, 113, 113, 0.2);
}

/* Results Panel */
.multilang-results-panel {
  margin-top: var(--space-md);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.multilang-results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  background: var(--glass);
  border-bottom: 1px solid var(--border);
}

.multilang-results-header h4 {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 600;
}

/* Language Tabs */
.multilang-tabs {
  background: var(--surface-elevated);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

.ml-language-tabs {
  display: flex;
  gap: 2px;
  padding: var(--space-xs);
  min-width: min-content;
}

.ml-lang-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 8px 16px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.ml-lang-tab:hover {
  background: var(--glass);
  color: var(--text-primary);
}

.ml-lang-tab.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.ml-lang-tab.source {
  background: rgba(52, 211, 153, 0.15);
  color: var(--success);
  border-color: rgba(52, 211, 153, 0.3);
}

.ml-lang-tab.rtl {
  font-style: italic;
}

.ml-lang-tab .lang-flag {
  font-size: 16px;
}

.ml-lang-tab .lang-rtl-badge {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 4px;
  border-radius: 3px;
}

/* Translation Content Area */
.multilang-translation-content {
  padding: var(--space-lg);
  max-height: 400px;
  overflow: auto;
}

.ml-translation-view {
  display: none;
}

.ml-translation-view.active {
  display: block;
}

.ml-translation-html {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: var(--font-size-sm);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow: auto;
}

.ml-translation-html[dir="rtl"] {
  text-align: right;
}

.ml-translation-preview {
  margin-top: var(--space-md);
}

.ml-preview-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.ml-preview-frame {
  width: 100%;
  height: 300px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: white;
}

/* Export Actions */
.multilang-export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background: var(--glass);
  border-top: 1px solid var(--border);
}

/* RTL Support for Hebrew/Arabic */
.multilang-translation-content[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

.ml-lang-tab.rtl-indicator::after {
  content: "RTL";
  font-size: 9px;
  background: var(--glass-strong);
  padding: 1px 4px;
  border-radius: 3px;
  margin-left: 4px;
  vertical-align: middle;
}

/* Loading State */
.multilang-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
  gap: var(--space-md);
}

.multilang-loading .spinner {
  width: 40px;
  height: 40px;
}

.multilang-loading-text {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.multilang-progress-bar {
  width: 200px;
  height: 6px;
  background: var(--surface-elevated);
  border-radius: 3px;
  overflow: hidden;
}

.multilang-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* Light Theme Overrides */
.theme-light .multilang-section {
  background: var(--surface-elevated);
}

.theme-light .multilang-results-panel {
  background: var(--surface);
}

.theme-light .multilang-targets {
  background: var(--surface);
}

.theme-light .ml-translation-html {
  background: var(--surface);
}

.theme-light .ml-lang-tab.active {
  background: var(--accent);
  color: white;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .multilang-targets {
    grid-template-columns: repeat(2, 1fr);
  }

  .multilang-export-actions {
    flex-direction: column;
  }

  .multilang-export-actions .btn {
    width: 100%;
  }
}


/* ============================================================
   A/B Test Generator Styles
   ============================================================ */

.ab-test-card {
  margin-top: var(--space-lg);
}

.ab-test-description {
  margin-bottom: var(--space-md);
  padding: var(--space-md);
  background: var(--glass);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.ab-test-description p {
  margin: 0;
  line-height: 1.5;
}

.ab-test-options {
  padding: var(--space-md);
  background: var(--glass);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.ab-elements-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

.ab-elements-checkboxes .checkbox-label {
  background: var(--surface);
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  transition: all var(--transition-fast);
}

.ab-elements-checkboxes .checkbox-label:hover {
  border-color: var(--accent);
}

.ab-elements-checkboxes .checkbox-label:has(input:checked) {
  background: rgba(108, 140, 255, 0.1);
  border-color: var(--accent);
}

.ab-test-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.ab-test-status {
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.ab-test-status.loading {
  background: rgba(56, 189, 248, 0.1);
  color: var(--info);
  border: 1px solid rgba(56, 189, 248, 0.2);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.ab-test-status.success {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid rgba(52, 211, 153, 0.2);
}

.ab-test-status.error {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid rgba(248, 113, 113, 0.2);
}

/* Variations Container */
.ab-variations-container {
  border-top: 1px solid var(--border);
  padding-top: var(--space-lg);
}

.ab-variations-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

.ab-variations-header h4 {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 600;
}

.ab-variations-actions {
  display: flex;
  gap: var(--space-sm);
}

/* Variations Grid */
.ab-variations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-md);
}

.ab-variation-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all var(--transition-base);
}

.ab-variation-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.ab-variation-card.original {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-glow);
}

.ab-variation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  background: var(--glass);
  border-bottom: 1px solid var(--border);
}

.ab-variation-name {
  font-weight: 600;
  font-size: var(--font-size-sm);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.ab-variation-name .badge {
  font-size: 10px;
  padding: 2px 6px;
  background: var(--accent);
  color: white;
  border-radius: 999px;
}

.ab-variation-actions {
  display: flex;
  gap: var(--space-xs);
}

.ab-variation-hypothesis {
  padding: var(--space-sm) var(--space-md);
  background: rgba(108, 140, 255, 0.06);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}

.ab-variation-hypothesis strong {
  color: var(--accent);
  font-weight: 600;
}

.ab-variation-preview {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.ab-variation-preview iframe {
  width: 100%;
  height: 400px;
  transform: scale(0.5);
  transform-origin: top left;
  border: none;
  background: white;
  pointer-events: none;
}

.ab-variation-preview-overlay {
  position: absolute;
  inset: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  opacity: 0;
  transition: all var(--transition-fast);
}

.ab-variation-preview:hover .ab-variation-preview-overlay {
  opacity: 1;
  background: rgba(0, 0, 0, 0.5);
}

.ab-variation-preview-overlay span {
  color: white;
  font-weight: 600;
  font-size: var(--font-size-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--accent);
  border-radius: var(--radius-sm);
}

.ab-variation-changes {
  padding: var(--space-md);
  max-height: 150px;
  overflow-y: auto;
}

.ab-variation-changes-title {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-xs);
}

.ab-change-item {
  padding: var(--space-xs) var(--space-sm);
  margin-bottom: var(--space-xs);
  background: var(--glass);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
  font-size: var(--font-size-xs);
}

.ab-change-item:last-child {
  margin-bottom: 0;
}

.ab-change-element {
  font-weight: 600;
  color: var(--accent);
  text-transform: capitalize;
  margin-bottom: 2px;
}

.ab-change-diff {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ab-change-original {
  color: var(--danger);
  text-decoration: line-through;
  opacity: 0.7;
}

.ab-change-modified {
  color: var(--success);
}

.ab-change-rationale {
  color: var(--text-muted);
  font-style: italic;
  margin-top: 4px;
}

/* Comparison View */
.ab-comparison-view {
  margin-top: var(--space-lg);
}

.ab-comparison-controls {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
  padding: var(--space-md);
  background: var(--glass);
  border-radius: var(--radius-sm);
}

.ab-comparison-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.ab-comparison-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.ab-comparison-panel-header {
  padding: var(--space-sm) var(--space-md);
  background: var(--glass);
  font-weight: 600;
  font-size: var(--font-size-sm);
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.ab-comparison-iframe {
  width: 100%;
  height: 400px;
  border: none;
  background: white;
}

/* Full Preview Modal */
.ab-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}

.ab-preview-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
}

.ab-preview-modal-content {
  position: relative;
  width: 100%;
  max-width: 1200px;
  max-height: 90vh;
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ab-preview-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border);
  background: var(--glass);
}

.ab-preview-modal-title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 600;
}

.ab-preview-modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 20px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.ab-preview-modal-close:hover {
  background: var(--glass-strong);
  color: var(--text-primary);
}

.ab-preview-modal-body {
  flex: 1;
  overflow: hidden;
}

.ab-preview-modal-body iframe {
  width: 100%;
  height: 100%;
  min-height: 500px;
  border: none;
  background: white;
}

.ab-preview-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--border);
  background: var(--glass);
}

/* Light Theme Overrides */
.theme-light .ab-test-options {
  background: var(--surface-elevated);
}

.theme-light .ab-test-description {
  background: var(--surface-elevated);
}

.theme-light .ab-elements-checkboxes .checkbox-label {
  background: var(--surface);
}

.theme-light .ab-elements-checkboxes .checkbox-label:has(input:checked) {
  background: rgba(79, 108, 229, 0.1);
}

.theme-light .ab-variation-hypothesis {
  background: rgba(79, 108, 229, 0.06);
}

.theme-light .ab-comparison-controls {
  background: var(--surface-elevated);
}

/* Responsive */
@media (max-width: 768px) {
  .ab-variations-grid {
    grid-template-columns: 1fr;
  }

  .ab-comparison-panels {
    grid-template-columns: 1fr;
  }

  .ab-comparison-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .ab-comparison-controls select {
    max-width: none;
  }
}

@media (max-width: 520px) {
  .ab-elements-checkboxes {
    flex-direction: column;
  }

  .ab-elements-checkboxes .checkbox-label {
    width: 100%;
    justify-content: flex-start;
  }

  .ab-variations-header {
    flex-direction: column;
    gap: var(--space-sm);
    align-items: flex-start;
  }

  .ab-variations-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* ============================================================
   WHITE LABEL / AGENCY MODE STYLES
   ============================================================ */

/* White Label Section Styling */
.wl-section {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border);
}

.wl-section:first-child {
  padding-top: 0;
}

.wl-section:last-child {
  border-bottom: none;
}

.wl-section-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.wl-section-title::before {
  content: '';
  width: 3px;
  height: 16px;
  background: var(--accent);
  border-radius: 2px;
}

/* Color Grid */
.wl-color-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

@media (max-width: 520px) {
  .wl-color-grid {
    grid-template-columns: 1fr;
  }
}

/* Color Input Wrapper */
.wl-color-input-wrap {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.wl-color-picker {
  width: 48px;
  height: 38px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 2px;
  background: var(--surface);
}

.wl-color-picker::-webkit-color-swatch-wrapper {
  padding: 0;
}

.wl-color-picker::-webkit-color-swatch {
  border: none;
  border-radius: 4px;
}

.wl-color-hex {
  flex: 1;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
}

/* Color Preview */
.wl-color-preview {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--glass);
  border-radius: var(--radius-sm);
  margin-top: var(--space-md);
}

.wl-preview-label {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.wl-preview-btn {
  pointer-events: none;
}

.wl-preview-secondary {
  background: var(--wl-secondary-color, #a78bfa);
  border-color: var(--wl-secondary-color, #a78bfa);
  color: white;
}

/* Toggle Label */
.wl-toggle-label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  font-size: var(--font-size-base);
  color: var(--text-primary);
}

.wl-toggle-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

/* Action Buttons Row */
.wl-action-buttons {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
}

.wl-action-buttons .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Status Message */
.wl-status-message {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  margin-top: var(--space-md);
}

.wl-status-message.success {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid rgba(52, 211, 153, 0.3);
}

.wl-status-message.error {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid rgba(248, 113, 113, 0.3);
}

.wl-status-message.info {
  background: rgba(56, 189, 248, 0.1);
  color: var(--info);
  border: 1px solid rgba(56, 189, 248, 0.3);
}

/* White Label Applied Indicator */
.wl-applied-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
  color: var(--success);
  background: var(--success-bg);
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: var(--space-sm);
}

/* Custom Logo in Header */
.brand-custom-logo {
  max-height: 40px;
  max-width: 180px;
  object-fit: contain;
}

/* White Label CSS Custom Properties - Applied to :root when active */
:root {
  --wl-primary-color: var(--accent);
  --wl-secondary-color: var(--accent-grad-mid);
}

/* When white label is active, override accent colors */
body.wl-active {
  --accent: var(--wl-primary-color);
  --accent-hover: color-mix(in srgb, var(--wl-primary-color) 85%, black);
  --accent-active: color-mix(in srgb, var(--wl-primary-color) 70%, black);
  --accent-glow: color-mix(in srgb, var(--wl-primary-color) 25%, transparent);
  --accent-grad-mid: var(--wl-secondary-color);
}

/* Light theme adjustments for white label */
.theme-light.wl-active {
  --accent-hover: color-mix(in srgb, var(--wl-primary-color) 85%, white);
  --accent-active: color-mix(in srgb, var(--wl-primary-color) 70%, white);
}

/* White Label Footer */
.wl-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--surface);
  border-top: 1px solid var(--border);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-align: center;
  z-index: 10;
}

.wl-footer.hidden {
  display: none;
}

/* Adjust main content when footer is visible */
body.wl-footer-visible .dashboard,
body.wl-footer-visible .tab-content {
  padding-bottom: 48px;
}

/* Settings icon in header */
.wl-settings-icon {
  font-size: 14px;
  margin-right: 4px;
}

/* Light theme overrides for White Label */
.theme-light .wl-color-picker {
  background: var(--surface);
  border-color: var(--border-strong);
}

.theme-light .wl-color-preview {
  background: var(--surface-elevated);
}

.theme-light .wl-section {
  border-color: var(--border);
}

@media (max-width: 520px) {
  .wl-action-buttons {
    flex-direction: column;
  }

  .wl-action-buttons .btn {
    width: 100%;
    justify-content: center;
  }

  .wl-color-preview {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }
}

/* ============================================================
   SOCIAL MEDIA GENERATOR STYLES
   ============================================================ */

.social-media-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-xl);
}

.social-media-layout {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: var(--space-xl);
  margin-top: var(--space-lg);
}

/* Input Panel */
.social-input-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Source Tabs */
.social-source-tabs {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
  padding: 4px;
  background: var(--glass);
  border-radius: var(--radius-sm);
}

.social-source-btn {
  flex: 1;
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.social-source-btn:hover {
  color: var(--text-primary);
  background: var(--glass-light);
}

.social-source-btn.active {
  background: var(--accent);
  color: white;
  box-shadow: var(--shadow-sm);
}

/* Editor Preview */
.social-editor-preview {
  padding: var(--space-lg);
  background: var(--glass);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  text-align: center;
}

.editor-preview-placeholder {
  color: var(--text-muted);
}

.editor-preview-placeholder .placeholder-icon {
  font-size: 32px;
  margin-bottom: var(--space-sm);
}

.editor-preview-placeholder p {
  margin: 0 0 var(--space-xs);
  font-size: var(--font-size-sm);
}

.editor-preview-placeholder small {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* Platform Checkboxes */
.social-platform-checkboxes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

.social-platform-checkboxes .checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.social-platform-checkboxes .checkbox-label:hover {
  background: var(--glass-light);
  border-color: var(--border-strong);
}

.social-platform-checkboxes .checkbox-label:has(input:checked) {
  background: rgba(108, 140, 255, 0.1);
  border-color: var(--accent);
}

/* Best Posting Times */
.posting-times-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.posting-time-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--glass);
  border-radius: var(--radius-sm);
}

.posting-time-item .platform-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.posting-time-item .time-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.posting-time-item .time-info strong {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.posting-time-item .time-info span {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* Results Panel */
.social-results-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Placeholder */
.social-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  background: var(--glass);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  text-align: center;
}

.social-placeholder .placeholder-content {
  padding: var(--space-2xl);
}

.social-placeholder .placeholder-icon {
  font-size: 64px;
  margin-bottom: var(--space-md);
  filter: grayscale(0.3);
}

.social-placeholder h3 {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-lg);
  color: var(--text-primary);
}

.social-placeholder p {
  margin: 0 0 var(--space-md);
  color: var(--text-muted);
}

.social-placeholder .placeholder-features {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
  display: inline-block;
}

.social-placeholder .placeholder-features li {
  padding: 6px 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

/* Social Post Cards */
.social-post-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.social-post-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.social-post-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border);
  background: var(--glass);
}

.platform-badge {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 6px 14px;
  border-radius: 20px;
  font-weight: 600;
  font-size: var(--font-size-sm);
}

.platform-badge.twitter {
  background: rgba(29, 161, 242, 0.15);
  color: #1DA1F2;
}

.platform-badge.linkedin {
  background: rgba(0, 119, 181, 0.15);
  color: #0077B5;
}

.platform-badge.facebook {
  background: rgba(24, 119, 242, 0.15);
  color: #1877F2;
}

.platform-badge.instagram {
  background: linear-gradient(135deg, rgba(131, 58, 180, 0.15), rgba(253, 29, 29, 0.15), rgba(252, 176, 69, 0.15));
  color: #C13584;
}

.post-actions {
  display: flex;
  gap: var(--space-xs);
}

/* Post Previews */
.social-post-preview {
  padding: var(--space-lg);
  background: var(--surface-elevated);
  min-height: 120px;
}

/* Twitter Preview */
.twitter-preview {
  display: flex;
  gap: var(--space-md);
}

.twitter-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1DA1F2 0%, #0c85d0 100%);
  flex-shrink: 0;
}

.twitter-content {
  flex: 1;
}

.twitter-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.twitter-name {
  font-weight: 700;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.twitter-handle {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.twitter-text {
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

.twitter-hashtags {
  margin-top: var(--space-sm);
  color: #1DA1F2;
  font-size: var(--font-size-sm);
}

/* LinkedIn Preview */
.linkedin-preview {
  display: flex;
  gap: var(--space-md);
}

.linkedin-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0077B5 0%, #005885 100%);
  flex-shrink: 0;
}

.linkedin-content {
  flex: 1;
}

.linkedin-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--space-sm);
}

.linkedin-name {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.linkedin-title {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.linkedin-text {
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Facebook Preview */
.facebook-preview {
  display: flex;
  gap: var(--space-md);
}

.facebook-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1877F2 0%, #0c5dc7 100%);
  flex-shrink: 0;
}

.facebook-content {
  flex: 1;
}

.facebook-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--space-sm);
}

.facebook-name {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.facebook-time {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.facebook-text {
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Instagram Preview */
.instagram-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.instagram-image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  background: linear-gradient(135deg, var(--glass) 0%, var(--glass-light) 100%);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
}

.instagram-image-placeholder span {
  font-size: 48px;
  margin-bottom: var(--space-xs);
}

.instagram-image-placeholder small {
  font-size: var(--font-size-xs);
}

.instagram-content {
  flex: 1;
}

.instagram-header {
  margin-bottom: var(--space-sm);
}

.instagram-username {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.instagram-text {
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

.instagram-hashtags {
  margin-top: var(--space-sm);
  color: #405DE6;
  font-size: var(--font-size-sm);
}

.instagram-emoji-suggestions {
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  background: var(--glass);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.instagram-emoji-suggestions::before {
  content: '✨ Suggested emojis: ';
  color: var(--text-muted);
}

/* Post Meta */
.social-post-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-lg);
  border-top: 1px solid var(--border);
  background: var(--glass);
}

.char-counter {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.char-status {
  font-size: var(--font-size-xs);
  padding: 2px 8px;
  border-radius: 4px;
}

.char-status.ok {
  background: var(--success-bg);
  color: var(--success);
}

.char-status.warning {
  background: rgba(251, 191, 36, 0.1);
  color: var(--warning);
}

.char-status.error {
  background: var(--danger-bg);
  color: var(--danger);
}

/* Hashtag Cloud */
.hashtag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.hashtag-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: var(--font-size-sm);
  color: var(--accent);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.hashtag-tag:hover {
  background: rgba(108, 140, 255, 0.15);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.hashtag-tag.copied {
  background: var(--success-bg);
  border-color: var(--success);
  color: var(--success);
}

/* Social Status */
.social-status {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.social-status.loading {
  background: rgba(56, 189, 248, 0.1);
  color: var(--info);
}

.social-status.success {
  background: var(--success-bg);
  color: var(--success);
}

.social-status.error {
  background: var(--danger-bg);
  color: var(--danger);
}

/* Light Theme Overrides */
.theme-light .social-placeholder {
  background: var(--surface-elevated);
}

.theme-light .social-post-preview {
  background: white;
}

.theme-light .social-source-btn.active {
  background: var(--accent);
  color: white;
}

/* Responsive */
@media (max-width: 1080px) {
  .social-media-layout {
    grid-template-columns: 1fr;
  }

  .social-input-panel {
    order: 1;
  }

  .social-results-panel {
    order: 2;
  }
}

@media (max-width: 600px) {
  .social-media-container {
    padding: var(--space-md);
  }

  .social-platform-checkboxes {
    grid-template-columns: 1fr;
  }

  .social-post-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .post-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .twitter-preview,
  .linkedin-preview,
  .facebook-preview {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .twitter-header,
  .linkedin-header,
  .facebook-header {
    justify-content: center;
  }
}

/* ============================================================
   Product Description Generator
   ============================================================ */
.product-desc-section {
  margin-top: var(--space-lg);
  border-top: 1px solid var(--border);
  padding-top: var(--space-lg);
}

.product-desc-section summary {
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.product-desc-section summary:hover {
  color: var(--accent);
}

.product-desc-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.product-desc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

@media (max-width: 600px) {
  .product-desc-row {
    grid-template-columns: 1fr;
  }
}

.product-desc-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

/* Product Description Results */
.product-results-container {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.product-result-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-fast);
}

.product-result-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.product-result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  background: var(--glass);
  border-bottom: 1px solid var(--border);
}

.product-result-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.product-result-title h4 {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 600;
}

.product-length-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--accent);
  color: white;
  font-size: var(--font-size-xs);
  font-weight: 600;
  border-radius: var(--radius-sm);
}

.product-length-badge.short {
  background: var(--success);
}

.product-length-badge.medium {
  background: var(--warning);
}

.product-length-badge.long {
  background: var(--accent);
}

.product-length-badge.meta {
  background: var(--info);
}

.product-result-actions {
  display: flex;
  gap: var(--space-xs);
}

.product-result-body {
  padding: var(--space-lg);
}

.product-result-text {
  font-size: var(--font-size-sm);
  line-height: 1.7;
  color: var(--text-primary);
  white-space: pre-wrap;
}

.product-result-text.meta {
  font-family: monospace;
  background: var(--glass);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
}

/* Bullet Points Card */
.product-bullets-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.product-bullets-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--glass);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.product-bullets-list li::before {
  content: '✓';
  color: var(--success);
  font-weight: bold;
  flex-shrink: 0;
}

/* FAQ Card */
.product-faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.product-faq-item {
  background: var(--glass);
  border-radius: var(--radius);
  padding: var(--space-md);
}

.product-faq-question {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.product-faq-question::before {
  content: 'Q:';
  color: var(--accent);
  font-weight: 700;
}

.product-faq-answer {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  padding-left: 24px;
}

.product-faq-answer::before {
  content: 'A: ';
  color: var(--success);
  font-weight: 600;
}

/* Product Status Messages */
.product-status {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  margin-top: var(--space-sm);
}

.product-status.loading {
  background: rgba(108, 140, 255, 0.1);
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.product-status.success {
  background: rgba(34, 197, 94, 0.1);
  color: var(--success);
}

.product-status.error {
  background: rgba(239, 68, 68, 0.1);
  color: var(--error);
}

/* Product Placeholder */
.product-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  background: var(--glass);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  text-align: center;
  margin-top: var(--space-lg);
}

.product-placeholder .placeholder-content {
  padding: var(--space-2xl);
}

.product-placeholder .placeholder-icon {
  font-size: 48px;
  margin-bottom: var(--space-md);
}

.product-placeholder h3 {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-lg);
  color: var(--text-primary);
}

.product-placeholder p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.product-placeholder .placeholder-features {
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0 0;
  text-align: left;
  display: inline-block;
}

.product-placeholder .placeholder-features li {
  padding: 4px 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

/* Copy Button Animation */
.product-copy-btn.copied {
  background: var(--success) !important;
  color: white !important;
}

/* Use This Button */
.product-use-btn {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
}

.product-use-btn:hover {
  background: var(--accent);
  color: white;
}

/* Light Theme */
.theme-light .product-result-card {
  background: white;
}

.theme-light .product-placeholder {
  background: var(--surface-elevated);
}

.theme-light .product-faq-item {
  background: var(--surface);
}

/* ============================================================
   Bulk Processing Feature
   ============================================================ */

/* Input Mode Tabs */
.bulk-input-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: var(--space-md);
  background: var(--glass);
  padding: 4px;
  border-radius: var(--radius-sm);
}

.bulk-tab-btn {
  flex: 1;
  padding: 8px 12px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.bulk-tab-btn:hover {
  color: var(--text-primary);
  background: var(--glass-light);
}

.bulk-tab-btn.active {
  color: var(--accent);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

/* Input Panels */
.bulk-input-panel {
  display: none;
}

.bulk-input-panel.active {
  display: block;
}

/* CSV Upload */
.bulk-csv-upload {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--glass);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.bulk-csv-upload:hover {
  border-color: var(--accent);
  background: var(--glass-light);
}

.bulk-csv-filename {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* CSV Preview */
.bulk-csv-preview {
  margin-top: var(--space-md);
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.bulk-csv-preview-header {
  display: flex;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-elevated);
  border-bottom: 1px solid var(--border);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.bulk-csv-preview-content {
  padding: var(--space-sm);
  max-height: 150px;
  overflow-y: auto;
}

.bulk-csv-row {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-sm);
  border-bottom: 1px solid var(--border);
}

.bulk-csv-row:last-child {
  border-bottom: none;
}

.csv-row-num {
  color: var(--text-muted);
  min-width: 24px;
}

.csv-row-url {
  flex: 1;
  color: var(--accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.csv-row-title {
  color: var(--text-secondary);
  font-style: italic;
}

.bulk-csv-more {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-align: center;
}

/* Bulk Actions */
.bulk-actions {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

/* Input Status */
.bulk-input-status {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.bulk-input-status.bulk-status-error {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid rgba(248, 113, 113, 0.3);
}

.bulk-input-status.bulk-status-success {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid rgba(52, 211, 153, 0.3);
}

/* Results Card Header */
.bulk-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.bulk-progress-text {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  font-weight: 500;
}

/* Progress Bar */
.bulk-progress-container {
  margin-bottom: var(--space-lg);
}

.bulk-progress-bar {
  height: 8px;
  background: var(--glass);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: var(--space-sm);
}

.bulk-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--success));
  border-radius: 4px;
  transition: width 0.3s ease;
}

.bulk-progress-stats {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.bulk-stat {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.bulk-stat-icon {
  font-size: 14px;
}

/* Filter Tabs */
.bulk-filter-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-sm);
}

.bulk-filter-btn {
  padding: 6px 12px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: var(--font-size-sm);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.bulk-filter-btn:hover {
  color: var(--text-primary);
  background: var(--glass);
}

.bulk-filter-btn.active {
  color: var(--accent);
  background: rgba(108, 140, 255, 0.12);
}

/* Results Table */
.bulk-results-table-container {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.bulk-results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.bulk-results-table th {
  position: sticky;
  top: 0;
  background: var(--surface-elevated);
  z-index: 1;
}

.bulk-item-url {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bulk-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 14px;
}

.bulk-actions-cell {
  display: flex;
  gap: 4px;
  align-items: center;
}

.bulk-actions-cell .btn {
  padding: 4px 8px;
  font-size: var(--font-size-xs);
}

.bulk-error-text {
  cursor: help;
}

/* Row Status Colors */
.bulk-results-table tr.bulk-status-processing {
  background: rgba(56, 189, 248, 0.08);
}

.bulk-results-table tr.bulk-status-success {
  background: rgba(52, 211, 153, 0.06);
}

.bulk-results-table tr.bulk-status-error {
  background: rgba(248, 113, 113, 0.06);
}

/* Spinner Small */
.spinner-sm {
  width: 16px;
  height: 16px;
  border: 2px solid var(--glass-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Empty State */
.bulk-results-empty {
  text-align: center;
  padding: var(--space-2xl);
  color: var(--text-muted);
}

.bulk-results-empty .empty-icon {
  font-size: 48px;
  margin-bottom: var(--space-md);
  opacity: 0.5;
}

/* Export Actions */
.bulk-export-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

/* Preview Modal */
.bulk-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}

.bulk-preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
}

.bulk-preview-content {
  position: relative;
  width: 100%;
  max-width: 900px;
  max-height: calc(100vh - 48px);
  background: var(--surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.bulk-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border);
  background: var(--glass);
}

.bulk-preview-header h3 {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  margin-right: var(--space-md);
}

.bulk-preview-body {
  flex: 1;
  min-height: 400px;
  overflow: hidden;
}

.bulk-preview-body iframe {
  width: 100%;
  height: 100%;
  min-height: 400px;
  border: none;
  background: white;
}

.bulk-preview-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--border);
  background: var(--glass);
}

/* Light Theme Overrides */
.theme-light .bulk-tab-btn.active {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.theme-light .bulk-csv-upload {
  background: var(--surface-elevated);
}

.theme-light .bulk-csv-upload:hover {
  background: var(--surface);
}

.theme-light .bulk-csv-preview {
  background: var(--surface-elevated);
}

.theme-light .bulk-filter-btn.active {
  background: rgba(79, 108, 229, 0.1);
}

.theme-light .bulk-results-table tr.bulk-status-processing {
  background: rgba(2, 132, 199, 0.06);
}

.theme-light .bulk-results-table tr.bulk-status-success {
  background: rgba(5, 150, 105, 0.06);
}

.theme-light .bulk-results-table tr.bulk-status-error {
  background: rgba(220, 38, 38, 0.06);
}

/* Responsive */
@media (max-width: 768px) {
  .bulk-input-tabs {
    flex-wrap: wrap;
  }

  .bulk-tab-btn {
    flex: 1 1 auto;
    min-width: 80px;
  }

  .bulk-progress-stats {
    gap: var(--space-md);
  }

  .bulk-export-actions {
    justify-content: stretch;
  }

  .bulk-export-actions .btn {
    flex: 1;
    text-align: center;
  }

  .bulk-preview-content {
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
  }
}

@media (max-width: 520px) {
  .bulk-filter-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .bulk-filter-btn {
    white-space: nowrap;
  }

  .bulk-results-table-container {
    max-height: 300px;
  }

  .bulk-item-url {
    max-width: 150px;
  }
}

/* ============================================================
   API Documentation & Key Management Styles
   ============================================================ */

/* API Tab Container */
.api-docs-container {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: var(--space-xl);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-xl);
}

@media (max-width: 1080px) {
  .api-docs-container {
    grid-template-columns: 1fr;
  }
  .api-keys-panel {
    max-height: none;
    position: static;
  }
}

/* API Keys Panel */
.api-keys-panel {
  position: sticky;
  top: 72px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

.api-keys-stats {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-md);
  background: var(--glass);
  border-radius: var(--radius);
  margin-bottom: var(--space-lg);
}

.api-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.api-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--accent);
}

.api-stat-label {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* Create Key Section */
.api-key-create-section {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border);
}

.api-key-create-row {
  display: flex;
  gap: var(--space-sm);
}

.api-key-create-row .field {
  flex: 1;
}

/* New Key Display */
.api-new-key-display {
  background: var(--success-bg);
  border: 1px solid rgba(52, 211, 153, 0.3);
  border-radius: var(--radius);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}

.api-new-key-alert {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  font-weight: 600;
  color: var(--success);
}

.api-new-key-value {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--surface);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
}

.api-new-key-value code {
  flex: 1;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  word-break: break-all;
}

/* Keys List */
.api-keys-list-section {
  margin-top: var(--space-md);
}

.api-keys-list-header {
  margin-bottom: var(--space-sm);
}

.api-keys-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.api-keys-empty {
  text-align: center;
  padding: var(--space-xl);
  color: var(--text-muted);
}

.api-keys-empty .empty-icon {
  font-size: 32px;
  margin-bottom: var(--space-sm);
  display: block;
}

/* Key Item */
.api-key-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--space-md);
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all var(--transition-fast);
}

.api-key-item:hover {
  border-color: var(--border-strong);
  background: var(--glass-light);
}

.api-key-info {
  flex: 1;
  min-width: 0;
}

.api-key-name {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.api-key-prefix {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-bottom: 6px;
}

.api-key-meta {
  display: flex;
  gap: var(--space-md);
  font-size: var(--font-size-xs);
}

.api-key-status {
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 500;
}

.api-key-status.active {
  background: var(--success-bg);
  color: var(--success);
}

.api-key-status.inactive {
  background: var(--danger-bg);
  color: var(--danger);
}

.api-key-used {
  color: var(--text-muted);
}

.api-key-actions {
  display: flex;
  gap: 4px;
}

/* API Documentation Panel */
.api-docs-panel {
  overflow-y: auto;
}

.api-docs-card {
  margin-bottom: var(--space-lg);
}

.api-docs-card:last-child {
  margin-bottom: 0;
}

/* Quick Start List */
.api-quick-start-list {
  margin: 0;
  padding-left: 20px;
}

.api-quick-start-list li {
  margin-bottom: var(--space-sm);
  color: var(--text-secondary);
}

.api-quick-start-list code {
  background: var(--glass);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: var(--font-size-sm);
}

/* Code Examples */
.api-code-example {
  font-size: var(--font-size-sm);
  margin: var(--space-md) 0;
}

.api-auth-methods {
  margin: var(--space-md) 0 0;
  padding-left: 20px;
}

.api-auth-methods li {
  margin-bottom: var(--space-xs);
  color: var(--text-secondary);
}

.api-auth-methods code {
  background: var(--glass);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: var(--font-size-xs);
}

/* Schema Types List */
.api-schema-types {
  margin: var(--space-md) 0;
  padding-left: 20px;
  columns: 2;
  column-gap: var(--space-xl);
}

.api-schema-types li {
  margin-bottom: var(--space-xs);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  break-inside: avoid;
}

.api-schema-types code {
  background: var(--primary);
  color: var(--text-primary);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: var(--font-size-xs);
  font-weight: 500;
}

/* Rate Limiting */
.api-rate-limits {
  display: flex;
  gap: var(--space-xl);
  margin-bottom: var(--space-md);
}

.rate-limit-item {
  text-align: center;
}

.rate-limit-item .rate-value {
  display: block;
  font-size: 36px;
  font-weight: 700;
  color: var(--accent);
}

.rate-limit-item .rate-label {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.api-rate-headers {
  margin: var(--space-sm) 0 0;
  padding-left: 20px;
}

.api-rate-headers li {
  margin-bottom: var(--space-xs);
  color: var(--text-secondary);
}

.api-rate-headers code {
  background: var(--glass);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: var(--font-size-xs);
}

/* Base URL */
.api-base-url {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--glass);
  border-radius: var(--radius);
  margin-bottom: var(--space-lg);
}

.api-base-url code {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  color: var(--accent);
}

/* Endpoints */
.api-endpoint {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: var(--space-md);
  overflow: hidden;
}

.api-endpoint:last-child {
  margin-bottom: 0;
}

.api-endpoint-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--glass);
  border-bottom: 1px solid var(--border);
}

.api-method {
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
}

.api-method.get {
  background: rgba(52, 211, 153, 0.15);
  color: var(--success);
}

.api-method.post {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.api-method.patch {
  background: rgba(251, 191, 36, 0.15);
  color: var(--warning);
}

.api-method.delete {
  background: rgba(248, 113, 113, 0.15);
  color: var(--danger);
}

.api-path {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.api-endpoint-desc {
  padding: var(--space-sm) var(--space-md);
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.api-endpoint-details {
  border-top: 1px solid var(--border);
}

.api-endpoint-details summary {
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--accent);
  user-select: none;
}

.api-endpoint-details summary:hover {
  background: var(--glass);
}

.api-details-content {
  padding: var(--space-md);
  border-top: 1px solid var(--border);
}

.api-details-content h5 {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.api-details-content h5:not(:first-child) {
  margin-top: var(--space-lg);
}

/* Params Table */
.api-params-table {
  width: 100%;
  font-size: var(--font-size-sm);
  border-collapse: collapse;
}

.api-params-table th {
  text-align: left;
  padding: var(--space-sm);
  background: var(--glass);
  font-weight: 600;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  color: var(--text-muted);
}

.api-params-table td {
  padding: var(--space-sm);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.api-params-table code {
  background: var(--glass);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: var(--font-size-xs);
}

.api-note {
  margin-top: var(--space-sm);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  font-style: italic;
}

/* Try It Section */
.api-try-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.api-try-response {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--glass);
  border-radius: var(--radius);
}

.api-response-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}

.api-response-status {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.api-response-status.success {
  background: var(--success-bg);
  color: var(--success);
}

.api-response-status.error {
  background: var(--danger-bg);
  color: var(--danger);
}

/* Code Tabs */
.api-code-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: var(--space-md);
  padding: 4px;
  background: var(--glass);
  border-radius: var(--radius);
}

.api-code-tab {
  padding: 8px 16px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.api-code-tab:hover {
  color: var(--text-primary);
  background: var(--glass-light);
}

.api-code-tab.active {
  background: var(--accent);
  color: white;
  font-weight: 500;
}

.api-code-content {
  display: none;
}

.api-code-content.active {
  display: block;
}

/* Error Codes Table */
.api-errors-table {
  font-size: var(--font-size-sm);
}

.api-errors-table code {
  background: var(--glass);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: var(--font-size-xs);
  color: var(--danger);
}

/* Light Theme Overrides */
.theme-light .api-new-key-display {
  background: var(--success-bg);
  border-color: rgba(5, 150, 105, 0.2);
}

.theme-light .api-key-item {
  background: var(--surface);
}

.theme-light .api-method.get {
  background: rgba(5, 150, 105, 0.1);
}

.theme-light .api-method.post {
  background: rgba(59, 130, 246, 0.1);
}

.theme-light .api-endpoint-details summary:hover {
  background: var(--surface-elevated);
}

/* ============================================================
   SERP Preview Component
   ============================================================ */

/* Card toggle buttons */
.serp-preview-toggle {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--glass);
  border-radius: var(--radius-sm);
}

.serp-device-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: calc(var(--radius-sm) - 2px);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.serp-device-btn:hover {
  color: var(--text-primary);
  background: var(--glass-light);
}

.serp-device-btn.active {
  color: var(--accent);
  background: var(--surface-elevated);
}

/* Preview Container */
.serp-preview-container {
  display: flex;
  justify-content: center;
  padding: var(--space-lg);
  background: #fff;
  border-radius: var(--radius);
  margin-bottom: var(--space-lg);
}

.serp-preview-frame {
  font-family: Arial, sans-serif;
  background: #fff;
  transition: width var(--transition-base);
}

.serp-preview-frame.serp-desktop {
  width: 600px;
  max-width: 100%;
}

.serp-preview-frame.serp-mobile {
  width: 360px;
  max-width: 100%;
}

/* Google-style SERP Result */
.serp-result {
  padding: 0;
}

.serp-result-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.serp-favicon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f1f3f4;
  color: #5f6368;
  flex-shrink: 0;
}

.serp-url-container {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.serp-site-name {
  font-size: 14px;
  color: #202124;
  font-weight: 400;
  line-height: 1.3;
}

.serp-breadcrumb {
  font-size: 12px;
  color: #4d5156;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.serp-title {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  color: #1a0dab;
  margin: 0 0 4px 0;
  cursor: pointer;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.serp-title:hover {
  text-decoration: underline;
}

.serp-description {
  font-size: 14px;
  line-height: 1.58;
  color: #4d5156;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Mobile adjustments */
.serp-preview-frame.serp-mobile .serp-title {
  font-size: 18px;
}

.serp-preview-frame.serp-mobile .serp-description {
  font-size: 13px;
}

.serp-preview-frame.serp-mobile .serp-site-name {
  font-size: 13px;
}

.serp-preview-frame.serp-mobile .serp-breadcrumb {
  font-size: 11px;
}

/* Meta Section */
.serp-meta-section {
  margin-bottom: var(--space-lg);
}

.serp-meta-section h4 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-md);
}

/* Counters */
.serp-counters {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.serp-counter-item {
  position: relative;
  padding: var(--space-md);
  background: var(--glass);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.serp-counter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}

.serp-counter-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-primary);
}

.serp-counter-value {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}

.serp-counter-value .counter-current {
  font-weight: 600;
  color: var(--text-primary);
}

/* Counter Bar */
.serp-counter-bar {
  height: 6px;
  background: var(--surface-elevated);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: var(--space-sm);
}

.serp-counter-fill {
  height: 100%;
  border-radius: 3px;
  transition: width var(--transition-fast), background var(--transition-fast);
  background: var(--success);
}

.serp-counter-fill.warning {
  background: var(--warning);
}

.serp-counter-fill.danger {
  background: var(--danger);
}

/* Counter Status */
.serp-counter-status {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  min-height: 16px;
}

.serp-counter-status.warning {
  color: var(--warning);
}

.serp-counter-status.danger {
  color: var(--danger);
}

.serp-counter-status.success {
  color: var(--success);
}

/* Edit Button */
.serp-edit-btn {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.serp-edit-btn:hover {
  background: var(--surface-elevated);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.serp-edit-btn .edit-icon {
  font-size: 12px;
}

/* URL Display */
.serp-url-display {
  padding-bottom: var(--space-sm);
}

.serp-url-value {
  font-size: var(--font-size-sm);
  color: #006621;
  font-family: 'JetBrains Mono', monospace;
  word-break: break-all;
}

/* Warnings */
.serp-warnings {
  padding: var(--space-md);
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-lg);
}

.serp-warnings h4 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--warning);
  margin: 0 0 var(--space-sm);
}

.serp-warnings-list {
  margin: 0;
  padding-left: var(--space-lg);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.serp-warnings-list li {
  margin-bottom: 4px;
}

.serp-warnings-list li:last-child {
  margin-bottom: 0;
}

/* Manual Override Section */
.serp-manual-override {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0;
}

.serp-manual-override summary {
  padding: var(--space-md);
  cursor: pointer;
  user-select: none;
  margin: 0;
}

.serp-manual-override summary:hover {
  background: var(--glass);
}

.serp-manual-override[open] summary {
  border-bottom: 1px solid var(--border);
}

.serp-manual-fields {
  padding: var(--space-md);
}

.serp-manual-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* Truncation indicator */
.serp-truncated {
  position: relative;
}

.serp-truncated::after {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
  background: #fff;
  padding-left: 2px;
}

/* Responsive */
@media (max-width: 700px) {
  .serp-preview-frame.serp-desktop {
    width: 100%;
  }

  .serp-preview-frame.serp-mobile {
    width: 100%;
  }
}

/* Light theme adjustments */
.theme-light .serp-preview-container {
  background: #fff;
  border: 1px solid var(--border);
}

/* Character counter badge colors */
.serp-counter-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.serp-counter-badge.optimal {
  background: var(--success-bg);
  color: var(--success);
}

.serp-counter-badge.warning {
  background: rgba(251, 191, 36, 0.15);
  color: var(--warning);
}

.serp-counter-badge.danger {
  background: var(--danger-bg);
  color: var(--danger);
}

/* ============================================================
   BLOG WRITER - Full Article Generation
   ============================================================ */

/* Blog Writer Layout - Two Column */
#blog-writer-tab.active {
  display: flex !important;
  flex-direction: row;
  gap: var(--space-xl);
  align-items: flex-start;
}

#blog-writer-tab .panel-left {
  flex: 0 0 420px;
  max-width: 420px;
  position: sticky;
  top: 80px;
}

#blog-writer-tab .panel-right {
  flex: 1;
  min-width: 0;
  max-width: 100%;
}

/* Mobile: Stack vertically */
@media (max-width: 1024px) {
  #blog-writer-tab.active {
    flex-direction: column;
  }

  #blog-writer-tab .panel-left {
    flex: none;
    width: 100%;
    max-width: 100%;
    position: static;
  }

  #blog-writer-tab .panel-right {
    width: 100%;
  }
}

/* Outline Section */
.blog-writer-outline-section,
.blog-writer-linking-section {
  margin-top: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.blog-writer-outline-section summary,
.blog-writer-linking-section summary {
  padding: var(--space-sm) var(--space-md);
  background: var(--glass);
  cursor: pointer;
  user-select: none;
}

.blog-writer-outline-section summary:hover,
.blog-writer-linking-section summary:hover {
  background: var(--glass-light);
}

.blog-outline-fields,
.blog-linking-fields {
  padding: var(--space-md);
}

.outline-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

/* Progress Indicator */
.blog-writer-progress {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  background: var(--glass);
  border-radius: var(--radius);
}

.progress-steps {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  opacity: 0.4;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.progress-step.active {
  opacity: 1;
  transform: scale(1.1);
}

.progress-step.completed {
  opacity: 0.7;
}

.progress-step.completed .step-icon {
  color: var(--success);
}

.step-icon {
  font-size: 24px;
}

.step-label {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  font-weight: 500;
}

.progress-bar {
  height: 6px;
  background: var(--glass-strong);
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-grad-start), var(--accent-grad-mid), var(--accent-grad-end));
  border-radius: 3px;
  transition: width 0.5s ease-out;
  width: 0;
}

.progress-status {
  margin-top: var(--space-sm);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* Result Card */
#blogWriterResultCard .card-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

#blogWriterResultCard .card-header h3 {
  margin: 0;
  font-size: var(--font-size-lg);
}

.blog-result-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--glass);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.stat-badge .stat-icon {
  font-size: 14px;
}

.stat-badge.seo-badge {
  font-weight: 600;
}

.stat-badge.seo-badge.score-high {
  background: var(--success-bg);
  color: var(--success);
}

.stat-badge.seo-badge.score-medium {
  background: rgba(251, 191, 36, 0.15);
  color: var(--warning);
}

.stat-badge.seo-badge.score-low {
  background: var(--danger-bg);
  color: var(--danger);
}

/* Meta Section */
.blog-meta-section {
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
}

.blog-meta-display {
  padding: var(--space-sm) var(--space-md);
  background: var(--glass);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-style: italic;
}

/* SEO Details */
.blog-seo-details {
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  background: var(--glass);
  border-radius: var(--radius);
}

.seo-detail-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

.seo-detail-row:last-child {
  margin-bottom: 0;
}

.seo-label {
  flex: 0 0 120px;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.seo-bar {
  flex: 1;
  height: 8px;
  background: var(--glass-strong);
  border-radius: 4px;
  overflow: hidden;
}

.seo-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width var(--transition-base);
}

.seo-bar-fill.high {
  background: var(--success);
}

.seo-bar-fill.medium {
  background: var(--warning);
}

.seo-bar-fill.low {
  background: var(--danger);
}

.seo-value {
  flex: 0 0 50px;
  text-align: right;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.seo-suggestions {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

.seo-suggestions h4 {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.seo-suggestions ul {
  margin: 0;
  padding-left: var(--space-lg);
}

.seo-suggestions li {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}

/* Preview Tabs */
.blog-preview-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: var(--space-md);
  background: var(--glass);
  border-radius: var(--radius);
  padding: 4px;
}

.blog-preview-tab {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  border: none;
  border-radius: calc(var(--radius) - 2px);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.blog-preview-tab:hover {
  color: var(--text-primary);
  background: var(--glass-light);
}

.blog-preview-tab.active {
  background: var(--surface-elevated);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}

/* Preview Container */
.blog-preview-container {
  position: relative;
  min-height: 400px;
  max-height: 600px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.blog-preview-pane {
  display: none;
  padding: var(--space-md);
}

.blog-preview-pane.active {
  display: block;
}

/* Article Preview Styling */
.blog-article-preview {
  font-size: var(--font-size-base);
  line-height: 1.7;
  color: var(--text-primary);
}

.blog-article-preview h1 {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 var(--space-lg);
  color: var(--text-primary);
}

.blog-article-preview h2 {
  font-size: 22px;
  font-weight: 600;
  margin: var(--space-xl) 0 var(--space-md);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-sm);
}

.blog-article-preview h3 {
  font-size: 18px;
  font-weight: 600;
  margin: var(--space-lg) 0 var(--space-sm);
  color: var(--text-primary);
}

.blog-article-preview p {
  margin: 0 0 var(--space-md);
}

.blog-article-preview ul,
.blog-article-preview ol {
  margin: 0 0 var(--space-md);
  padding-left: var(--space-lg);
}

.blog-article-preview li {
  margin-bottom: var(--space-xs);
}

.blog-article-preview strong {
  font-weight: 600;
  color: var(--text-primary);
}

.blog-article-preview em {
  font-style: italic;
}

.blog-article-preview a {
  color: var(--accent);
  text-decoration: underline;
}

/* Internal Links Section */
.blog-internal-links {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
}

.blog-internal-links h4 {
  margin: 0 0 var(--space-md);
  font-size: var(--font-size-md);
  color: var(--text-primary);
}

.internal-links-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.internal-link-item {
  padding: var(--space-sm) var(--space-md);
  background: var(--glass);
  border-radius: var(--radius-sm);
}

.link-anchor {
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 4px;
}

.link-target {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  word-break: break-all;
}

.link-context {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin-top: 4px;
  font-style: italic;
}

/* Action Buttons */
.blog-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* Empty State */
#blogWriterEmpty {
  padding: var(--space-2xl);
  text-align: center;
}

#blogWriterEmpty .empty-icon {
  font-size: 64px;
  margin-bottom: var(--space-md);
}

#blogWriterEmpty h3 {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-lg);
  color: var(--text-primary);
}

#blogWriterEmpty p {
  margin: 0 0 var(--space-lg);
  color: var(--text-secondary);
}

.empty-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  max-width: 400px;
  margin: 0 auto;
}

.empty-feature {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--glass);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.empty-feature .feature-icon {
  font-size: 18px;
}

/* Stored Pages Mini Count */
.stored-pages-mini {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--success-bg);
  border-radius: var(--radius-sm);
  margin-top: var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--success);
}

/* Sitemap Status */
.sitemap-fetch-status {
  padding: var(--space-xs) var(--space-sm);
  margin-top: var(--space-xs);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
}

.sitemap-fetch-status.success {
  background: var(--success-bg);
  color: var(--success);
}

.sitemap-fetch-status.error {
  background: var(--danger-bg);
  color: var(--danger);
}

/* Generate Button Large */
.btn.btn-lg {
  padding: var(--space-md) var(--space-xl);
  font-size: var(--font-size-md);
}

.btn .btn-icon {
  margin-right: var(--space-xs);
}

/* Status Message */
.status-message {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.status-message.status-error {
  background: var(--danger-bg);
  color: var(--danger);
}

.status-message.status-success {
  background: var(--success-bg);
  color: var(--success);
}

.status-message.status-info {
  background: rgba(56, 189, 248, 0.1);
  color: var(--info);
}

/* Light Theme Adjustments */
.theme-light .blog-article-preview {
  color: #1a1a1a;
}

.theme-light .blog-article-preview h1,
.theme-light .blog-article-preview h2,
.theme-light .blog-article-preview h3 {
  color: #1a1a1a;
}

.theme-light .blog-preview-container {
  background: #fff;
}

/* Responsive */
@media (max-width: 900px) {
  #blog-writer-tab .panel-left {
    flex: none;
    width: 100%;
  }

  .empty-features {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   SOCIAL MEDIA ADVANCED FEATURES
   ============================================================ */

/* Advanced Section Container */
.social-advanced-section {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 2px solid var(--border);
}

.social-advanced-section .section-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: var(--space-lg);
  color: var(--text);
}

/* Advanced Tabs */
.social-advanced-tabs {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-md);
}

.social-adv-tab-btn {
  padding: 10px 16px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 500;
  color: var(--text-muted);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.social-adv-tab-btn:hover {
  background: var(--surface);
  color: var(--text);
  border-color: var(--accent);
}

.social-adv-tab-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Advanced Panels */
.social-adv-panel {
  display: none;
}

.social-adv-panel.active {
  display: block;
}

/* Thread Generator Styles */
.thread-gen-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

@media (max-width: 1024px) {
  .thread-gen-layout {
    grid-template-columns: 1fr;
  }
}

.thread-input-section,
.thread-results-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.thread-placeholder,
.spy-placeholder,
.engagement-placeholder {
  background: var(--bg-alt);
  border-radius: var(--radius);
  padding: var(--space-xl);
  text-align: center;
  border: 2px dashed var(--border);
}

.thread-placeholder .placeholder-icon,
.spy-placeholder .placeholder-icon,
.engagement-placeholder .placeholder-icon {
  font-size: 3rem;
  margin-bottom: var(--space-md);
}

.thread-placeholder h3,
.spy-placeholder h3,
.engagement-placeholder h3 {
  margin-bottom: var(--space-sm);
  color: var(--text);
}

.thread-placeholder p,
.spy-placeholder p,
.engagement-placeholder p {
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}

.thread-placeholder .placeholder-features,
.spy-placeholder .placeholder-features,
.engagement-placeholder .placeholder-features {
  list-style: none;
  padding: 0;
  text-align: left;
  max-width: 300px;
  margin: 0 auto;
}

.thread-placeholder .placeholder-features li,
.spy-placeholder .placeholder-features li,
.engagement-placeholder .placeholder-features li {
  padding: var(--space-xs) 0;
  color: var(--text-muted);
}

/* Thread Results */
.thread-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

.thread-header h4 {
  font-size: 1.1rem;
  font-weight: 600;
}

.thread-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.thread-count {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.thread-tweets-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-height: 600px;
  overflow-y: auto;
  padding-right: var(--space-sm);
}

.thread-tweet-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-md);
  position: relative;
}

.thread-tweet-card:hover {
  border-color: var(--accent);
}

.tweet-number {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  background: var(--accent);
  color: #fff;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
}

.tweet-content {
  margin-left: 32px;
  white-space: pre-wrap;
  line-height: 1.5;
}

.tweet-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-sm);
  margin-left: 32px;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
}

.tweet-char-count {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.tweet-char-count.warning {
  color: var(--warning);
}

.tweet-char-count.error {
  color: var(--error);
}

.tweet-type-badge {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-alt);
  color: var(--text-muted);
  text-transform: uppercase;
}

.tweet-type-badge.hook {
  background: var(--accent);
  color: #fff;
}

.tweet-type-badge.cta {
  background: var(--success);
  color: #fff;
}

.tweet-actions {
  display: flex;
  gap: var(--space-xs);
}

.thread-hashtags {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-alt);
  border-radius: var(--radius);
}

.thread-hashtags .field-label {
  margin-bottom: var(--space-sm);
}

/* Competitor Spy Styles */
.competitor-spy-layout {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--space-lg);
}

@media (max-width: 1024px) {
  .competitor-spy-layout {
    grid-template-columns: 1fr;
  }
}

.spy-input-section,
.spy-results-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Spy Results Cards */
.spy-competitor-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.spy-competitor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
}

.spy-competitor-name {
  font-weight: 600;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.spy-platform-badge {
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--bg-alt);
  color: var(--text-muted);
}

.spy-section {
  margin-bottom: var(--space-md);
}

.spy-section h5 {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.spy-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-sm);
}

.spy-metric-item {
  background: var(--bg-alt);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  text-align: center;
}

.spy-metric-value {
  font-weight: 600;
  color: var(--accent);
  font-size: 1.1rem;
}

.spy-metric-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.spy-content-types {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.spy-content-type {
  padding: 4px 10px;
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 4px;
}

.spy-content-type .percentage {
  color: var(--accent);
  font-weight: 600;
}

.spy-strengths-list,
.spy-weaknesses-list,
.spy-opportunities-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.spy-strengths-list li,
.spy-weaknesses-list li,
.spy-opportunities-list li {
  padding: var(--space-xs) 0;
  padding-left: 20px;
  position: relative;
  font-size: 0.9rem;
}

.spy-strengths-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--success);
}

.spy-weaknesses-list li::before {
  content: "✗";
  position: absolute;
  left: 0;
  color: var(--error);
}

.spy-opportunities-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
}

/* Recommendations Card */
.spy-recommendations-card {
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--space-md);
  margin-top: var(--space-md);
}

.spy-recommendations-card h4 {
  color: var(--accent);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.recommendation-item {
  padding: var(--space-md);
  background: var(--bg-alt);
  border-radius: var(--radius);
  margin-bottom: var(--space-sm);
  border-left: 3px solid var(--accent);
}

.recommendation-item.high-priority {
  border-left-color: var(--error);
}

.recommendation-item.medium-priority {
  border-left-color: var(--warning);
}

.recommendation-priority {
  font-size: 0.7rem;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.recommendation-item.high-priority .recommendation-priority {
  color: var(--error);
}

.recommendation-item.medium-priority .recommendation-priority {
  color: var(--warning);
}

.recommendation-action {
  font-weight: 500;
  margin-bottom: var(--space-xs);
}

.recommendation-reasoning {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Engagement Analyzer Styles */
.engagement-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

@media (max-width: 1024px) {
  .engagement-layout {
    grid-template-columns: 1fr;
  }
}

.engagement-input-section,
.engagement-results-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Post Metrics Input */
.engagement-posts-section {
  margin-top: var(--space-md);
}

.posts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}

.post-metrics-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-height: 400px;
  overflow-y: auto;
}

.post-metric-row {
  display: grid;
  grid-template-columns: 1fr repeat(4, 80px) 30px;
  gap: var(--space-xs);
  align-items: center;
  padding: var(--space-sm);
  background: var(--bg-alt);
  border-radius: var(--radius);
}

.post-metric-row .field {
  padding: 6px 8px;
  font-size: 0.85rem;
}

.post-metric-row .post-date {
  font-size: 0.8rem;
  width: 100%;
}

.post-metric-row .remove-post-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.2rem;
  padding: 0;
  transition: color 0.2s;
}

.post-metric-row .remove-post-btn:hover {
  color: var(--error);
}

.post-metrics-header {
  display: grid;
  grid-template-columns: 1fr repeat(4, 80px) 30px;
  gap: var(--space-xs);
  padding: 0 var(--space-sm);
  margin-bottom: var(--space-xs);
}

.post-metrics-header span {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
}

/* Engagement Results */
.engagement-summary-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.engagement-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--space-md);
  text-align: center;
}

.engagement-summary-item {
  padding: var(--space-sm);
}

.engagement-summary-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
}

.engagement-summary-value.above {
  color: var(--success);
}

.engagement-summary-value.below {
  color: var(--warning);
}

.engagement-summary-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

.engagement-benchmark-bar {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-alt);
  border-radius: var(--radius);
}

.benchmark-bar-track {
  height: 20px;
  background: linear-gradient(to right, var(--error), var(--warning), var(--success));
  border-radius: 10px;
  position: relative;
  margin: var(--space-sm) 0;
}

.benchmark-bar-marker {
  position: absolute;
  width: 4px;
  height: 30px;
  background: var(--text);
  top: -5px;
  border-radius: 2px;
  transition: left 0.3s ease;
}

.benchmark-bar-marker::after {
  content: attr(data-value);
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.benchmark-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.engagement-posts-breakdown {
  margin-top: var(--space-md);
}

.engagement-posts-breakdown h5 {
  margin-bottom: var(--space-sm);
  font-size: 0.9rem;
}

.post-breakdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm);
  background: var(--bg-alt);
  border-radius: var(--radius);
  margin-bottom: var(--space-xs);
}

.post-breakdown-content {
  flex: 1;
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.post-breakdown-rate {
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.85rem;
}

.post-breakdown-rate.excellent {
  background: var(--success);
  color: #fff;
}

.post-breakdown-rate.good {
  background: var(--accent);
  color: #fff;
}

.post-breakdown-rate.average {
  background: var(--warning);
  color: #000;
}

.post-breakdown-rate.below_average {
  background: var(--error);
  color: #fff;
}

.engagement-insights-list {
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0;
}

.engagement-insights-list li {
  padding: var(--space-sm);
  background: var(--bg-alt);
  border-radius: var(--radius);
  margin-bottom: var(--space-xs);
  font-size: 0.9rem;
}

/* Engagement History Chart */
.engagement-history-chart {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.engagement-history-chart .empty-state-small {
  text-align: center;
  color: var(--text-muted);
  padding: var(--space-lg);
}

/* UGC Templates Styles */
.ugc-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.ugc-categories {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.ugc-cat-btn {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 8px 16px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s;
}

.ugc-cat-btn:hover {
  background: var(--surface);
  border-color: var(--accent);
}

.ugc-cat-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.ugc-cat-btn .cat-icon {
  font-size: 1.1rem;
}

.ugc-cat-btn .cat-name {
  font-weight: 500;
}

.ugc-templates-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-md);
}

.ugc-template-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-md);
  cursor: pointer;
  transition: all 0.2s;
}

.ugc-template-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ugc-template-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-sm);
}

.ugc-template-name {
  font-weight: 600;
  font-size: 1rem;
}

.ugc-template-category {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-alt);
  padding: 2px 6px;
  border-radius: 4px;
}

.ugc-template-preview {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
  max-height: 100px;
  overflow: hidden;
  position: relative;
}

.ugc-template-preview::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(transparent, var(--surface));
}

.ugc-template-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
}

.ugc-template-variables {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.ugc-template-use-btn {
  font-size: 0.85rem;
}

/* UGC Customizer Modal */
.ugc-customizer-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
}

.ugc-customizer-modal .modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.ugc-customizer-modal .modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--surface);
  border-radius: var(--radius);
  width: 90%;
  max-width: 900px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ugc-customizer-modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  border-bottom: 1px solid var(--border);
}

.ugc-customizer-modal .modal-header h3 {
  margin: 0;
}

.ugc-customizer-modal .modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-muted);
}

.ugc-customizer-modal .modal-body {
  padding: var(--space-md);
  overflow-y: auto;
  flex: 1;
}

.ugc-customizer-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

@media (max-width: 768px) {
  .ugc-customizer-layout {
    grid-template-columns: 1fr;
  }
}

.ugc-variables-section h4,
.ugc-preview-section h4 {
  margin-bottom: var(--space-md);
  font-size: 0.9rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

.ugc-preview-box {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-md);
  white-space: pre-wrap;
  font-size: 0.9rem;
  line-height: 1.6;
  max-height: 400px;
  overflow-y: auto;
}

.ugc-customizer-modal .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-top: 1px solid var(--border);
}

/* ============================================================
   EMAIL GENERATOR STYLES
   ============================================================ */

/* Layout */
.email-generator-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: var(--space-lg);
}

.email-generator-layout {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

@media (max-width: 1024px) {
  .email-generator-layout {
    grid-template-columns: 1fr;
  }
}

.email-input-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.email-results-panel {
  min-height: 600px;
}

/* Email Status Messages */
.email-status {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.email-status.success {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid var(--success);
}

.email-status.error {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid var(--danger);
}

.email-status.loading {
  background: var(--primary-bg);
  color: var(--primary);
  border: 1px solid var(--primary);
}

/* Tips Section */
.email-tips {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.tip-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--glass);
  border-radius: var(--radius-sm);
}

.tip-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.tip-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tip-content strong {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.tip-content span {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

/* Placeholder */
.email-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 500px;
  background: var(--glass);
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
}

.email-placeholder .placeholder-content {
  text-align: center;
  max-width: 400px;
  padding: var(--space-xl);
}

.email-placeholder .placeholder-icon {
  font-size: 4rem;
  margin-bottom: var(--space-md);
}

.email-placeholder h3 {
  margin-bottom: var(--space-sm);
  color: var(--text-primary);
}

.email-placeholder p {
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
}

.email-placeholder .placeholder-features {
  list-style: none;
  text-align: left;
  padding: 0;
  margin: 0 0 var(--space-md);
}

.email-placeholder .placeholder-features li {
  padding: var(--space-xs) 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.email-placeholder .placeholder-hint {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  padding: var(--space-sm);
  background: var(--surface);
  border-radius: var(--radius-sm);
}

/* Subject Lines */
.subject-lines-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.subject-line-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.subject-line-item:hover {
  background: var(--primary-bg);
  border-color: var(--primary);
}

.subject-line-item.selected {
  background: var(--primary-bg);
  border-color: var(--primary);
}

.subject-line-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  font-size: var(--font-size-xs);
  font-weight: 600;
  flex-shrink: 0;
}

.subject-line-text {
  flex: 1;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.subject-line-copy {
  padding: 4px 8px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.subject-line-item:hover .subject-line-copy {
  opacity: 1;
}

.subject-line-copy:hover {
  background: var(--surface);
  color: var(--text-primary);
}

/* Preview Text Box */
.preview-text-box {
  padding: var(--space-md);
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-style: italic;
}

/* Email Section */
.email-section {
  margin-bottom: var(--space-lg);
}

.email-section:last-child {
  margin-bottom: 0;
}

.email-section-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Email Preview Tabs */
.email-preview-tabs {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-sm);
}

.email-preview-tab {
  padding: var(--space-xs) var(--space-md);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.email-preview-tab:hover {
  background: var(--glass);
  color: var(--text-primary);
}

.email-preview-tab.active {
  background: var(--primary-bg);
  border-color: var(--primary);
  color: var(--primary);
}

/* Email Preview Container */
.email-preview-container {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: white;
}

.email-preview-frame {
  padding: var(--space-md);
  min-height: 400px;
  max-height: 600px;
  overflow-y: auto;
}

.email-preview-frame iframe {
  width: 100%;
  border: none;
  min-height: 400px;
}

.email-code-view,
.email-text-view {
  padding: var(--space-md);
  background: var(--surface);
  max-height: 500px;
  overflow: auto;
}

.email-code-view pre,
.email-text-view pre {
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--font-size-xs);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Sequence Timeline Mini (in sidebar) */
.sequence-timeline-mini {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.timeline-mini-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  background: var(--glass);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
}

.timeline-mini-dot {
  width: 8px;
  height: 8px;
  background: var(--primary);
  border-radius: 50%;
  flex-shrink: 0;
}

.timeline-mini-label {
  color: var(--text-secondary);
}

/* Sequence Results */
.sequence-results {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.sequence-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
  gap: var(--space-md);
}

.sequence-header h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  color: var(--text-primary);
}

.sequence-actions {
  display: flex;
  gap: var(--space-sm);
}

/* Sequence Timeline */
.sequence-timeline {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-md);
  background: var(--glass);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-lg);
  overflow-x: auto;
}

.timeline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  min-width: 80px;
  flex-shrink: 0;
}

.timeline-dot {
  width: 32px;
  height: 32px;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--font-size-sm);
}

.timeline-label {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  text-align: center;
  white-space: nowrap;
}

.timeline-connector {
  flex: 1;
  height: 2px;
  background: var(--border);
  min-width: 20px;
}

/* Sequence Emails Accordion */
.sequence-emails-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.sequence-email-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--glass);
}

.sequence-email-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease;
}

.sequence-email-header:hover {
  background: var(--surface);
}

.sequence-email-info {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.sequence-email-number {
  width: 32px;
  height: 32px;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--font-size-sm);
  flex-shrink: 0;
}

.sequence-email-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sequence-email-timing {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.sequence-email-purpose {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.sequence-email-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.sequence-email-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-xs);
  color: var(--text-secondary);
  transition: transform 0.2s ease;
}

.sequence-email-item.expanded .sequence-email-toggle {
  transform: rotate(180deg);
}

.sequence-email-body {
  display: none;
  padding: var(--space-md);
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.sequence-email-item.expanded .sequence-email-body {
  display: block;
}

/* Email Generator Button States */
#generateEmailBtn .btn-loading {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

#generateEmailBtn .btn-loading::before {
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Copy Feedback */
.copy-success {
  animation: copyPulse 0.3s ease;
}

@keyframes copyPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}


/* ============================================================
   Landing Page Builder Styles
   ============================================================ */
.landing-builder-container {
  padding: var(--space-lg);
  max-width: 100%;
}

.landing-builder-layout {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

@media (max-width: 1200px) {
  .landing-builder-layout {
    grid-template-columns: 1fr;
  }
}

/* Input Panel */
.landing-input-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Style Selector */
.landing-style-selector {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-sm);
}

.landing-style-option {
  position: relative;
  cursor: pointer;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-sm);
  text-align: center;
  transition: all var(--transition-fast);
  background: var(--surface);
}

.landing-style-option:hover {
  border-color: var(--accent);
  background: var(--surface-elevated);
}

.landing-style-option.active {
  border-color: var(--accent);
  background: var(--accent-glow);
}

.landing-style-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.style-preview {
  width: 100%;
  height: 60px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-xs);
  overflow: hidden;
  position: relative;
}

.style-preview-header {
  height: 12px;
  background: currentColor;
  opacity: 0.8;
}

.style-preview-content {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.style-preview-text {
  height: 6px;
  background: currentColor;
  opacity: 0.3;
  border-radius: 2px;
  width: 80%;
}

.style-preview-btn {
  height: 10px;
  background: currentColor;
  opacity: 0.6;
  border-radius: 2px;
  width: 50%;
}

/* Style Preview Variants */
.style-preview-modern {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #fff;
}

.style-preview-minimal {
  background: #fafafa;
  color: #18181b;
  border: 1px solid #e5e5e5;
}

.style-preview-bold {
  background: #0f172a;
  color: #f97316;
}

.style-preview-corporate {
  background: #f1f5f9;
  color: #1e40af;
  border: 1px solid #cbd5e1;
}

.style-preview-startup {
  background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%);
  color: #7c3aed;
}

.style-name {
  display: block;
  font-weight: 600;
  font-size: var(--font-size-sm);
  margin-top: var(--space-xs);
}

.style-desc {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* Color Input */
.color-input-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.color-input {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0;
}

.color-label {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* Sections List */
.landing-sections-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.landing-section-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.landing-section-item:hover {
  background: var(--surface-elevated);
  border-color: var(--border-strong);
}

.landing-section-item.dragging {
  opacity: 0.5;
  transform: scale(0.98);
}

.section-drag-handle {
  cursor: grab;
  color: var(--text-muted);
  font-size: 12px;
  user-select: none;
}

.section-drag-handle:active {
  cursor: grabbing;
}

.section-required {
  margin-left: auto;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  background: var(--glass);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

/* Generate Actions */
.landing-generate-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.landing-generate-actions .btn-lg {
  flex: 1;
  padding: var(--space-md) var(--space-lg);
  font-size: var(--font-size-md);
}

/* Status Message */
.landing-status {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  margin-top: var(--space-md);
  font-size: var(--font-size-sm);
}

.landing-status-info {
  background: rgba(56, 189, 248, 0.1);
  color: var(--info);
  border: 1px solid rgba(56, 189, 248, 0.2);
}

.landing-status-success {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid rgba(52, 211, 153, 0.2);
}

.landing-status-error {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid rgba(248, 113, 113, 0.2);
}

/* Preview Panel */
.landing-preview-panel {
  display: flex;
  flex-direction: column;
  min-height: 600px;
}

/* Placeholder */
.landing-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
}

.landing-placeholder .placeholder-content {
  text-align: center;
  max-width: 400px;
}

.landing-placeholder .placeholder-icon {
  font-size: 64px;
  margin-bottom: var(--space-md);
}

.landing-placeholder h3 {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-xl);
}

.landing-placeholder p {
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
}

.landing-placeholder .placeholder-features {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.landing-placeholder .placeholder-features li {
  padding: var(--space-xs) 0;
  color: var(--text-secondary);
}

/* Results Container */
.landing-results {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}

/* Preview Header */
.landing-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-elevated);
  border-bottom: 1px solid var(--border);
}

.preview-tabs {
  display: flex;
  gap: var(--space-xs);
}

.preview-tab {
  padding: var(--space-xs) var(--space-sm);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.preview-tab:hover {
  background: var(--glass);
  color: var(--text-primary);
}

.preview-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.preview-actions {
  display: flex;
  gap: var(--space-xs);
}

/* Preview Wrapper */
.landing-preview-wrapper {
  flex: 1;
  min-height: 500px;
  background: #fff;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.landing-preview-wrapper.view-desktop {
  padding: 0;
}

.landing-preview-wrapper.view-tablet {
  padding: var(--space-md);
  background: var(--bg);
}

.landing-preview-wrapper.view-tablet .landing-preview-iframe {
  max-width: 768px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}

.landing-preview-wrapper.view-mobile {
  padding: var(--space-md);
  background: var(--bg);
}

.landing-preview-wrapper.view-mobile .landing-preview-iframe {
  max-width: 375px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}

.landing-preview-iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: #fff;
}

/* Section Editor */
.landing-section-editor {
  background: var(--surface);
  border-top: 1px solid var(--border);
  max-height: 300px;
  overflow-y: auto;
}

.section-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-elevated);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
}

.section-editor-header h4 {
  margin: 0;
  font-size: var(--font-size-sm);
}

.section-editor-list {
  padding: var(--space-sm);
}

.section-editor-item {
  padding: var(--space-sm) var(--space-md);
  background: var(--glass);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-xs);
}

.section-editor-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-editor-name {
  font-weight: 500;
  font-size: var(--font-size-sm);
}

.section-editor-actions {
  display: flex;
  gap: var(--space-xs);
}

.section-editor-content {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
}

.section-content-field {
  margin-bottom: var(--space-xs);
}

.section-content-field label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-bottom: 2px;
  text-transform: capitalize;
}

.section-content-field .field {
  font-size: var(--font-size-sm);
  padding: var(--space-xs) var(--space-sm);
}

/* Export Options */
.landing-export-options {
  padding: var(--space-md);
  background: var(--surface-elevated);
  border-top: 1px solid var(--border);
}

.landing-export-options h4 {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.export-buttons {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.export-buttons .btn-outline {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* Light Theme Adjustments */
.theme-light .landing-placeholder {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.theme-light .landing-results {
  background: #fff;
  border-color: #e2e8f0;
}

.theme-light .landing-preview-header {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.theme-light .landing-section-editor {
  background: #fff;
}

.theme-light .section-editor-header {
  background: #f8fafc;
}

.theme-light .landing-style-option {
  background: #fff;
  border-color: #e2e8f0;
}

.theme-light .landing-style-option:hover {
  background: #f8fafc;
}

.theme-light .landing-style-option.active {
  background: rgba(99, 102, 241, 0.1);
}

.theme-light .landing-section-item {
  background: #fff;
  border-color: #e2e8f0;
}

.theme-light .landing-section-item:hover {
  background: #f8fafc;
}

/* === Heatmap Tools Integration === */
.heatmap-integration-section {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-color);
}

.heatmap-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

.heatmap-tool-card {
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.heatmap-tool-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.heatmap-tool-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: linear-gradient(135deg, var(--surface-elevated) 0%, var(--surface) 100%);
  border-bottom: 1px solid var(--border-color);
  flex-wrap: wrap;
}

.heatmap-tool-logo {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  flex-shrink: 0;
}

.heatmap-tool-logo.hotjar-logo {
  background: linear-gradient(135deg, #ff3c00 0%, #ff6b00 100%);
  color: white;
}

.heatmap-tool-logo.clarity-logo {
  background: linear-gradient(135deg, #0078d4 0%, #00a4ef 100%);
  color: white;
}

.heatmap-tool-logo.luckyorange-logo {
  background: linear-gradient(135deg, #ff6b00 0%, #ffa500 100%);
  color: white;
}

.heatmap-tool-info {
  flex: 1;
  min-width: 150px;
}

.heatmap-tool-info h3 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin: 0 0 4px 0;
  color: var(--text-primary);
}

.heatmap-tool-info p {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
}

.heatmap-signup-link {
  font-size: var(--font-size-sm);
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.heatmap-signup-link:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

.heatmap-tool-body {
  padding: var(--space-md);
}

.heatmap-actions {
  margin-top: var(--space-md);
}

.heatmap-actions .btn {
  width: 100%;
}

.heatmap-actions .btn-icon {
  margin-right: 6px;
}

/* Code Output */
.heatmap-code-output {
  margin-top: var(--space-md);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  overflow: hidden;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.code-output-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-elevated);
  border-bottom: 1px solid var(--border-color);
}

.code-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

.copy-code-btn {
  font-size: var(--font-size-xs);
  padding: 4px 10px;
}

.copy-code-btn.copied {
  background: var(--success);
  color: white;
  border-color: var(--success);
}

.heatmap-code-block {
  margin: 0;
  padding: var(--space-md);
  background: var(--code-bg, #1e1e1e);
  color: var(--code-text, #d4d4d4);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 200px;
  overflow-y: auto;
}

.heatmap-insert-actions {
  padding: var(--space-sm) var(--space-md);
  background: var(--surface);
  border-top: 1px solid var(--border-color);
}

.heatmap-insert-actions .btn {
  width: 100%;
}

/* Guide Section */
.heatmap-guide-section {
  margin-top: var(--space-xl);
}

.heatmap-guide-details {
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.heatmap-guide-summary {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  cursor: pointer;
  background: var(--surface-elevated);
  transition: background 0.2s ease;
  list-style: none;
}

.heatmap-guide-summary::-webkit-details-marker {
  display: none;
}

.heatmap-guide-summary::after {
  content: "▼";
  margin-left: auto;
  font-size: 12px;
  transition: transform 0.2s ease;
  color: var(--text-secondary);
}

.heatmap-guide-details[open] .heatmap-guide-summary::after {
  transform: rotate(180deg);
}

.heatmap-guide-summary:hover {
  background: var(--surface-hover);
}

.guide-icon {
  font-size: var(--font-size-xl);
}

.guide-title {
  font-weight: 600;
  color: var(--text-primary);
}

.heatmap-guide-content {
  padding: var(--space-lg);
}

.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.guide-card {
  background: var(--surface-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: var(--space-md);
}

.guide-card h4 {
  font-size: var(--font-size-base);
  font-weight: 600;
  margin: 0 0 var(--space-sm) 0;
  color: var(--text-primary);
}

.guide-card ul {
  margin: 0;
  padding-left: var(--space-lg);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.guide-card li {
  margin-bottom: 6px;
}

.guide-card li strong {
  color: var(--text-primary);
}

.guide-comparison {
  margin-top: var(--space-lg);
}

.guide-comparison h4 {
  font-size: var(--font-size-base);
  font-weight: 600;
  margin: 0 0 var(--space-md) 0;
  color: var(--text-primary);
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.comparison-table th,
.comparison-table td {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  border: 1px solid var(--border-color);
}

.comparison-table th {
  background: var(--surface-elevated);
  font-weight: 600;
  color: var(--text-primary);
}

.comparison-table td {
  background: var(--surface);
  color: var(--text-secondary);
}

.comparison-table tr:hover td {
  background: var(--surface-hover);
}

/* Detection Status */
.heatmap-detection-status {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding: var(--space-md);
  border-radius: var(--radius);
  font-size: var(--font-size-sm);
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.heatmap-detection-status.status-success {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: var(--success);
}

.heatmap-detection-status.status-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--danger);
}

.heatmap-detection-status.status-warning {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: var(--warning);
}

.heatmap-detection-status.status-info {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: var(--accent);
}

.detection-icon {
  font-size: var(--font-size-lg);
}

.detection-message {
  flex: 1;
}

/* Light Theme Overrides */
.theme-light .heatmap-tool-card {
  background: #fff;
}

.theme-light .heatmap-tool-header {
  background: linear-gradient(135deg, #f8fafc 0%, #fff 100%);
}

.theme-light .heatmap-code-block {
  background: #f5f5f5;
  color: #333;
}

.theme-light .code-output-header {
  background: #f8fafc;
}

.theme-light .heatmap-guide-summary {
  background: #f8fafc;
}

.theme-light .heatmap-guide-summary:hover {
  background: #f1f5f9;
}

.theme-light .guide-card {
  background: #f8fafc;
}

.theme-light .comparison-table th {
  background: #f1f5f9;
}

.theme-light .comparison-table td {
  background: #fff;
}

.theme-light .comparison-table tr:hover td {
  background: #f8fafc;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .heatmap-tools-grid {
    grid-template-columns: 1fr;
  }

  .heatmap-tool-header {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .heatmap-signup-link {
    margin-top: var(--space-sm);
  }

  .guide-grid {
    grid-template-columns: 1fr;
  }

  .comparison-table {
    font-size: var(--font-size-xs);
  }

  .comparison-table th,
  .comparison-table td {
    padding: var(--space-xs) var(--space-sm);
  }
}

/* === End Heatmap Tools Integration === */


/* ============================================================
   GSC Analytics Tab Styles
   ============================================================ */

.gsc-container {
  padding: var(--space-lg);
  max-width: 1600px;
  margin: 0 auto;
}

.gsc-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-lg);
  gap: var(--space-md);
  flex-wrap: wrap;
}

.gsc-header-content {
  flex: 1;
  min-width: 280px;
}

.gsc-header-actions {
  display: flex;
  gap: var(--space-sm);
}

/* Connection Panel */
.gsc-connection-panel {
  display: flex;
  justify-content: center;
  padding: var(--space-xl) 0;
}

.gsc-connection-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  max-width: 600px;
  text-align: center;
}

.gsc-connection-icon {
  font-size: 4rem;
  margin-bottom: var(--space-md);
}

.gsc-connection-card h2 {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-xl);
}

.gsc-connection-card > p {
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
}

.gsc-setup-instructions {
  text-align: left;
  background: var(--surface-alt);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
}

.gsc-setup-instructions h3 {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.gsc-setup-instructions ol {
  margin: 0;
  padding-left: var(--space-lg);
}

.gsc-setup-instructions li {
  margin-bottom: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.gsc-setup-instructions a {
  color: var(--accent);
}

.gsc-connect-form {
  text-align: left;
}

.gsc-connect-form .form-group {
  margin-bottom: var(--space-md);
}

.gsc-connect-actions {
  margin-top: var(--space-lg);
  text-align: center;
}

.gsc-error {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-md);
  color: var(--danger);
  font-size: var(--font-size-sm);
}

/* Status Bar */
.gsc-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}

.gsc-status-info {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
}

.gsc-status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
}

.gsc-status-indicator.connected {
  background: var(--success);
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

/* Filters */
.gsc-filters {
  display: flex;
  gap: var(--space-md);
  align-items: flex-end;
  flex-wrap: wrap;
  padding: var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
}

.gsc-date-range {
  min-width: 160px;
}

.gsc-date-range label {
  display: block;
  margin-bottom: var(--space-xs);
}

.gsc-custom-dates {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.gsc-filters-group {
  display: flex;
  gap: var(--space-sm);
  flex: 1;
  min-width: 300px;
}

.gsc-filters-group input {
  flex: 1;
  min-width: 140px;
}

/* Summary Stats */
.gsc-summary-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.gsc-stat-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: transform 0.2s, box-shadow 0.2s;
}

.gsc-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.gsc-stat-icon {
  font-size: 2rem;
  opacity: 0.8;
}

.gsc-stat-value {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  line-height: 1.2;
}

.gsc-stat-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* Charts */
.gsc-charts-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.gsc-chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.gsc-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  border-bottom: 1px solid var(--border);
}

.gsc-chart-header h3 {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: 600;
}

.gsc-chart-toggle {
  display: flex;
  gap: var(--space-md);
}

.toggle-label {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  cursor: pointer;
}

.gsc-chart-container {
  padding: var(--space-md);
}

/* Data Tabs */
.gsc-data-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.gsc-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
}

.gsc-tab {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.gsc-tab:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.05);
}

.gsc-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: var(--surface);
}

.gsc-tab-content {
  padding: var(--space-md);
}

/* Table Controls */
.gsc-table-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
  gap: var(--space-md);
}

.gsc-table-search {
  flex: 1;
  max-width: 300px;
}

.gsc-table-wrapper {
  overflow-x: auto;
}

.gsc-queries-table,
.gsc-pages-table {
  width: 100%;
}

.gsc-queries-table th,
.gsc-pages-table th {
  white-space: nowrap;
  cursor: pointer;
}

.gsc-queries-table th.sortable:hover,
.gsc-pages-table th.sortable:hover {
  background: var(--surface-alt);
}

.gsc-queries-table td:first-child,
.gsc-pages-table td:first-child {
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Empty States */
.gsc-empty-state {
  text-align: center;
  padding: var(--space-xl);
  color: var(--text-secondary);
}

.gsc-empty-state.small {
  padding: var(--space-md);
}

.gsc-empty-icon {
  font-size: 3rem;
  margin-bottom: var(--space-sm);
  opacity: 0.5;
}

.gsc-empty-state.small .gsc-empty-icon {
  font-size: 2rem;
}

/* Insights Grid */
.gsc-insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-md);
}

.gsc-insight-card {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.gsc-insight-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xs);
}

.gsc-insight-header h4 {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: 600;
}

.gsc-insight-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 var(--space-xs);
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.gsc-insight-badge.warning {
  background: var(--warning);
}

.gsc-insight-badge.success {
  background: var(--success);
}

.gsc-insight-desc {
  margin: 0 0 var(--space-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.gsc-insight-list {
  max-height: 300px;
  overflow-y: auto;
}

.gsc-insight-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--space-sm);
  background: var(--surface);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-xs);
  font-size: var(--font-size-sm);
}

.gsc-insight-item:last-child {
  margin-bottom: 0;
}

.gsc-insight-item-query {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: var(--space-sm);
}

.gsc-insight-item-stats {
  display: flex;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.gsc-insight-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: var(--font-size-xs);
}

.gsc-insight-stat-value {
  font-weight: 600;
}

.gsc-insight-stat-label {
  color: var(--text-muted);
}

.gsc-insight-change {
  font-weight: 600;
}

.gsc-insight-change.positive {
  color: var(--success);
}

.gsc-insight-change.negative {
  color: var(--danger);
}

/* Loading State */
.gsc-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
  color: var(--text-secondary);
}

.gsc-loading-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: gscSpin 1s linear infinite;
  margin-bottom: var(--space-md);
}

@keyframes gscSpin {
  to { transform: rotate(360deg); }
}

/* Light Theme */
.theme-light .gsc-connection-card,
.theme-light .gsc-status-bar,
.theme-light .gsc-filters,
.theme-light .gsc-stat-card,
.theme-light .gsc-chart-card,
.theme-light .gsc-data-section {
  background: #fff;
}

.theme-light .gsc-setup-instructions,
.theme-light .gsc-insight-card {
  background: #f8fafc;
}

.theme-light .gsc-tab:hover {
  background: rgba(0,0,0,0.03);
}

.theme-light .gsc-tab.active {
  background: #fff;
}

.theme-light .gsc-insight-item {
  background: #fff;
}

/* ============================================================
   Additional Light Theme Component Fixes
   ============================================================ */

/* Code blocks and syntax highlighting */
.theme-light .code-block,
.theme-light .code-output,
.theme-light pre code,
.theme-light .syntax-block {
	background: #f8f9fc;
	color: #1a1f36;
	border: 1px solid var(--border);
}

/* Preview frames */
.theme-light .preview-wrap,
.theme-light .preview-body,
.theme-light .preview-frame-container,
.theme-light .preview-frame-wrapper {
	background: #fff;
	border-color: var(--border);
}

/* Select dropdowns */
.theme-light select.field,
.theme-light .select-field {
	background: var(--surface);
	color: var(--text-primary);
	border-color: var(--border-strong);
}

.theme-light select.field option {
	background: var(--surface);
	color: var(--text-primary);
}

/* Tooltips */
.theme-light [data-tooltip]::after,
.theme-light .tooltip {
	background: #1a1f36;
	color: #fff;
}

/* Range inputs */
.theme-light input[type="range"] {
	background: var(--glass-light);
}

.theme-light input[type="range"]::-webkit-slider-thumb {
	background: var(--accent);
}

/* Checkboxes and radios */
.theme-light input[type="checkbox"],
.theme-light input[type="radio"] {
	border-color: var(--border-strong);
	background: var(--surface);
}

.theme-light input[type="checkbox"]:checked,
.theme-light input[type="radio"]:checked {
	background: var(--accent);
	border-color: var(--accent);
}

/* Tab navigation enhancements */
.theme-light .tab-nav {
	background: rgba(255, 255, 255, 0.95);
	border-bottom-color: var(--border);
}

.theme-light .tab-btn {
	color: var(--text-muted);
}

.theme-light .tab-btn:hover {
	color: var(--text-primary);
	background: var(--glass-light);
}

.theme-light .tab-btn.active {
	color: var(--accent);
	background: rgba(79, 108, 229, 0.08);
}

/* Markdown preview */
.theme-light .markdown-preview {
	background: var(--surface);
	color: var(--text-primary);
}

.theme-light .markdown-preview code {
	background: var(--surface-elevated);
	border: 1px solid var(--border);
}

.theme-light .markdown-preview pre {
	background: var(--surface-elevated);
	border: 1px solid var(--border);
}

/* Progress bars */
.theme-light .progress-bar-track {
	background: var(--glass-light);
}

/* Badges and tags */
.theme-light .badge,
.theme-light .tag,
.theme-light .chip {
	background: var(--glass-strong);
	color: var(--text-secondary);
	border: 1px solid var(--border);
}

.theme-light .badge.badge-success,
.theme-light .tag.tag-success {
	background: var(--success-bg);
	color: var(--success);
	border-color: rgba(5, 150, 105, 0.2);
}

.theme-light .badge.badge-danger,
.theme-light .tag.tag-danger {
	background: var(--danger-bg);
	color: var(--danger);
	border-color: rgba(220, 38, 38, 0.2);
}

/* Dividers and separators */
.theme-light hr,
.theme-light .divider,
.theme-light .separator {
	border-color: var(--border);
	background: var(--border);
}

/* Tables */
.theme-light table,
.theme-light .data-table {
	background: var(--surface);
}

.theme-light th {
	background: var(--surface-elevated);
	color: var(--text-secondary);
}

.theme-light td {
	border-color: var(--border);
}

.theme-light tbody tr:hover {
	background: var(--glass-light);
}

/* Alerts and info boxes */
.theme-light .alert,
.theme-light .info-box,
.theme-light .notice {
	background: var(--surface-elevated);
	border-color: var(--border);
}

.theme-light .alert-info {
	background: rgba(2, 132, 199, 0.08);
	border-color: rgba(2, 132, 199, 0.2);
}

.theme-light .alert-success {
	background: var(--success-bg);
	border-color: rgba(5, 150, 105, 0.2);
}

.theme-light .alert-warning {
	background: rgba(217, 119, 6, 0.08);
	border-color: rgba(217, 119, 6, 0.2);
}

.theme-light .alert-danger,
.theme-light .alert-error {
	background: var(--danger-bg);
	border-color: rgba(220, 38, 38, 0.2);
}

/* Loading states */
.theme-light .skeleton {
	background: linear-gradient(
		90deg,
		var(--glass-light) 0%,
		var(--glass-strong) 50%,
		var(--glass-light) 100%
	);
}

.theme-light .loading-overlay {
	background: rgba(255, 255, 255, 0.9);
}

.theme-light .spinner {
	border-color: var(--glass-strong);
	border-top-color: var(--accent);
}

/* Collapsible sections */
.theme-light details summary {
	background: var(--glass-light);
	color: var(--text-primary);
}

.theme-light details[open] summary {
	background: var(--glass-strong);
}

/* Autocomplete dropdowns */
.theme-light .autocomplete-dropdown,
.theme-light .kp-autocomplete-dropdown,
.theme-light .suggestions-dropdown {
	background: var(--surface);
	border: 1px solid var(--border-strong);
	box-shadow: var(--shadow-2);
}

.theme-light .autocomplete-item:hover,
.theme-light .suggestion-item:hover {
	background: var(--glass-light);
}

/* Context menus */
.theme-light .context-menu {
	background: var(--surface);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-2);
}

.theme-light .context-menu-item:hover {
	background: var(--glass-light);
}

/* Rich text editor */
.theme-light .editor-toolbar {
	background: var(--surface-elevated);
	border-color: var(--border);
}

.theme-light .editor-content {
	background: var(--surface);
	color: var(--text-primary);
}

/* Responsive */
@media (max-width: 768px) {
  .gsc-container {
    padding: var(--space-md);
  }

  .gsc-header {
    flex-direction: column;
  }

  .gsc-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .gsc-filters-group {
    flex-direction: column;
    min-width: auto;
  }

  .gsc-charts-section {
    grid-template-columns: 1fr;
  }

  .gsc-tabs {
    flex-wrap: wrap;
  }

  .gsc-tab {
    flex: 1 1 auto;
    min-width: 100px;
  }

  .gsc-insights-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   ROI CALCULATOR STYLES
   ============================================================ */

/* Container */
.roi-calculator-container {
  padding: var(--space-lg);
  max-width: 1400px;
  margin: 0 auto;
}

.roi-header {
  margin-bottom: var(--space-xl);
}

.roi-header-content h1 {
  margin-bottom: var(--space-xs);
}

.roi-header-content .page-subtitle {
  color: var(--text-muted);
}

/* Main Grid Layout */
.roi-main-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

@media (max-width: 1024px) {
  .roi-main-grid {
    grid-template-columns: 1fr;
  }
}

/* ROI Cards */
.roi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.roi-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  background: var(--surface-elevated);
  border-bottom: 1px solid var(--border);
}

.roi-card-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.roi-card-body {
  padding: var(--space-lg);
}

/* Input Panel */
.roi-input-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* Form Groups */
.roi-form-group {
  margin-bottom: var(--space-md);
}

.roi-form-group:last-child {
  margin-bottom: 0;
}

.roi-form-group .field-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: var(--text-primary);
}

.roi-form-group .field-helper {
  display: block;
  margin-top: 4px;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.roi-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

@media (max-width: 600px) {
  .roi-form-row {
    grid-template-columns: 1fr;
  }
}

/* Input with benchmark button */
.roi-input-with-benchmark {
  display: flex;
  gap: var(--space-xs);
}

.roi-input-with-benchmark .field {
  flex: 1;
}

.roi-benchmark-btn {
  width: 40px;
  height: 40px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all var(--transition-fast);
}

.roi-benchmark-btn:hover {
  background: var(--glass-light);
  border-color: var(--accent);
}

/* Slider */
.roi-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  background: var(--glass);
  border-radius: 4px;
  outline: none;
  margin: 8px 0;
}

.roi-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(108, 140, 255, 0.4);
  transition: transform var(--transition-fast);
}

.roi-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.roi-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

.roi-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.roi-slider-value {
  font-weight: 600;
  color: var(--accent);
}

/* Preset Dropdown */
.roi-preset-dropdown {
  position: relative;
}

.roi-preset-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  z-index: 100;
  min-width: 280px;
  overflow: hidden;
}

.roi-preset-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast);
  color: var(--text-primary);
}

.roi-preset-item:hover {
  background: var(--glass-light);
}

.preset-icon {
  font-size: 20px;
}

.preset-info {
  display: flex;
  flex-direction: column;
}

.preset-info strong {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.preset-info span {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* Actions */
.roi-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
}

.roi-actions .btn-lg {
  flex: 1;
  padding: 14px 24px;
  font-size: 15px;
}

/* Benchmarks Card */
.roi-benchmarks-card {
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.roi-benchmark-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.roi-benchmark-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  background: var(--glass);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.roi-benchmark-item:hover {
  background: var(--glass-light);
  transform: translateX(4px);
}

.benchmark-industry {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.benchmark-rate {
  font-weight: 600;
  color: var(--accent);
}

.benchmark-note {
  margin-top: var(--space-sm);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-align: center;
}

/* Results Panel */
.roi-results-panel {
  min-height: 500px;
}

/* Placeholder */
.roi-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 400px;
  padding: var(--space-xl);
  background: var(--surface);
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
}

.roi-placeholder-icon {
  font-size: 64px;
  margin-bottom: var(--space-md);
  animation: bounce 2s ease infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.roi-placeholder h3 {
  margin: 0 0 var(--space-sm);
  font-size: 20px;
  color: var(--text-primary);
}

.roi-placeholder p {
  margin: 0 0 var(--space-lg);
  color: var(--text-muted);
  max-width: 400px;
}

.roi-placeholder-tips {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.roi-tip {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.tip-icon {
  font-size: 16px;
}

/* Results Container */
.roi-results-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* Metrics Grid */
.roi-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

@media (max-width: 768px) {
  .roi-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .roi-metrics-grid {
    grid-template-columns: 1fr;
  }
}

.roi-metric-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all var(--transition-fast);
}

.roi-metric-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-1);
}

.roi-metric-card.roi-metric-roi {
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-elevated) 100%);
  border-color: var(--accent);
}

.roi-metric-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.roi-metric-content {
  flex: 1;
  min-width: 0;
}

.roi-metric-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.roi-metric-value.roi-positive {
  color: var(--success);
}

.roi-metric-value.roi-negative {
  color: var(--danger);
}

.roi-metric-label {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

/* Chart Card */
.roi-chart-card .roi-card-body {
  padding: var(--space-lg);
}

.roi-chart {
  width: 100%;
  height: 220px;
  background: var(--glass);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.roi-svg-chart {
  width: 100%;
  height: 100%;
}

.roi-chart-legend {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  margin-top: var(--space-md);
}

.roi-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.roi-legend-color {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.roi-legend-revenue {
  background: var(--accent);
}

.roi-legend-cost {
  background: var(--danger);
}

.roi-legend-profit {
  background: var(--success);
}

/* Comparison Card */
.roi-comparison-intro {
  margin: 0 0 var(--space-md);
  color: var(--text-secondary);
}

.roi-comparison-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

@media (max-width: 600px) {
  .roi-comparison-grid {
    grid-template-columns: 1fr;
  }
}

.roi-comparison-item {
  padding: var(--space-md);
  background: var(--glass);
  border-radius: var(--radius-sm);
  text-align: center;
}

.comparison-label {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-bottom: 4px;
}

.comparison-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.comparison-value.roi-savings {
  color: var(--success);
}

.comparison-value.roi-loss {
  color: var(--danger);
}

.comparison-note {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: 4px;
}

/* Export Actions */
.roi-export-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  padding-top: var(--space-md);
}

/* History Card */
.roi-history-card {
  margin-top: var(--space-lg);
}

.roi-history-list {
  max-height: 400px;
  overflow-y: auto;
}

.roi-history-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-xl);
  text-align: center;
  color: var(--text-muted);
}

.roi-history-empty .empty-icon {
  font-size: 32px;
  margin-bottom: var(--space-sm);
}

.roi-history-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  border-bottom: 1px solid var(--border);
  transition: background var(--transition-fast);
}

.roi-history-item:last-child {
  border-bottom: none;
}

.roi-history-item:hover {
  background: var(--glass);
}

.history-item-main {
  flex: 1;
  min-width: 0;
}

.history-item-name {
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-item-date {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.history-item-stats {
  display: flex;
  gap: var(--space-md);
}

.history-stat {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  white-space: nowrap;
}

.history-stat.roi-positive {
  color: var(--success);
}

.history-stat.roi-negative {
  color: var(--danger);
}

.history-item-actions {
  display: flex;
  gap: var(--space-xs);
}

@media (max-width: 768px) {
  .roi-history-item {
    flex-wrap: wrap;
  }

  .history-item-stats {
    width: 100%;
    order: 3;
    margin-top: var(--space-sm);
    flex-wrap: wrap;
    gap: var(--space-sm);
  }
}

/* Light Theme Overrides */
.theme-light .roi-card {
  background: var(--surface);
}

.theme-light .roi-placeholder {
  background: var(--surface);
  border-color: var(--border-strong);
}

.theme-light .roi-metric-card.roi-metric-roi {
  background: linear-gradient(135deg, rgba(108, 140, 255, 0.05) 0%, rgba(108, 140, 255, 0.1) 100%);
}

.theme-light .roi-benchmark-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

.theme-light .roi-preset-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* ============================================================
   GSC OAuth & Extended Features
   ============================================================ */

/* OAuth Section */
.gsc-oauth-section {
  margin-bottom: var(--space-lg);
}

.gsc-oauth-section h3 {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-md);
}

.gsc-oauth-section p {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
}

.gsc-oauth-actions {
  text-align: center;
}

.btn-google {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: white;
  color: #444;
  border: 1px solid #ddd;
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--font-size-md);
  font-weight: 500;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
}

.btn-google:hover {
  background: #f8f9fa;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn-google:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-google .google-icon {
  flex-shrink: 0;
}

.gsc-warning {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: var(--radius-md);
  color: #b45309;
  font-size: var(--font-size-sm);
  text-align: left;
}

.gsc-divider {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-lg) 0;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.gsc-divider::before,
.gsc-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.gsc-manual-section {
  text-align: left;
}

.gsc-manual-section summary {
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  padding: var(--space-sm);
}

.gsc-manual-section summary:hover {
  color: var(--text);
}

.gsc-manual-section[open] summary {
  margin-bottom: var(--space-md);
}

/* Property Selector */
.gsc-properties-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: var(--space-lg);
}

.gsc-property-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
}

.gsc-property-item:hover {
  background: var(--surface-hover);
  border-color: var(--accent);
}

.gsc-property-icon {
  font-size: 1.25rem;
}

.gsc-property-url {
  flex: 1;
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-align: left;
  word-break: break-all;
}

.gsc-property-permission {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-transform: capitalize;
}

.gsc-oauth-account {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

/* Extended Tabs */
.gsc-tabs {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-xs);
}

.gsc-tab {
  background: none;
  border: none;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: all 0.2s;
}

.gsc-tab:hover {
  color: var(--text);
  background: var(--surface-hover);
}

.gsc-tab.active {
  color: var(--accent);
  background: var(--surface);
  border-bottom: 2px solid var(--accent);
  margin-bottom: -1px;
}

/* Countries & Devices Grid */
.gsc-breakdown-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-lg);
}

.gsc-devices-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-lg);
}

.gsc-device-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.gsc-device-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.gsc-device-icon {
  font-size: 2rem;
}

.gsc-device-name {
  font-weight: 600;
  min-width: 80px;
}

.gsc-device-stats {
  display: flex;
  gap: var(--space-lg);
  margin-left: auto;
}

.gsc-device-stat {
  text-align: center;
}

.gsc-device-stat .value {
  display: block;
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.gsc-device-stat .label {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* Search Appearance */
.gsc-appearance-info {
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-alt);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* Comparison Tab */
.gsc-compare-controls {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}

.gsc-compare-periods {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}

.gsc-compare-period {
  flex: 1;
  min-width: 200px;
}

.gsc-compare-period h4 {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.gsc-date-inputs {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.gsc-date-inputs span {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.gsc-compare-vs {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-muted);
  align-self: center;
  padding-top: var(--space-lg);
}

.gsc-compare-options {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  justify-content: flex-end;
}

.gsc-compare-results {
  min-height: 200px;
}

.gsc-compare-table-wrapper {
  overflow-x: auto;
}

.gsc-compare-table {
  width: 100%;
}

.gsc-change {
  font-weight: 600;
}

.gsc-change.positive {
  color: var(--success);
}

.gsc-change.negative {
  color: var(--danger);
}

@media (max-width: 768px) {
  .gsc-breakdown-grid,
  .gsc-devices-grid {
    grid-template-columns: 1fr;
  }

  .gsc-compare-periods {
    flex-direction: column;
  }

  .gsc-compare-vs {
    padding-top: 0;
    align-self: flex-start;
  }

  .gsc-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .gsc-tab {
    white-space: nowrap;
  }
}

/* ============================================================
   GA4 Analytics Tab Styles
   ============================================================ */

.ga4-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-lg);
}

.ga4-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.ga4-header .page-title {
  margin-bottom: var(--space-xs);
}

.ga4-header .page-subtitle {
  color: var(--text-secondary);
}

.ga4-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}

@media (max-width: 1024px) {
  .ga4-layout {
    grid-template-columns: 1fr;
  }
}

/* GA4 Setup Panel */
.ga4-setup-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* GA4 Connection Card */
.ga4-connection-card .form-group {
  margin-bottom: var(--space-md);
}

.ga4-actions-row {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* GA4 Code Card */
.ga4-code-card {
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ga4-code-output {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--font-size-sm);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 300px;
  overflow-y: auto;
}

.ga4-code-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: rgba(108, 140, 255, 0.1);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.ga4-code-note .note-icon {
  flex-shrink: 0;
}

.ga4-code-note code {
  background: var(--bg);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--font-size-xs);
}

.ga4-insert-actions {
  margin-top: var(--space-md);
}

/* Enhanced Tracking Card */
.ga4-enhanced-card .card-intro {
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
}

.ga4-toggle-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.toggle-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
}

.toggle-option:hover {
  background: var(--glass-light);
  border-color: var(--border-strong);
}

.toggle-option input[type="checkbox"] {
  margin-top: 4px;
  accent-color: var(--accent);
  width: 18px;
  height: 18px;
}

.toggle-option-content {
  flex: 1;
}

.toggle-option-label {
  display: block;
  font-weight: 500;
  color: var(--text-primary);
}

.toggle-option-desc {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Setup Guide Card */
.ga4-guide-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.guide-step {
  display: flex;
  gap: var(--space-md);
}

.step-number {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: white;
  border-radius: 50%;
  font-weight: 600;
  flex-shrink: 0;
}

.step-content {
  flex: 1;
}

.step-content strong {
  display: block;
  margin-bottom: var(--space-xs);
}

.step-content p {
  color: var(--text-secondary);
  margin: 0;
  font-size: var(--font-size-sm);
}

.step-content a {
  color: var(--accent);
  text-decoration: none;
}

.step-content a:hover {
  text-decoration: underline;
}

/* GA4 Data Panel */
.ga4-data-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* API Status Card */
.ga4-api-status {
  text-align: center;
  padding: var(--space-md);
}

.api-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  background: var(--glass);
  border-radius: 20px;
  margin-bottom: var(--space-md);
}

.api-status-indicator .status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-muted);
}

.api-status-indicator.not-connected .status-dot {
  background: var(--text-muted);
}

.api-status-indicator.connected .status-dot {
  background: var(--success);
  animation: pulse 2s ease infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.api-status-indicator .status-text {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.api-status-desc {
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
}

/* Traffic Stats Grid */
.ga4-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.ga4-stat-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--glass);
  border-radius: var(--radius-sm);
}

.ga4-stat-item .stat-icon {
  font-size: 24px;
}

.ga4-stat-item .stat-content {
  flex: 1;
}

.ga4-stat-item .stat-value {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.ga4-stat-item .stat-label {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

/* Placeholder List (Top Pages) */
.ga4-placeholder-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.placeholder-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.placeholder-rank {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--glass);
  border-radius: 50%;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.placeholder-content {
  flex: 1;
}

.placeholder-bar {
  height: 8px;
  background: linear-gradient(90deg, var(--glass-strong) 0%, var(--glass) 100%);
  border-radius: 4px;
}

.placeholder-note {
  text-align: center;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  margin-top: var(--space-md);
}

/* Traffic Sources Chart Placeholder */
.ga4-sources-chart-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.donut-placeholder {
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: conic-gradient(
    var(--success) 0deg 144deg,
    var(--accent) 144deg 234deg,
    var(--info) 234deg 306deg,
    var(--warning) 306deg 360deg
  );
  opacity: 0.3;
}

.donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background: var(--surface);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.donut-center span {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.donut-center small {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.sources-legend {
  width: 100%;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  opacity: 0.3;
}

.legend-color.organic { background: var(--success); }
.legend-color.direct { background: var(--accent); }
.legend-color.referral { background: var(--info); }
.legend-color.social { background: var(--warning); }

.legend-label {
  flex: 1;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.legend-value {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

/* Card Badge */
.card-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: var(--accent);
  color: white;
  font-size: var(--font-size-xs);
  font-weight: 500;
  border-radius: 10px;
  margin-left: var(--space-sm);
}

/* Spinner */
.spinner-sm {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Light Theme Overrides for GA4 */
.theme-light .ga4-code-output {
  background: var(--bg);
}

.theme-light .toggle-option {
  background: rgba(0, 0, 0, 0.02);
}

.theme-light .toggle-option:hover {
  background: rgba(0, 0, 0, 0.04);
}

.theme-light .ga4-stat-item {
  background: rgba(0, 0, 0, 0.02);
}

.theme-light .donut-center {
  background: var(--surface);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .ga4-container {
    padding: var(--space-md);
  }

  .ga4-stats-grid {
    grid-template-columns: 1fr;
  }

  .ga4-actions-row {
    flex-direction: column;
  }

  .ga4-actions-row .btn {
    width: 100%;
  }
}

/* GA4 API Analytics Extended Styles */
.ga4-subtabs {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
  padding: var(--space-xs);
  background: var(--surface-alt);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

.ga4-subtab {
  padding: var(--space-sm) var(--space-md);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.ga4-subtab:hover {
  background: var(--surface);
  color: var(--text-primary);
}

.ga4-subtab.active {
  background: var(--primary);
  color: white;
}

.ga4-subtab-content {
  animation: fadeIn 0.2s ease;
}

.ga4-api-panel {
  min-width: 0;
}

.ga4-api-connection-card {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.05) 0%, rgba(16, 185, 129, 0.05) 100%);
}

.ga4-connected-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.ga4-property-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ga4-email {
  font-size: 13px;
  color: var(--text-muted);
}

.ga4-property {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.ga4-connected-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.ga4-manual-connect summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--text-muted);
}

.ga4-manual-connect summary:hover {
  color: var(--text-secondary);
}

/* Realtime Card */
#ga4RealtimeCard {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
  border-color: rgba(16, 185, 129, 0.3);
}

#ga4RealtimeCard .card-badge.live {
  background: #10b981;
  color: white;
  animation: pulse 2s infinite;
}

.ga4-realtime-display {
  text-align: center;
  padding: var(--space-md) 0;
}

.realtime-number {
  font-size: 48px;
  font-weight: 700;
  color: #10b981;
  line-height: 1;
}

.realtime-number.pulse {
  animation: numberPulse 0.5s ease;
}

@keyframes numberPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.realtime-label {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

.ga4-realtime-countries {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

.realtime-country {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.country-name {
  color: var(--text-secondary);
}

.country-users {
  font-weight: 500;
  color: var(--text-primary);
}

/* Filters */
.ga4-filters {
  display: flex;
  gap: var(--space-md);
  align-items: flex-end;
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  background: var(--surface-alt);
  border-radius: var(--radius-md);
}

.ga4-date-range {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.ga4-date-range .field-label {
  font-size: 12px;
}

/* Overview Stats */
.ga4-overview-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.ga4-stat-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.ga4-stat-icon {
  font-size: 28px;
}

.ga4-stat-content {
  flex: 1;
  min-width: 0;
}

.ga4-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
}

.ga4-stat-label {
  font-size: 13px;
  color: var(--text-muted);
}

.ga4-stat-change {
  font-size: 12px;
  font-weight: 500;
  margin-top: 2px;
}

.ga4-stat-change.positive {
  color: #10b981;
}

.ga4-stat-change.negative {
  color: #ef4444;
}

/* Charts Section */
.ga4-charts-section {
  margin-bottom: var(--space-xl);
}

.ga4-chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.ga4-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border);
}

.ga4-chart-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.ga4-chart-toggle {
  display: flex;
  gap: var(--space-md);
}

.ga4-chart-toggle .toggle-label {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 13px;
  cursor: pointer;
}

.ga4-chart-container {
  padding: var(--space-lg);
  height: 280px;
}

/* Breakdown Section */
.ga4-breakdown-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
}

.ga4-breakdown-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.ga4-breakdown-card .card-header {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border);
}

.ga4-breakdown-card .card-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.ga4-breakdown-card .card-body {
  padding: var(--space-lg);
}

.ga4-devices-chart {
  height: 200px;
  margin-bottom: var(--space-md);
}

.ga4-device-item,
.ga4-country-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border-light);
}

.ga4-device-item:last-child,
.ga4-country-item:last-child {
  border-bottom: none;
}

.device-icon {
  font-size: 18px;
}

.device-name,
.country-name {
  flex: 1;
  font-size: 14px;
}

.device-value,
.country-sessions {
  font-weight: 500;
  font-size: 14px;
}

.country-rank {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-alt);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
}

/* Pages Section */
.ga4-pages-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

.ga4-pages-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.ga4-table-wrapper {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}

.ga4-pages-table,
#ga4LandingTable {
  width: 100%;
  border-collapse: collapse;
}

.ga4-pages-table th,
.ga4-pages-table td,
#ga4LandingTable th,
#ga4LandingTable td {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  border-bottom: 1px solid var(--border-light);
}

.ga4-pages-table th,
#ga4LandingTable th {
  background: var(--surface-alt);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-secondary);
}

.page-cell {
  max-width: 300px;
}

.page-title {
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-path {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sources Section */
.ga4-sources-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-lg);
}

.ga4-sources-card,
.ga4-acquisition-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.ga4-sources-chart-container {
  height: 300px;
  padding: var(--space-md);
}

.ga4-source-item {
  padding: var(--space-md);
  border-bottom: 1px solid var(--border-light);
}

.ga4-source-item:last-child {
  border-bottom: none;
}

.source-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-xs);
}

.source-name {
  font-weight: 500;
  font-size: 14px;
}

.source-pct {
  font-weight: 600;
  color: var(--primary);
}

.source-bar {
  height: 6px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
  border-radius: 3px;
  margin-bottom: var(--space-xs);
}

.source-details {
  display: flex;
  gap: var(--space-md);
  font-size: 12px;
  color: var(--text-muted);
}

.ga4-acquisition-item {
  padding: var(--space-md);
  border-bottom: 1px solid var(--border-light);
}

.acq-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-xs);
}

.acq-channel {
  font-weight: 500;
}

.acq-pct {
  font-weight: 600;
  color: var(--primary);
}

.acq-stats {
  display: flex;
  gap: var(--space-md);
  font-size: 13px;
  color: var(--text-muted);
}

/* Advanced Section */
.ga4-advanced-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--space-lg);
}

.ga4-events-card,
.ga4-conversions-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.ga4-event-item,
.ga4-conversion-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border-light);
}

.event-name,
.conv-name {
  flex: 1;
  font-size: 14px;
  font-family: var(--font-mono);
}

.event-count,
.conv-count {
  font-weight: 600;
  font-size: 14px;
}

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

.conv-revenue {
  color: #10b981;
  font-weight: 500;
}

/* Empty & Loading States */
.ga4-empty-state {
  padding: var(--space-xl);
  text-align: center;
  color: var(--text-muted);
}

.ga4-empty-icon {
  font-size: 48px;
  margin-bottom: var(--space-md);
  opacity: 0.5;
}

.ga4-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  gap: var(--space-md);
}

.ga4-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.ga4-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  gap: var(--space-md);
  text-align: center;
}

.ga4-error-icon {
  font-size: 48px;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Responsive */
@media (max-width: 768px) {
  .ga4-subtabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ga4-overview-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .ga4-stat-card {
    padding: var(--space-md);
  }

  .ga4-stat-icon {
    font-size: 24px;
  }

  .ga4-stat-value {
    font-size: 20px;
  }

  .ga4-sources-layout {
    grid-template-columns: 1fr;
  }

  .ga4-breakdown-section {
    grid-template-columns: 1fr;
  }

  .ga4-advanced-layout {
    grid-template-columns: 1fr;
  }

  .ga4-filters {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ============================================================
   TRAFFIC FORECASTER STYLES
   ============================================================ */

/* Main Card */
.tf-card {
  margin-top: var(--space-lg);
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
}

.tf-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  background: linear-gradient(135deg, rgba(108, 140, 255, 0.08) 0%, rgba(167, 139, 250, 0.08) 100%);
  border-bottom: 1px solid var(--border);
}

.tf-header-content h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.tf-icon {
  font-size: 20px;
}

.tf-subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

.tf-toggle-btn {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tf-toggle-icon {
  font-size: 10px;
}

.tf-body {
  padding: var(--space-lg);
}

/* Input Section */
.tf-input-section {
  margin-bottom: var(--space-lg);
}

.tf-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

.tf-section-header h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.tf-import-actions {
  display: flex;
  gap: var(--space-sm);
}

/* Keywords Table */
.tf-table-container {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  background: var(--surface-elevated);
}

.tf-keywords-table {
  width: 100%;
  min-width: 600px;
}

.tf-keywords-table th {
  background: var(--bg-secondary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 12px;
}

.tf-keywords-table td {
  padding: 8px 12px;
}

.tf-keywords-table input.field-sm {
  padding: 6px 10px;
  font-size: 13px;
  background: var(--surface);
  border-color: var(--border);
}

.tf-col-keyword { width: 25%; min-width: 150px; }
.tf-col-volume { width: 15%; min-width: 100px; }
.tf-col-current { width: 15%; min-width: 90px; }
.tf-col-target { width: 15%; min-width: 90px; }
.tf-col-cpc { width: 15%; min-width: 80px; }
.tf-col-actions { width: 15%; min-width: 60px; text-align: center; }

.tf-remove-btn {
  color: var(--danger);
  opacity: 0.7;
}

.tf-remove-btn:hover {
  opacity: 1;
}

.tf-empty-state {
  padding: var(--space-lg);
  text-align: center;
  color: var(--text-muted);
}

.tf-add-row-section {
  margin-top: var(--space-md);
}

/* CSV Modal */
.tf-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tf-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}

.tf-modal-content {
  position: relative;
  width: 90%;
  max-width: 500px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-3);
}

.tf-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border);
}

.tf-modal-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.tf-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.tf-modal-close:hover {
  color: var(--text-primary);
}

.tf-modal-body {
  padding: var(--space-lg);
}

.tf-csv-help {
  margin: 0 0 var(--space-md);
  font-size: 13px;
  color: var(--text-muted);
}

.tf-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--border);
  background: var(--bg-secondary);
}

/* Calculate Button */
.tf-calculate-section {
  text-align: center;
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: var(--space-lg) 0;
}

.tf-calculate-section .btn-lg {
  padding: 14px 32px;
  font-size: 16px;
}

/* Results Section */
.tf-results {
  animation: tf-fadeIn 0.3s ease;
}

@keyframes tf-fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Stats Grid */
.tf-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

@media (max-width: 900px) {
  .tf-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .tf-stats-grid {
    grid-template-columns: 1fr;
  }
}

.tf-stat-card {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-lg);
  text-align: center;
}

.tf-stat-icon {
  font-size: 24px;
  margin-bottom: 8px;
}

.tf-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.tf-stat-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tf-stat-highlight {
  background: linear-gradient(135deg, rgba(108, 140, 255, 0.1) 0%, rgba(108, 140, 255, 0.05) 100%);
  border-color: rgba(108, 140, 255, 0.3);
}

.tf-stat-highlight .tf-stat-value {
  color: var(--accent);
}

.tf-stat-success {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.1) 0%, rgba(52, 211, 153, 0.05) 100%);
  border-color: rgba(52, 211, 153, 0.3);
}

.tf-stat-success .tf-stat-value {
  color: var(--success);
}

.tf-stat-money {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(251, 191, 36, 0.05) 100%);
  border-color: rgba(251, 191, 36, 0.3);
}

.tf-stat-money .tf-stat-value {
  color: var(--warning);
}

/* Scenario Section */
.tf-scenario-section {
  margin-bottom: var(--space-xl);
}

.tf-scenario-section h4 {
  margin: 0 0 var(--space-md);
  font-size: 15px;
  font-weight: 600;
}

.tf-scenario-toggles {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.tf-scenario-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.tf-scenario-btn:hover {
  background: var(--glass-light);
  color: var(--text-primary);
}

.tf-scenario-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.scenario-icon {
  font-size: 16px;
}

.scenario-name {
  font-size: 13px;
  font-weight: 500;
}

/* Chart Section */
.tf-chart-section {
  margin-bottom: var(--space-xl);
}

.tf-chart-section h4 {
  margin: 0 0 var(--space-md);
  font-size: 15px;
  font-weight: 600;
}

.tf-chart-container {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-lg);
  height: 300px;
}

.tf-timeline-legend {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  margin-top: var(--space-md);
}

.tf-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.tf-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.tf-dot-conservative {
  background: #f59e0b;
}

.tf-dot-moderate {
  background: #6c8cff;
}

.tf-dot-optimistic {
  background: #34d399;
}

/* Text Chart Fallback */
.tf-text-chart {
  padding: var(--space-md);
}

.tf-text-chart-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border);
}

.tf-text-chart-row:last-child {
  border-bottom: none;
}

.tf-text-chart-label {
  font-weight: 600;
  min-width: 120px;
}

.tf-text-chart-value {
  color: var(--text-muted);
  font-size: 13px;
}

/* Breakdown Section */
.tf-breakdown-section {
  margin-bottom: var(--space-xl);
}

.tf-breakdown-section h4 {
  margin: 0 0 var(--space-md);
  font-size: 15px;
  font-weight: 600;
}

.tf-breakdown-table-container {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
}

.tf-breakdown-table {
  width: 100%;
  min-width: 700px;
}

.tf-breakdown-keyword {
  font-weight: 500;
}

.tf-target-traffic {
  color: var(--accent);
  font-weight: 600;
}

.tf-traffic-gain {
  color: var(--success);
  font-weight: 600;
}

/* Difficulty Badges */
.tf-difficulty-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.tf-difficulty-easy {
  background: rgba(52, 211, 153, 0.15);
  color: var(--success);
}

.tf-difficulty-medium {
  background: rgba(251, 191, 36, 0.15);
  color: var(--warning);
}

.tf-difficulty-hard {
  background: rgba(248, 113, 113, 0.15);
  color: var(--danger);
}

.tf-difficulty-very-hard {
  background: rgba(248, 113, 113, 0.25);
  color: var(--danger);
}

.tf-difficulty-none {
  background: var(--glass);
  color: var(--text-muted);
}

/* Opportunities Section */
.tf-opportunities-section {
  margin-bottom: var(--space-xl);
}

.tf-opportunities-section h4 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
}

.tf-opportunities-subtitle {
  margin: 0 0 var(--space-md);
  font-size: 13px;
  color: var(--text-muted);
}

.tf-opportunities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-md);
}

.tf-opportunity-card {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-md);
  transition: all var(--transition-fast);
}

.tf-opportunity-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.tf-opp-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-sm);
}

.tf-opp-medal {
  font-size: 18px;
}

.tf-opp-keyword {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tf-opp-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.tf-opp-stat {
  text-align: center;
}

.tf-opp-label {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.tf-opp-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.tf-opp-gain {
  color: var(--success);
}

.tf-opp-difficulty {
  text-align: center;
}

.tf-no-opportunities {
  text-align: center;
  color: var(--text-muted);
  padding: var(--space-lg);
}

/* Value Section */
.tf-value-section {
  margin-bottom: var(--space-lg);
}

.tf-value-section h4 {
  margin: 0 0 var(--space-md);
  font-size: 15px;
  font-weight: 600;
}

.tf-value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

@media (max-width: 800px) {
  .tf-value-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.tf-value-card {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-md);
  text-align: center;
}

.tf-value-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.tf-value-amount {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.tf-value-highlight {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.1) 0%, rgba(52, 211, 153, 0.05) 100%);
  border-color: rgba(52, 211, 153, 0.3);
}

.tf-value-highlight .tf-value-amount {
  color: var(--success);
}

/* Light Theme Overrides */
.theme-light .tf-card {
  background: #fff;
}

.theme-light .tf-card-header {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(139, 92, 246, 0.06) 100%);
}

.theme-light .tf-keywords-table th {
  background: #f8fafc;
}

.theme-light .tf-keywords-table input.field-sm {
  background: #fff;
}

.theme-light .tf-modal-content {
  background: #fff;
}

.theme-light .tf-modal-footer {
  background: #f8fafc;
}

.theme-light .tf-stat-card,
.theme-light .tf-value-card,
.theme-light .tf-opportunity-card,
.theme-light .tf-chart-container {
  background: #fff;
}

.theme-light .tf-scenario-btn {
  background: #fff;
}

.theme-light .tf-scenario-btn:hover {
  background: #f8fafc;
}

/* ============================================================
   Position Tracking (Cloud Sync) Styles
   ============================================================ */

.pt-card {
  margin-top: var(--space-lg);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%);
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.pt-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
}

.pt-header-content {
  flex: 1;
}

.pt-header-content h3 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 1.1rem;
  margin: 0;
}

.pt-icon {
  font-size: 1.2em;
}

.pt-badge {
  font-size: 0.65rem;
  padding: 2px 8px;
  background: linear-gradient(135deg, var(--success), var(--primary));
  color: white;
  border-radius: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pt-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 4px 0 0 0;
}

.pt-toggle-btn {
  white-space: nowrap;
}

.pt-toggle-icon {
  display: inline-block;
  transition: transform 0.2s ease;
}

.pt-card.expanded .pt-toggle-icon {
  transform: rotate(180deg);
}

.pt-body {
  padding-top: var(--space-md);
}

/* Stats Row */
.pt-stats-row {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}

.pt-stat-box {
  flex: 1;
  min-width: 100px;
  background: var(--bg-secondary);
  border-radius: var(--radius);
  padding: var(--space-md);
  text-align: center;
  border: 1px solid var(--border);
}

.pt-stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.pt-stat-value.pt-improved {
  color: var(--success);
}

.pt-stat-value.pt-declined {
  color: var(--danger);
}

.pt-stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

/* Actions Bar */
.pt-actions-bar {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}

.pt-actions-bar .field {
  margin: 0;
}

/* Add Section */
.pt-add-section {
  background: var(--bg-secondary);
  border-radius: var(--radius);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  border: 1px dashed var(--border);
}

.pt-add-form {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  align-items: flex-end;
}

.pt-add-form .field {
  margin: 0;
  min-width: 120px;
  flex: 1;
}

.pt-add-form #ptKeywordInput {
  flex: 2;
  min-width: 180px;
}

.pt-add-form #ptDomainInput {
  flex: 2;
  min-width: 150px;
}

.pt-import-row {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  flex-wrap: wrap;
}

/* Table Styles */
.pt-table-container {
  overflow-x: auto;
  margin-bottom: var(--space-md);
}

.pt-keywords-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.pt-keywords-table th {
  background: var(--bg-secondary);
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border);
}

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

.pt-keywords-table tr:hover {
  background: rgba(108, 140, 255, 0.05);
}

.pt-col-keyword { min-width: 150px; }
.pt-col-domain { min-width: 120px; }
.pt-col-position { width: 80px; text-align: center; }
.pt-col-change { width: 80px; text-align: center; }
.pt-col-serp { min-width: 150px; }
.pt-col-checked { min-width: 130px; }
.pt-col-actions { width: 100px; text-align: center; }

/* Position badges */
.pt-position {
  display: inline-block;
  min-width: 40px;
  padding: 4px 10px;
  border-radius: var(--radius);
  font-weight: 600;
  text-align: center;
}

.pt-position-top10 {
  background: rgba(16, 185, 129, 0.15);
  color: var(--success);
}

.pt-position-top30 {
  background: rgba(59, 130, 246, 0.15);
  color: var(--primary);
}

.pt-position-top50 {
  background: rgba(251, 191, 36, 0.15);
  color: #d97706;
}

.pt-position-low {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
}

.pt-position-none {
  color: var(--text-muted);
  font-style: italic;
}

/* Change indicators */
.pt-change {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: 600;
}

.pt-change-up {
  color: var(--success);
}

.pt-change-down {
  color: var(--danger);
}

.pt-change-neutral {
  color: var(--text-muted);
}

/* SERP Features */
.pt-serp-features {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.pt-serp-badge {
  font-size: 0.7rem;
  padding: 2px 6px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
}

/* Empty State */
.pt-empty-state {
  text-align: center;
  padding: var(--space-xl);
}

.pt-empty-state h4 {
  margin: 0 0 var(--space-sm);
  color: var(--text);
}

.pt-empty-state p {
  color: var(--text-muted);
  margin: 0;
}

/* History Card */
.pt-history-card {
  margin-top: var(--space-md);
  background: var(--bg-secondary);
}

.pt-history-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pt-history-actions {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.pt-chart-container {
  position: relative;
  height: 250px;
  margin-bottom: var(--space-md);
}

.pt-history-stats {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

.pt-history-stat {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.pt-history-stat strong {
  color: var(--text);
}

/* Alerts Section */
.pt-alerts-section {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

.pt-alerts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

.pt-alerts-header h4 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.pt-alerts-list {
  max-height: 200px;
  overflow-y: auto;
}

.pt-alert-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius);
  margin-bottom: var(--space-xs);
  font-size: 0.85rem;
}

.pt-alert-icon {
  font-size: 1.1em;
}

.pt-alert-drop {
  background: rgba(239, 68, 68, 0.1);
  border-left: 3px solid var(--danger);
}

.pt-alert-gain {
  background: rgba(16, 185, 129, 0.1);
  border-left: 3px solid var(--success);
}

.pt-alert-lost {
  background: rgba(251, 191, 36, 0.1);
  border-left: 3px solid #f59e0b;
}

.pt-alert-found {
  background: rgba(59, 130, 246, 0.1);
  border-left: 3px solid var(--primary);
}

.pt-alert-keyword {
  font-weight: 600;
}

.pt-alert-change {
  margin-left: auto;
  font-weight: 600;
}

.pt-alert-time {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.pt-alerts-empty {
  text-align: center;
  color: var(--text-muted);
  padding: var(--space-md);
  font-style: italic;
}

/* Row Actions */
.pt-row-actions {
  display: flex;
  gap: 4px;
  justify-content: center;
}

.pt-row-actions .btn-sm {
  padding: 4px 8px;
  font-size: 0.8rem;
}

/* Light Theme */
.theme-light .pt-card {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.03) 0%, rgba(59, 130, 246, 0.03) 100%);
}

.theme-light .pt-stat-box,
.theme-light .pt-add-section {
  background: #fff;
}

.theme-light .pt-keywords-table th {
  background: #f8fafc;
}

.theme-light .pt-history-card {
  background: #fff;
}

/* Responsive */
@media (max-width: 768px) {
  .pt-stats-row {
    flex-wrap: wrap;
  }

  .pt-stat-box {
    min-width: calc(50% - var(--space-sm));
  }

  .pt-add-form {
    flex-direction: column;
  }

  .pt-add-form .field,
  .pt-add-form #ptKeywordInput,
  .pt-add-form #ptDomainInput {
    width: 100%;
    min-width: unset;
  }

  .pt-actions-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .pt-history-stats {
    flex-direction: column;
    gap: var(--space-sm);
  }
}

/* ============================================================
   Collaborative Editing Styles
   ============================================================ */

/* Session Bar at top of Editor */
.collab-session-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: linear-gradient(135deg, rgba(108, 140, 255, 0.15) 0%, rgba(167, 139, 250, 0.1) 100%);
  border: 1px solid rgba(108, 140, 255, 0.3);
  border-radius: var(--radius);
  margin-bottom: var(--space-md);
  animation: collabBarFadeIn 0.3s ease;
}

@keyframes collabBarFadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.collab-session-info {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.collab-pulse {
  width: 8px;
  height: 8px;
  background: var(--success);
  border-radius: 50%;
  animation: collabPulse 2s infinite;
}

@keyframes collabPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

.collab-status-text {
  font-weight: 600;
  color: var(--accent);
  font-size: var(--font-size-sm);
}

.collab-people-count {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.collab-session-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.collab-avatars-preview {
  display: flex;
  align-items: center;
}

.collab-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  border: 2px solid var(--surface);
  margin-left: -8px;
  transition: transform var(--transition-fast);
}

.collab-avatar:first-child {
  margin-left: 0;
}

.collab-avatar:hover {
  transform: scale(1.1);
  z-index: 1;
}

.collab-leave-btn:hover {
  background: rgba(248, 113, 113, 0.2) !important;
  color: var(--danger);
}

/* Share Button in Panel Header */
.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
}

.panel-header-left {
  flex: 1;
  min-width: 0;
}

.panel-header-actions {
  flex-shrink: 0;
}

.collab-share-btn {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-grad-mid) 100%);
  border: none;
  color: #fff;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  transition: all var(--transition-fast);
}

.collab-share-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(108, 140, 255, 0.4);
}

.collab-share-btn .share-icon {
  font-size: 14px;
}

/* Collaboration Modal */
.collab-modal-content {
  max-width: 480px;
}

.collab-mode-toggle {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface);
  border-radius: var(--radius);
  margin-bottom: var(--space-lg);
}

.collab-mode-btn {
  flex: 1;
  padding: 10px 16px;
  background: transparent;
  border: none;
  border-radius: calc(var(--radius) - 2px);
  color: var(--text-secondary);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.collab-mode-btn:hover {
  color: var(--text-primary);
}

.collab-mode-btn.active {
  background: var(--accent);
  color: #fff;
}

.collab-panel {
  animation: collabPanelFade 0.2s ease;
}

@keyframes collabPanelFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.collab-info-box {
  padding: 12px 16px;
  background: var(--glass);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.collab-info-box p {
  margin: 0;
}

.collab-success-box {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 12px 16px;
  background: var(--success-bg);
  border: 1px solid rgba(52, 211, 153, 0.3);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-lg);
  color: var(--success);
  font-weight: 500;
}

.collab-success-box .success-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--success);
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
}

.collab-share-section {
  margin-bottom: var(--space-md);
}

.collab-link-row {
  display: flex;
  gap: var(--space-xs);
}

.collab-link-row .field {
  flex: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--font-size-sm);
}

.collab-qr-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-md);
  background: var(--glass);
  border-radius: var(--radius);
  margin-bottom: var(--space-md);
}

.collab-qr-section canvas {
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 8px;
}

.collab-qr-hint {
  margin-top: var(--space-sm);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.collab-collaborators-section {
  margin-bottom: var(--space-lg);
}

.collab-collaborators-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  max-height: 200px;
  overflow-y: auto;
}

.collab-collaborator-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 8px 12px;
  background: var(--glass);
  border-radius: var(--radius-sm);
}

.collab-collaborator-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #fff;
  font-size: 14px;
}

.collab-collaborator-info {
  flex: 1;
  min-width: 0;
}

.collab-collaborator-name {
  font-weight: 500;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.collab-collaborator-status {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.collab-collaborator-badge {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
}

.collab-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.collab-actions .btn {
  flex: 1;
}

.collab-end-btn {
  color: var(--danger) !important;
}

.collab-end-btn:hover {
  background: var(--danger-bg) !important;
}

/* My Sessions List */
.collab-my-sessions {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

.collab-my-sessions summary {
  cursor: pointer;
  user-select: none;
}

.collab-sessions-list {
  margin-top: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.collab-sessions-empty {
  padding: var(--space-md);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.collab-session-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--glass);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.collab-session-item:hover {
  background: var(--glass-light);
}

.collab-session-item-info {
  flex: 1;
  min-width: 0;
}

.collab-session-item-title {
  font-weight: 500;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

.collab-session-item-meta {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.collab-session-item-count {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

/* Collaborators Sidebar */
.collab-sidebar {
  position: fixed;
  top: 70px;
  right: 0;
  width: 280px;
  height: calc(100vh - 70px);
  background: var(--surface);
  border-left: 1px solid var(--border);
  z-index: 100;
  display: flex;
  flex-direction: column;
  animation: collabSidebarSlideIn 0.3s ease;
}

@keyframes collabSidebarSlideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.collab-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  border-bottom: 1px solid var(--border);
}

.collab-sidebar-header h3 {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 600;
}

.collab-sidebar-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.collab-sidebar-footer {
  padding: var(--space-md);
  border-top: 1px solid var(--border);
}

/* Cursor Indicators */
.collab-cursor {
  position: absolute;
  pointer-events: none;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  animation: collabCursorFade 0.2s ease;
}

@keyframes collabCursorFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.collab-cursor-caret {
  width: 2px;
  height: 20px;
  animation: collabCaretBlink 1s infinite;
}

@keyframes collabCaretBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.3; }
}

.collab-cursor-label {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  transform: translateY(-100%);
}

/* Selection highlight for collaborators */
.collab-selection {
  position: absolute;
  pointer-events: none;
  opacity: 0.3;
}

/* Light Theme */
.theme-light .collab-session-bar {
  background: linear-gradient(135deg, rgba(108, 140, 255, 0.1) 0%, rgba(167, 139, 250, 0.08) 100%);
}

.theme-light .collab-collaborator-item,
.theme-light .collab-session-item {
  background: rgba(0, 0, 0, 0.03);
}

.theme-light .collab-session-item:hover {
  background: rgba(0, 0, 0, 0.06);
}

.theme-light .collab-sidebar {
  background: var(--bg-secondary);
}

/* Mobile */
@media (max-width: 768px) {
  .collab-session-bar {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .collab-sidebar {
    width: 100%;
    top: 60px;
    height: calc(100vh - 60px);
  }

  .collab-qr-section {
    display: none;
  }

  .panel-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }

  .panel-header-actions {
    align-self: flex-start;
  }
}

/* ============================================================
   Content Comments System
   ============================================================ */

/* Preview Header Actions */
.preview-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-left: auto;
}

.card-header {
  display: flex;
  align-items: center;
}

/* Comments Toggle Button */
#toggleCommentsBtn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
}

.comments-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  color: #fff;
  background: var(--primary);
  border-radius: 9px;
}

/* Comments Sidebar */
.comments-sidebar {
  position: fixed;
  top: var(--header-height, 60px);
  right: 0;
  width: 360px;
  max-width: 100vw;
  height: calc(100vh - var(--header-height, 60px));
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  animation: slideInRight 0.2s ease-out;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.comments-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
}

.comments-sidebar-header h3 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 600;
}

.comments-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* Comments Filters */
.comments-filters {
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border);
  background: var(--bg-tertiary);
}

.comment-filter-btn {
  padding: 4px 12px;
  font-size: var(--font-size-sm);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.comment-filter-btn:hover {
  background: var(--glass);
  color: var(--text-primary);
}

.comment-filter-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Comments List */
.comments-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md);
}

.comments-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  text-align: center;
  color: var(--text-muted);
}

.comments-empty-state .empty-icon {
  font-size: 48px;
  margin-bottom: var(--space-md);
  opacity: 0.5;
}

.comments-empty-state p {
  margin: 0;
}

.comments-empty-state .empty-hint {
  font-size: var(--font-size-sm);
  margin-top: var(--space-xs);
  opacity: 0.8;
}

/* Comment Card */
.comment-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  overflow: hidden;
  transition: all var(--transition-fast);
}

.comment-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.comment-card.resolved {
  opacity: 0.7;
}

.comment-card.resolved .comment-text {
  text-decoration: line-through;
  color: var(--text-muted);
}

.comment-card.highlighted {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(108, 140, 255, 0.2);
}

.comment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border);
}

.comment-author {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.comment-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}

.comment-author-name {
  font-weight: 500;
  font-size: var(--font-size-sm);
}

.comment-timestamp {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.comment-actions {
  display: flex;
  gap: 4px;
}

.comment-action-btn {
  padding: 4px 8px;
  font-size: var(--font-size-xs);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.comment-action-btn:hover {
  background: var(--glass);
  color: var(--text-primary);
}

.comment-action-btn.resolve-btn:hover {
  color: var(--success);
}

.comment-action-btn.delete-btn:hover {
  color: var(--danger);
}

.comment-body {
  padding: var(--space-md);
}

.comment-selection-excerpt {
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-sm);
  background: var(--glass);
  border-left: 3px solid var(--primary);
  font-size: var(--font-size-sm);
  font-style: italic;
  color: var(--text-secondary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  max-height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.comment-text {
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Comment Replies */
.comment-replies {
  padding: 0 var(--space-md) var(--space-md);
  border-top: 1px solid var(--border);
  background: var(--bg-tertiary);
}

.comment-reply {
  padding: var(--space-sm) 0;
  padding-left: var(--space-md);
  border-left: 2px solid var(--border);
  margin-top: var(--space-sm);
}

.comment-reply:first-child {
  margin-top: var(--space-md);
}

.reply-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.reply-author {
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.reply-timestamp {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.reply-text {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.4;
}

.reply-actions {
  display: flex;
  gap: 4px;
  margin-top: var(--space-xs);
}

/* Reply Input */
.comment-reply-form {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px dashed var(--border);
}

.reply-input-row {
  display: flex;
  gap: var(--space-sm);
}

.reply-input {
  flex: 1;
  padding: var(--space-sm);
  font-size: var(--font-size-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  resize: none;
}

.reply-input:focus {
  outline: none;
  border-color: var(--primary);
}

/* Comment Modal */
.comment-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comment-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}

.comment-modal-content {
  position: relative;
  width: 90%;
  max-width: 500px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  animation: modalFadeIn 0.2s ease-out;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.comment-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  border-bottom: 1px solid var(--border);
}

.comment-modal-header h3 {
  margin: 0;
  font-size: var(--font-size-md);
}

.comment-modal-close {
  padding: 4px 8px;
  font-size: 20px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.comment-modal-close:hover {
  color: var(--text-primary);
}

.comment-modal-body {
  padding: var(--space-md);
}

.comment-selection-preview {
  margin-bottom: var(--space-md);
}

.selection-text-preview {
  padding: var(--space-sm) var(--space-md);
  background: var(--glass);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--font-size-sm);
  font-style: italic;
  color: var(--text-secondary);
  max-height: 80px;
  overflow-y: auto;
}

.comment-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-top: 1px solid var(--border);
  background: var(--bg-secondary);
}

/* Comment Selection Tooltip */
.comment-selection-tooltip {
  position: absolute;
  z-index: 100;
  padding: var(--space-xs);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: tooltipFadeIn 0.15s ease-out;
}

@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Highlighted Text in Preview */
.comment-highlight {
  background: rgba(255, 220, 100, 0.4);
  border-bottom: 2px solid rgba(255, 180, 0, 0.6);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.comment-highlight:hover {
  background: rgba(255, 220, 100, 0.6);
}

.comment-highlight.active {
  background: rgba(108, 140, 255, 0.3);
  border-bottom-color: var(--primary);
}

/* Resolved highlight */
.comment-highlight.resolved {
  background: rgba(100, 200, 100, 0.2);
  border-bottom: 2px dashed rgba(100, 200, 100, 0.4);
}

/* Resolved Comment Card */
.comment-card.resolved .comment-header {
  background: rgba(100, 200, 100, 0.1);
}

.resolved-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  background: rgba(100, 200, 100, 0.2);
  color: var(--success);
  border-radius: var(--radius-full);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .comments-sidebar {
    width: 100%;
    border-left: none;
  }

  .comment-modal-content {
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
  }
}

/* Light Theme Overrides for Comments */
.theme-light .comments-sidebar {
  background: #fff;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.08);
}

.theme-light .comment-card {
  background: #fff;
}

.theme-light .comment-modal-content {
  background: #fff;
}

.theme-light .comment-highlight {
  background: rgba(255, 200, 50, 0.35);
  border-bottom-color: rgba(220, 150, 0, 0.5);
}

.theme-light .comment-highlight:hover {
  background: rgba(255, 200, 50, 0.5);
}

.theme-light .comment-highlight.active {
  background: rgba(108, 140, 255, 0.2);
}

/* ============================================================
   AI IMAGE GENERATOR STYLES
   ============================================================ */

/* Prompt Tips */
.prompt-tips {
  margin-top: var(--space-sm);
}

.prompt-tips-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: var(--font-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.prompt-tips-toggle:hover {
  background: var(--surface-hover);
  border-color: var(--primary);
  color: var(--primary);
}

.prompt-tips-toggle .toggle-icon {
  font-size: 1.1em;
}

.prompt-tips-content {
  margin-top: var(--space-sm);
  padding: var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  animation: fadeSlideIn 0.2s ease-out;
}

.tips-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tips-list li {
  position: relative;
  padding: var(--space-xs) 0 var(--space-xs) var(--space-lg);
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.tips-list li::before {
  content: '•';
  position: absolute;
  left: var(--space-xs);
  color: var(--primary);
}

.tips-list li strong {
  color: var(--text);
}

/* Advanced Options */
.image-advanced-options {
  margin-top: var(--space-md);
}

.image-advanced-options summary {
  cursor: pointer;
  user-select: none;
}

.image-advanced-options[open] summary {
  margin-bottom: var(--space-sm);
}

.advanced-options-content {
  padding: var(--space-sm);
  background: var(--surface);
  border-radius: var(--radius-md);
}

/* Cost Indicator */
.image-cost-indicator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
}

.cost-label {
  color: var(--text-muted);
}

.cost-value {
  font-weight: 600;
  color: var(--success);
}

/* Loading Animation */
.image-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  margin-top: var(--space-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.image-loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.image-loading-text {
  margin-top: var(--space-md);
  font-size: var(--font-md);
  font-weight: 500;
  color: var(--text);
}

.image-loading-subtext {
  margin-top: var(--space-xs);
  font-size: var(--font-sm);
  color: var(--text-muted);
}

/* Result Card */
.image-result-card {
  overflow: hidden;
}

.image-result-preview {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.image-result-preview img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: contain;
}

.image-result-info {
  padding: var(--space-md);
}

.image-result-prompt {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-sm);
}

.image-result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.meta-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--surface-hover);
  border-radius: var(--radius-full);
  font-size: var(--font-xs);
  color: var(--text-secondary);
}

.meta-icon {
  font-size: 0.9em;
}

.image-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-top: 1px solid var(--border);
}

/* History Section */
.image-history-section {
  margin-top: var(--space-xl);
}

.image-history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

.image-history-header h3 {
  margin: 0;
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--text);
}

.image-history-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-md);
}

.image-history-item {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all var(--transition-fast);
}

.image-history-item:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.history-item-img {
  position: relative;
  aspect-ratio: 1;
  cursor: pointer;
  overflow: hidden;
}

.history-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-fast);
}

.image-history-item:hover .history-item-img img {
  transform: scale(1.05);
}

.history-item-info {
  padding: var(--space-sm);
}

.history-item-prompt {
  font-size: var(--font-xs);
  color: var(--text-secondary);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.history-item-meta {
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
  font-size: 10px;
  color: var(--text-muted);
}

.history-item-meta span {
  padding: 2px 6px;
  background: var(--surface-hover);
  border-radius: var(--radius-sm);
}

.history-item-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-xs);
  border-top: 1px solid var(--border);
  background: var(--surface-hover);
}

.history-item-actions .btn {
  padding: var(--space-xs);
  min-width: auto;
}

/* History Empty State */
.image-history-empty {
  text-align: center;
  padding: var(--space-xl);
  color: var(--text-muted);
}

.image-history-empty .empty-icon {
  font-size: 2rem;
  margin-bottom: var(--space-sm);
  opacity: 0.5;
}

.image-history-empty p {
  margin: 0;
  font-size: var(--font-sm);
}

/* Empty Features Grid */
.empty-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  text-align: left;
}

.empty-feature {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm);
  background: var(--surface);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.feature-icon {
  font-size: 1.2em;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .image-history-gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .image-result-actions {
    flex-direction: column;
  }

  .image-result-actions .btn {
    width: 100%;
  }

  .empty-features {
    grid-template-columns: 1fr;
  }
}

/* Light Theme Overrides */
.theme-light .prompt-tips-content {
  background: #f8f9fa;
}

.theme-light .image-cost-indicator {
  background: #f8f9fa;
}

.theme-light .image-loading {
  background: #f8f9fa;
}

.theme-light .image-history-item {
  background: #fff;
}

.theme-light .image-history-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.theme-light .history-item-actions {
  background: #f8f9fa;
}

/* ============================================
   Ads Generator Tab Styles
   ============================================ */

.ads-generator-container {
  padding: var(--space-lg);
  max-width: 1600px;
  margin: 0 auto;
}

/* Ads Subtabs */
.ads-subtabs {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
  padding: var(--space-xs);
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

.ads-subtab-btn {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-weight: 500;
  font-size: var(--font-sm);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
}

.ads-subtab-btn:hover {
  color: var(--text);
  background: var(--surface-hover);
}

.ads-subtab-btn.active {
  background: var(--primary);
  color: white;
}

/* Subtab Content */
.ads-subtab-content {
  display: none;
}

.ads-subtab-content.active {
  display: block;
}

/* Ads Layout */
.ads-layout {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: var(--space-lg);
}

@media (max-width: 1024px) {
  .ads-layout {
    grid-template-columns: 1fr;
  }
}

.ads-input-panel,
.ads-results-panel {
  min-width: 0;
}

/* Platform Checkboxes */
.ads-platform-checkboxes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

.ads-platform-checkboxes .checkbox-label {
  padding: var(--space-sm);
  background: var(--surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  transition: all 0.2s ease;
}

.ads-platform-checkboxes .checkbox-label:has(input:checked) {
  border-color: var(--primary);
  background: var(--surface-hover);
}

/* Character Limits Grid */
.char-limits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

.char-limit-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--surface-hover);
  border-radius: var(--radius-md);
}

.char-limit-item .platform-icon {
  font-size: 1.5rem;
}

.char-limit-item .limit-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.char-limit-item .limit-info strong {
  font-size: var(--font-sm);
}

.char-limit-item .limit-info span {
  font-size: var(--font-xs);
  color: var(--text-muted);
}

/* Ads Placeholder */
.ads-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 500px;
  background: var(--surface);
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
}

.ads-placeholder .placeholder-content {
  text-align: center;
  max-width: 400px;
  padding: var(--space-xl);
}

.ads-placeholder .placeholder-icon {
  font-size: 4rem;
  margin-bottom: var(--space-md);
}

.ads-placeholder h3 {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-lg);
}

.ads-placeholder p {
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}

.ads-placeholder .placeholder-features {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.ads-placeholder .placeholder-features li {
  padding: var(--space-xs) 0;
  color: var(--text-muted);
}

.ads-placeholder .placeholder-tip {
  margin-top: var(--space-md);
  padding: var(--space-sm);
  background: var(--surface-hover);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  color: var(--text-muted);
}

/* Ad Preview Cards */
.ad-preview-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-md);
  overflow: hidden;
}

.ad-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  background: var(--surface-hover);
  border-bottom: 1px solid var(--border);
}

.platform-badge {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: 600;
}

.platform-badge.google { color: #4285F4; }
.platform-badge.facebook { color: #1877F2; }
.platform-badge.linkedin { color: #0A66C2; }
.platform-badge.twitter { color: #1DA1F2; }

/* Google Search Ad Preview */
.google-search-preview {
  padding: var(--space-md);
  margin: var(--space-md);
  background: white;
  border-radius: var(--radius-md);
  font-family: Arial, sans-serif;
}

.google-ad-label {
  display: inline-block;
  padding: 2px 6px;
  background: #F1F3F4;
  border: 1px solid #dadce0;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
  color: #202124;
  margin-bottom: 4px;
}

.google-ad-url {
  color: #202124;
  font-size: 14px;
  margin-bottom: 4px;
}

.google-ad-headline {
  color: #1a0dab;
  font-size: 20px;
  line-height: 1.3;
  margin-bottom: 4px;
  cursor: pointer;
}

.google-ad-headline:hover {
  text-decoration: underline;
}

.google-ad-description {
  color: #4d5156;
  font-size: 14px;
  line-height: 1.58;
}

/* Facebook Feed Preview */
.facebook-feed-preview {
  padding: var(--space-md);
  margin: var(--space-md);
  background: white;
  border-radius: var(--radius-md);
  font-family: Helvetica, Arial, sans-serif;
}

.fb-preview-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.fb-avatar {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #1877F2, #42A5F5);
  border-radius: 50%;
}

.fb-page-info {
  display: flex;
  flex-direction: column;
}

.fb-page-name {
  font-weight: 600;
  color: #050505;
  font-size: 15px;
}

.fb-post-time {
  color: #65676B;
  font-size: 13px;
}

.fb-primary-text {
  color: #050505;
  font-size: 15px;
  line-height: 1.33;
  margin-bottom: var(--space-sm);
}

.fb-image-placeholder {
  background: #F0F2F5;
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  text-align: center;
  color: #65676B;
  margin-bottom: var(--space-sm);
}

.fb-image-placeholder span {
  font-size: 2rem;
  display: block;
  margin-bottom: var(--space-xs);
}

.fb-link-preview {
  padding: var(--space-sm);
  background: #F0F2F5;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
}

.fb-link-headline {
  font-weight: 600;
  color: #050505;
  font-size: 15px;
  margin-bottom: 2px;
}

.fb-link-description {
  color: #65676B;
  font-size: 14px;
}

.fb-cta-button {
  display: inline-block;
  padding: var(--space-sm) var(--space-md);
  background: #E4E6EB;
  border-radius: var(--radius-sm);
  font-weight: 600;
  color: #050505;
  font-size: 15px;
}

/* LinkedIn Sponsored Preview */
.linkedin-sponsored-preview {
  padding: var(--space-md);
  margin: var(--space-md);
  background: white;
  border-radius: var(--radius-md);
  font-family: -apple-system, system-ui, sans-serif;
}

.li-preview-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.li-avatar {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #0A66C2, #004182);
  border-radius: var(--radius-sm);
}

.li-company-info {
  display: flex;
  flex-direction: column;
}

.li-company-name {
  font-weight: 600;
  color: rgba(0, 0, 0, 0.9);
  font-size: 14px;
}

.li-followers {
  color: rgba(0, 0, 0, 0.6);
  font-size: 12px;
}

.li-intro-text {
  color: rgba(0, 0, 0, 0.9);
  font-size: 14px;
  line-height: 1.42;
  margin-bottom: var(--space-sm);
}

.li-image-placeholder {
  background: #F3F6F8;
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  text-align: center;
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: var(--space-sm);
}

.li-image-placeholder span {
  font-size: 2rem;
  display: block;
  margin-bottom: var(--space-xs);
}

.li-headline {
  font-weight: 600;
  color: rgba(0, 0, 0, 0.9);
  font-size: 16px;
}

/* Twitter Card Preview */
.twitter-card-preview {
  padding: var(--space-md);
  margin: var(--space-md);
  background: white;
  border-radius: var(--radius-lg);
  font-family: -apple-system, system-ui, sans-serif;
}

.tw-preview-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.tw-avatar {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #1DA1F2, #0C85D0);
  border-radius: 50%;
  flex-shrink: 0;
}

.tw-account-info {
  display: flex;
  flex-direction: column;
}

.tw-name {
  font-weight: 700;
  color: #0F1419;
  font-size: 15px;
}

.tw-handle {
  color: #536471;
  font-size: 15px;
}

.tw-text {
  color: #0F1419;
  font-size: 15px;
  line-height: 1.3125;
  margin-bottom: var(--space-sm);
}

.tw-image-placeholder {
  background: #EFF3F4;
  border-radius: 16px;
  padding: var(--space-lg);
  text-align: center;
  color: #536471;
}

.tw-image-placeholder span {
  font-size: 2rem;
}

/* Ad Elements Section */
.ad-elements-section {
  padding: var(--space-md);
  border-top: 1px solid var(--border);
}

.ad-elements-section h4 {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-sm);
  color: var(--text-muted);
}

.ad-elements-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.ad-element-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm);
  background: var(--surface-hover);
  border-radius: var(--radius-md);
  gap: var(--space-sm);
}

.ad-element-text {
  flex: 1;
  font-size: var(--font-sm);
}

.ad-element-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.ad-element-chars {
  font-size: var(--font-xs);
  color: var(--text-muted);
  padding: 2px 8px;
  background: var(--surface);
  border-radius: var(--radius-sm);
}

.ad-element-chars.warning {
  color: var(--error);
  background: rgba(239, 68, 68, 0.1);
}

.ad-element-copy {
  padding: var(--space-xs);
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.ad-element-copy:hover {
  opacity: 1;
}

/* Ad Variations */
.ad-variations-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.ad-variation-card {
  padding: var(--space-md);
  background: var(--surface-hover);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--primary);
}

.ad-variation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}

.ad-variation-number {
  font-weight: 600;
  color: var(--primary);
}

.ad-variation-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.ad-variation-field {
  display: flex;
  gap: var(--space-sm);
}

.ad-variation-label {
  font-size: var(--font-xs);
  color: var(--text-muted);
  min-width: 80px;
}

.ad-variation-value {
  font-size: var(--font-sm);
  flex: 1;
}

/* Headlines A/B Styles */
.headline-angles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xs);
}

.headline-angles-grid .checkbox-label {
  padding: var(--space-xs) var(--space-sm);
  background: var(--surface);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  transition: all 0.2s ease;
}

.headline-angles-grid .checkbox-label:has(input:checked) {
  background: var(--surface-hover);
}

.headlines-sort-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border);
}

.headlines-sort-bar span {
  font-size: var(--font-sm);
  color: var(--text-muted);
}

.sort-btn {
  padding: var(--space-xs) var(--space-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  cursor: pointer;
  transition: all 0.2s ease;
}

.sort-btn:hover {
  background: var(--surface-hover);
}

.sort-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.headlines-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.headline-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.headline-item:hover {
  border-color: var(--primary);
}

.headline-rank {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 50px;
}

.headline-rank-number {
  font-size: var(--font-xl);
  font-weight: 700;
  color: var(--primary);
}

.headline-rank-label {
  font-size: var(--font-xs);
  color: var(--text-muted);
}

.headline-content {
  flex: 1;
  min-width: 0;
}

.headline-text {
  font-size: var(--font-md);
  font-weight: 500;
  margin-bottom: var(--space-xs);
}

.headline-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.headline-angle {
  padding: 2px 8px;
  background: var(--surface-hover);
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  color: var(--text-muted);
}

.headline-chars {
  font-size: var(--font-xs);
  color: var(--text-muted);
}

.headline-chars.warning {
  color: var(--error);
}

.headline-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
}

.headline-score-value {
  font-size: var(--font-lg);
  font-weight: 700;
}

.headline-score-value.high { color: var(--success); }
.headline-score-value.medium { color: var(--warning); }
.headline-score-value.low { color: var(--error); }

.headline-score-label {
  font-size: var(--font-xs);
  color: var(--text-muted);
}

.headline-actions {
  display: flex;
  gap: var(--space-xs);
}

.headline-copy-btn {
  padding: var(--space-xs) var(--space-sm);
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.headline-copy-btn:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.testing-strategy-content {
  padding: var(--space-md);
  background: var(--surface-hover);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  line-height: 1.6;
}

/* Extensions Styles */
.extensions-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.ext-info-item {
  padding: var(--space-sm);
  background: var(--surface-hover);
  border-radius: var(--radius-md);
}

.ext-info-item strong {
  display: block;
  margin-bottom: 2px;
}

.ext-info-item p {
  margin: 0;
  font-size: var(--font-sm);
  color: var(--text-muted);
}

.sitelinks-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.sitelink-item {
  display: flex;
  justify-content: space-between;
  padding: var(--space-md);
  background: var(--surface-hover);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--primary);
}

.sitelink-content {
  flex: 1;
}

.sitelink-text {
  font-weight: 600;
  color: var(--primary);
  margin-bottom: var(--space-xs);
}

.sitelink-desc {
  font-size: var(--font-sm);
  color: var(--text-muted);
  line-height: 1.4;
}

.sitelink-url {
  font-size: var(--font-xs);
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

.callouts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}

@media (max-width: 768px) {
  .callouts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.callout-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm);
  background: var(--surface-hover);
  border-radius: var(--radius-md);
  gap: var(--space-xs);
}

.callout-text {
  font-size: var(--font-sm);
  font-weight: 500;
}

.callout-chars {
  font-size: var(--font-xs);
  color: var(--text-muted);
}

.snippets-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.snippet-item {
  padding: var(--space-md);
  background: var(--surface-hover);
  border-radius: var(--radius-md);
}

.snippet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}

.snippet-type {
  font-weight: 600;
  color: var(--primary);
}

.snippet-values {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.snippet-value {
  padding: var(--space-xs) var(--space-sm);
  background: var(--surface);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
}

.recommendations-content {
  padding: var(--space-md);
  background: var(--surface-hover);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  line-height: 1.6;
}

/* Ads Status */
.ads-status {
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
}

.ads-status.error {
  background: rgba(239, 68, 68, 0.1);
  color: var(--error);
}

.ads-status.success {
  background: rgba(34, 197, 94, 0.1);
  color: var(--success);
}

/* Dark mode adjustments for ad previews */
.theme-light .google-search-preview,
.theme-light .facebook-feed-preview,
.theme-light .linkedin-sponsored-preview,
.theme-light .twitter-card-preview {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ============================================
   Advanced Ads Tools - Part 2
   ============================================ */

/* Benchmark Display */
.benchmark-display {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

.benchmark-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm);
  background: var(--surface-hover);
  border-radius: var(--radius-md);
}

.benchmark-label {
  font-size: var(--font-sm);
  color: var(--text-muted);
}

.benchmark-value {
  font-weight: 600;
  color: var(--primary);
}

/* Budget Summary */
.budget-summary-card .card-body {
  padding: var(--space-lg);
}

.budget-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

@media (max-width: 768px) {
  .budget-summary-grid {
    grid-template-columns: 1fr;
  }
}

.budget-metric {
  text-align: center;
  padding: var(--space-md);
  background: var(--surface-hover);
  border-radius: var(--radius-md);
}

.budget-metric.highlight {
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: white;
}

.budget-metric .metric-value {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: var(--space-xs);
}

.budget-metric .metric-label {
  font-size: var(--font-sm);
  opacity: 0.8;
}

/* Results Grid */
.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-md);
}

.result-item {
  text-align: center;
  padding: var(--space-md);
  background: var(--surface-hover);
  border-radius: var(--radius-md);
}

.result-item .result-value {
  display: block;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: var(--space-xs);
}

.result-item .result-label {
  font-size: var(--font-sm);
  color: var(--text-muted);
}

/* ROAS Scenarios */
.roas-scenarios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

@media (max-width: 900px) {
  .roas-scenarios-grid {
    grid-template-columns: 1fr;
  }
}

.roas-scenario-card {
  padding: var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: all 0.2s ease;
}

.roas-scenario-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.roas-scenario-card.conservative {
  border-left: 4px solid #f59e0b;
}

.roas-scenario-card.moderate {
  border-left: 4px solid #10b981;
}

.roas-scenario-card.optimistic {
  border-left: 4px solid #3b82f6;
}

.scenario-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border);
}

.scenario-label {
  font-weight: 600;
  font-size: var(--font-md);
}

.scenario-roas {
  font-size: 1.5rem;
  font-weight: 700;
}

.roas-scenario-card.conservative .scenario-roas {
  color: #f59e0b;
}

.roas-scenario-card.moderate .scenario-roas {
  color: #10b981;
}

.roas-scenario-card.optimistic .scenario-roas {
  color: #3b82f6;
}

.scenario-metrics {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.scenario-metric {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-sm);
  padding: var(--space-xs) 0;
}

.scenario-metric .metric-name {
  color: var(--text-muted);
}

.scenario-metric .metric-val {
  font-weight: 500;
}

/* Break-Even Analysis */
.break-even-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

@media (max-width: 768px) {
  .break-even-grid {
    grid-template-columns: 1fr;
  }
}

.break-even-item {
  text-align: center;
  padding: var(--space-md);
  background: var(--surface-hover);
  border-radius: var(--radius-md);
}

.break-even-item .be-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--warning);
  margin-bottom: var(--space-xs);
}

.break-even-item .be-label {
  font-size: var(--font-sm);
  color: var(--text-muted);
}

.break-even-description {
  padding: var(--space-md);
  background: rgba(245, 158, 11, 0.1);
  border-left: 4px solid var(--warning);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
}

/* ROAS Disclaimer */
.roas-disclaimer {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--surface-hover);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  color: var(--text-muted);
}

.disclaimer-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

/* Audience Sections */
.audience-section {
  padding: var(--space-md);
  background: var(--surface-hover);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}

.audience-section:last-child {
  margin-bottom: 0;
}

.audience-section h4 {
  margin-bottom: var(--space-sm);
  font-size: var(--font-md);
  font-weight: 600;
}

.audience-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.audience-tag {
  padding: var(--space-xs) var(--space-sm);
  background: var(--surface);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
}

.audience-tag.primary {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.audience-tag.secondary {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.audience-tag.exclude {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.interest-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--surface);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-xs);
}

.interest-item:last-child {
  margin-bottom: 0;
}

.interest-name {
  font-weight: 500;
  flex: 1;
}

.interest-platform {
  font-size: var(--font-xs);
  padding: 2px 6px;
  background: var(--primary);
  color: white;
  border-radius: var(--radius-sm);
}

.interest-reason {
  font-size: var(--font-xs);
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

/* Priority Actions */
.priority-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.priority-action {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--surface-hover);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--border);
}

.priority-action.high {
  border-left-color: var(--error);
}

.priority-action.medium {
  border-left-color: var(--warning);
}

.priority-action.low {
  border-left-color: var(--success);
}

.action-priority-badge {
  font-size: var(--font-xs);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-weight: 500;
}

.action-priority-badge.high {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.action-priority-badge.medium {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.action-priority-badge.low {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

/* Negative Keywords */
.neg-category-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.neg-category-item {
  font-size: var(--font-sm);
  padding: var(--space-xs) 0;
}

.neg-category-item strong {
  color: var(--text);
}

.neg-keyword-category {
  margin-bottom: var(--space-md);
}

.neg-keyword-category .card-header {
  background: var(--surface-hover);
}

.neg-keywords-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-sm);
}

.neg-keyword-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm);
  background: var(--surface-hover);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
}

.neg-keyword-term {
  font-weight: 500;
}

.neg-keyword-match {
  font-size: var(--font-xs);
  padding: 2px 6px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
}

.neg-keyword-impact {
  font-size: var(--font-xs);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.neg-keyword-impact.high {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.neg-keyword-impact.medium {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.neg-keyword-impact.low {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.neg-summary-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-md);
}

.neg-stat {
  text-align: center;
  padding: var(--space-md);
  background: var(--surface-hover);
  border-radius: var(--radius-md);
}

.neg-stat .stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
}

.neg-stat .stat-label {
  font-size: var(--font-sm);
  color: var(--text-muted);
}

.export-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.implementation-section {
  margin-bottom: var(--space-md);
}

.implementation-section:last-child {
  margin-bottom: 0;
}

.implementation-section h4 {
  font-size: var(--font-sm);
  font-weight: 600;
  margin-bottom: var(--space-sm);
  color: var(--text-muted);
}

.implementation-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.implementation-item {
  padding: var(--space-xs) var(--space-sm);
  background: var(--surface-hover);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
}

.warning-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: rgba(245, 158, 11, 0.1);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
}

.warning-item:last-child {
  margin-bottom: 0;
}

.warning-keyword {
  font-weight: 600;
  color: var(--warning);
}

.warning-text {
  font-size: var(--font-sm);
  color: var(--text-muted);
}

/* Recommendation Cards */
.recommendation-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--surface-hover);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
}

.recommendation-item:last-child {
  margin-bottom: 0;
}

.recommendation-item.warning {
  background: rgba(245, 158, 11, 0.1);
  border-left: 4px solid var(--warning);
}

.recommendation-item.info {
  background: rgba(59, 130, 246, 0.1);
  border-left: 4px solid #3b82f6;
}

.recommendation-item.success {
  background: rgba(16, 185, 129, 0.1);
  border-left: 4px solid var(--success);
}

.recommendation-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.recommendation-content {
  flex: 1;
}

.recommendation-title {
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.recommendation-message {
  font-size: var(--font-sm);
  color: var(--text-muted);
}

/* Platform Tips */
.platform-tip-card {
  padding: var(--space-md);
  background: var(--surface-hover);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}

.platform-tip-card:last-child {
  margin-bottom: 0;
}

.platform-tip-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  font-weight: 600;
}

.platform-tip-content {
  font-size: var(--font-sm);
}

.platform-tip-content ul {
  margin: var(--space-sm) 0 0 var(--space-md);
  padding: 0;
}

.platform-tip-content li {
  margin-bottom: var(--space-xs);
}

/* ============================================
   n8n Workflows Tab Styles
   ============================================ */

.n8n-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-lg);
}

.n8n-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
  gap: var(--space-md);
}

.n8n-header-content {
  flex: 1;
}

.n8n-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.n8n-status-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--surface);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
}

.n8n-status-indicator .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warning);
  animation: pulse 2s infinite;
}

.n8n-status-indicator.connected .status-dot {
  background: var(--success);
  animation: none;
}

.n8n-status-indicator.error .status-dot {
  background: var(--danger);
  animation: none;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Connection Card */
.n8n-connection-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.n8n-connection-info {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.connection-icon {
  font-size: 2rem;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-alpha);
  border-radius: var(--radius-md);
}

.connection-details h3 {
  margin: 0 0 var(--space-xs);
  font-size: var(--font-lg);
}

.connection-details p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-sm);
}

.n8n-webhook-urls {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.webhook-url-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg);
  border-radius: var(--radius-sm);
  flex-wrap: wrap;
}

.webhook-label {
  font-weight: 500;
  min-width: 130px;
  color: var(--text-secondary);
  font-size: var(--font-sm);
}

.webhook-url {
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  color: var(--primary);
  background: transparent;
  word-break: break-all;
  min-width: 200px;
}

.copy-webhook-btn {
  flex-shrink: 0;
}

/* Filter Tabs */
.n8n-filter-tabs {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}

.n8n-filter-btn {
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: var(--font-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.n8n-filter-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.n8n-filter-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

/* Templates Grid */
.n8n-templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.n8n-template-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: all 0.2s ease;
}

.n8n-template-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 12px var(--shadow);
}

.n8n-template-card.hidden {
  display: none;
}

.template-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.template-icon {
  font-size: 1.5rem;
}

.template-category {
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary);
  background: var(--primary-alpha);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-sm);
}

.template-title {
  margin: 0;
  font-size: var(--font-lg);
  color: var(--text);
}

.template-description {
  margin: 0;
  font-size: var(--font-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  flex: 1;
}

.template-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.template-tags .tag {
  font-size: var(--font-xs);
  padding: var(--space-2xs) var(--space-xs);
  background: var(--bg);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
}

.template-credentials {
  font-size: var(--font-xs);
  color: var(--text-muted);
  padding: var(--space-sm);
  background: var(--bg);
  border-radius: var(--radius-sm);
}

.credentials-label {
  font-weight: 600;
  margin-right: var(--space-xs);
}

.template-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.template-actions .btn {
  flex: 1;
}

/* Documentation Card */
.n8n-docs-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background: linear-gradient(135deg, var(--primary-alpha) 0%, transparent 100%);
  border: 1px solid var(--primary);
  border-radius: var(--radius-lg);
  flex-wrap: wrap;
}

.docs-content {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.docs-icon {
  font-size: 2rem;
}

.docs-text h3 {
  margin: 0 0 var(--space-xs);
  font-size: var(--font-md);
}

.docs-text p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-sm);
}

/* Template Preview Modal */
.n8n-preview-modal {
  max-width: 900px;
}

.n8n-preview-content {
  max-height: 500px;
  overflow: auto;
  background: var(--bg);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.n8n-preview-content pre {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .n8n-container {
    padding: var(--space-md);
  }

  .n8n-header {
    flex-direction: column;
  }

  .n8n-templates-grid {
    grid-template-columns: 1fr;
  }

  .webhook-url-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .webhook-label {
    min-width: auto;
  }

  .webhook-url {
    width: 100%;
  }

  .n8n-docs-card {
    flex-direction: column;
    text-align: center;
  }

  .docs-content {
    flex-direction: column;
  }

  .template-actions {
    flex-direction: column;
  }

  .template-actions .btn {
    width: 100%;
  }
}

/* Light Theme Overrides */
.theme-light .n8n-connection-card {
  background: #fff;
}

.theme-light .n8n-template-card {
  background: #fff;
}

.theme-light .webhook-url-item {
  background: #f8f9fa;
}

.theme-light .template-credentials {
  background: #f8f9fa;
}

.theme-light .n8n-preview-content {
  background: #f8f9fa;
}

/* ============================================
   SOCIAL MEDIA SUITE - ADVANCED FEATURES
   ============================================ */

/* Sub-Navigation */
.social-subnav {
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-sm);
  background: var(--surface);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.social-subnav-btn {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--font-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.social-subnav-btn:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.social-subnav-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.subnav-icon {
  font-size: 1.1em;
}

.subnav-label {
  display: inline;
}

/* Social Sections */
.social-section {
  animation: fadeIn 0.3s ease;
}

.social-section:not(.active) {
  display: none;
}

/* Feature Layout (shared by all advanced features) */
.social-feature-layout {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: var(--space-lg);
  align-items: start;
}

.feature-input-panel {
  position: sticky;
  top: var(--space-md);
}

.feature-results-panel {
  min-height: 400px;
}

/* Feature Placeholder */
.feature-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-xl);
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 2px dashed var(--border);
  min-height: 400px;
}

.feature-placeholder .placeholder-icon {
  font-size: 3rem;
  margin-bottom: var(--space-md);
  opacity: 0.6;
}

.feature-placeholder h3 {
  margin: 0 0 var(--space-sm);
  color: var(--text-primary);
}

.feature-placeholder p {
  margin: 0 0 var(--space-md);
  color: var(--text-secondary);
}

.feature-placeholder .placeholder-features {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.feature-placeholder .placeholder-features li {
  padding: var(--space-xs) 0;
  color: var(--text-secondary);
}

/* Tips List */
.tips-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.tip-item {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--surface-hover);
  border-radius: var(--radius-md);
}

.tip-icon {
  font-size: 1.2em;
}

.tip-content strong {
  display: block;
  margin-bottom: var(--space-xxs);
  color: var(--text-primary);
}

.tip-content p {
  margin: 0;
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

/* Hashtag Generator Styles */
.hashtag-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.hashtag-group {
  padding: var(--space-md);
  background: var(--surface-hover);
  border-radius: var(--radius-md);
}

.group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
}

.group-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xxs) var(--space-sm);
  border-radius: var(--radius-full);
  font-size: var(--font-sm);
  font-weight: 600;
}

.group-badge.high {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.group-badge.medium {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.group-badge.niche {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.group-desc {
  font-size: var(--font-xs);
  color: var(--text-muted);
}

.hashtag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.hashtag-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: var(--font-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.hashtag-item:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.hashtag-item .tag-posts {
  font-size: var(--font-xs);
  color: var(--text-muted);
  margin-left: var(--space-xxs);
}

.hashtag-item:hover .tag-posts {
  color: rgba(255, 255, 255, 0.8);
}

.copy-ready-section textarea {
  font-family: var(--font-mono);
  font-size: var(--font-sm);
}

/* Template Library Styles */
.template-library-body {
  max-height: 600px;
  overflow-y: auto;
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-md);
}

.template-card {
  padding: var(--space-md);
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
}

.template-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}

.template-card.selected {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.1);
}

.template-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
}

.template-card-name {
  font-weight: 600;
  color: var(--text-primary);
}

.template-card-category {
  font-size: var(--font-xs);
  padding: var(--space-xxs) var(--space-xs);
  background: var(--surface);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}

.template-card-preview {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  max-height: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-wrap;
}

.template-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
}

.template-card-platform {
  font-size: var(--font-xs);
  color: var(--text-muted);
}

.template-card-use-btn {
  font-size: var(--font-xs);
  padding: var(--space-xxs) var(--space-sm);
}

/* Template Editor */
#templateFieldsContainer {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.template-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}

.template-field label {
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

.template-field input {
  font-size: var(--font-sm);
}

.template-preview {
  padding: var(--space-md);
  background: var(--surface-hover);
  border-radius: var(--radius-md);
  white-space: pre-wrap;
  line-height: 1.6;
  font-size: var(--font-sm);
}

.filter-row {
  display: flex;
  gap: var(--space-sm);
}

.filter-row .field {
  flex: 1;
}

/* Bio Generator Styles */
.bio-platforms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xs);
}

.bio-cards-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.bio-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.bio-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  background: var(--surface-hover);
  border-bottom: 1px solid var(--border);
}

.bio-platform-info {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.bio-platform-icon {
  font-size: 1.5em;
}

.bio-platform-name {
  font-weight: 600;
  color: var(--text-primary);
}

.bio-char-count {
  font-size: var(--font-sm);
  color: var(--text-muted);
}

.bio-char-count.over-limit {
  color: var(--danger);
}

.bio-card-body {
  padding: var(--space-md);
}

.bio-text {
  white-space: pre-wrap;
  line-height: 1.6;
  margin-bottom: var(--space-md);
  padding: var(--space-md);
  background: var(--surface-hover);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
}

.bio-tips {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  font-style: italic;
}

.bio-card-actions {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-hover);
  border-top: 1px solid var(--border);
}

/* Content Repurposer Styles */
.content-type-checkboxes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xs);
}

.repurpose-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

.repurpose-stat {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--surface-hover);
  border-radius: var(--radius-full);
  font-size: var(--font-sm);
}

.repurpose-stat-value {
  font-weight: 600;
  color: var(--primary);
}

/* Thread Display */
.thread-tweets {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  position: relative;
}

.thread-tweet {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--surface-hover);
  border-radius: var(--radius-md);
  position: relative;
}

.thread-tweet::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 100%;
  width: 2px;
  height: var(--space-sm);
  background: var(--border);
}

.thread-tweet:last-child::before {
  display: none;
}

.tweet-number {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  font-size: var(--font-xs);
  font-weight: 600;
  flex-shrink: 0;
}

.tweet-content {
  flex: 1;
}

.tweet-text {
  line-height: 1.5;
  margin-bottom: var(--space-xs);
}

.tweet-char-count {
  font-size: var(--font-xs);
  color: var(--text-muted);
}

/* Repurpose Posts Grid */
.repurpose-posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-md);
}

.repurpose-post-card {
  padding: var(--space-md);
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.repurpose-post-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
}

.repurpose-post-type {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

.repurpose-post-platforms {
  display: flex;
  gap: var(--space-xxs);
  font-size: var(--font-xs);
}

.repurpose-post-content {
  line-height: 1.6;
  margin-bottom: var(--space-sm);
  white-space: pre-wrap;
}

.repurpose-post-hashtags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xxs);
  margin-bottom: var(--space-sm);
}

.repurpose-post-hashtags span {
  font-size: var(--font-xs);
  color: var(--primary);
}

.repurpose-post-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
}

.repurpose-post-tip {
  font-size: var(--font-xs);
  color: var(--text-muted);
  font-style: italic;
}

/* Carousel Slides */
.carousel-slides {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-md);
}

.carousel-slide {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: var(--space-md);
  background: linear-gradient(135deg, var(--primary), var(--primary-dark, #6366f1));
  color: white;
  border-radius: var(--radius-lg);
  position: relative;
}

.carousel-slide-number {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  font-size: var(--font-xs);
  font-weight: 600;
}

.carousel-slide-headline {
  font-size: var(--font-lg);
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.carousel-slide-body {
  font-size: var(--font-sm);
  opacity: 0.9;
}

/* Status Messages */
.status-message {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
}

.status-message.error {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.status-message.success {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

/* Post Filters */
.post-filters {
  display: flex;
  gap: var(--space-sm);
}

.field-sm {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-sm);
}

/* Mobile Responsive */
@media (max-width: 1024px) {
  .social-feature-layout {
    grid-template-columns: 1fr;
  }

  .feature-input-panel {
    position: static;
  }

  .content-type-checkboxes {
    grid-template-columns: repeat(2, 1fr);
  }

  .bio-platforms {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .social-subnav {
    padding: var(--space-xs);
  }

  .social-subnav-btn {
    padding: var(--space-xs) var(--space-sm);
  }

  .subnav-label {
    display: none;
  }

  .filter-row {
    flex-direction: column;
  }

  .template-grid {
    grid-template-columns: 1fr;
  }

  .content-type-checkboxes,
  .bio-platforms {
    grid-template-columns: 1fr 1fr;
  }

  .carousel-slides {
    grid-template-columns: repeat(2, 1fr);
  }

  .repurpose-posts-grid {
    grid-template-columns: 1fr;
  }
}

/* Light Theme */
.theme-light .social-subnav {
  background: #f8f9fa;
}

.theme-light .feature-placeholder {
  background: #f8f9fa;
}

.theme-light .hashtag-group {
  background: #f8f9fa;
}

.theme-light .hashtag-item {
  background: #fff;
}

.theme-light .template-card {
  background: #f8f9fa;
}

.theme-light .bio-card-header,
.theme-light .bio-card-actions {
  background: #f8f9fa;
}

.theme-light .thread-tweet,
.theme-light .repurpose-post-card {
  background: #f8f9fa;
}


/* ============================================================
   AD TOOLS - Part 3 (Image Sizer, Quality Score, LP Matcher, Competitor Research)
   ============================================================ */

/* File Upload Zone */
.file-upload-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.file-upload-zone:hover,
.file-upload-zone.dragover {
  border-color: var(--accent);
  background: var(--surface-hover);
}

.dropzone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

.dropzone-icon {
  font-size: 2.5rem;
}

.dropzone-text {
  font-weight: 500;
}

.dropzone-hint {
  font-size: var(--font-xs);
  color: var(--text-muted);
}

/* Original Image Preview */
.image-preview-original {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--surface-hover);
  border-radius: var(--radius-md);
}

.image-preview-original img {
  max-width: 100%;
  max-height: 200px;
  border-radius: var(--radius-sm);
}

.original-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-sm);
  font-size: var(--font-sm);
  color: var(--text-muted);
}

/* Platform Filter Checkboxes */
.platform-filter-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* Image Sizer Results */
.image-sizes-platform {
  margin-bottom: var(--space-lg);
}

.platform-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border);
}

.platform-header h4 {
  margin: 0;
  font-size: var(--font-md);
}

.platform-notes {
  font-size: var(--font-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}

.sizes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-md);
}

.size-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.size-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.size-card.required {
  border-color: var(--success);
  background: var(--surface-hover);
}

.size-preview {
  width: 100%;
  aspect-ratio: var(--aspect, 1);
  background: var(--surface-hover);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.size-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.size-preview .crop-guide {
  position: absolute;
  border: 2px dashed var(--warning);
  pointer-events: none;
}

.size-dimensions {
  font-weight: 600;
  font-size: var(--font-sm);
}

.size-name {
  font-size: var(--font-xs);
  color: var(--text-muted);
}

.size-badge {
  display: inline-block;
  padding: 2px 6px;
  font-size: 10px;
  border-radius: var(--radius-sm);
  margin-top: 4px;
}

.size-badge.required {
  background: var(--success);
  color: white;
}

/* Quality Score Results */
.quality-score-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.qs-score-card {
  text-align: center;
  padding: var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.qs-score-card.overall {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.qs-score-value {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
}

.qs-score-value.score-high { color: var(--success); }
.qs-score-value.score-medium { color: var(--warning); }
.qs-score-value.score-low { color: var(--error); }

.qs-score-label {
  font-size: var(--font-sm);
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

.qs-score-max {
  font-size: var(--font-xs);
  color: var(--text-muted);
}

/* Quality Score Factors */
.qs-factors-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.qs-factor {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--surface-hover);
  border-radius: var(--radius-sm);
}

.qs-factor-icon {
  font-size: 1.2rem;
}

.qs-factor-icon.positive { color: var(--success); }
.qs-factor-icon.negative { color: var(--error); }
.qs-factor-icon.neutral { color: var(--text-muted); }

/* Quality Score Info Grid */
.qs-info-grid {
  display: grid;
  gap: var(--space-md);
}

.qs-info-item {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-sm);
}

.qs-info-item .qs-icon {
  font-size: 1.5rem;
}

.qs-info-item p {
  margin: var(--space-xs) 0 0;
  font-size: var(--font-sm);
  color: var(--text-muted);
}

/* Improvements List */
.improvements-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.improvement-item {
  padding: var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--border);
}

.improvement-item.priority-high {
  border-left-color: var(--error);
}

.improvement-item.priority-medium {
  border-left-color: var(--warning);
}

.improvement-item.priority-low {
  border-left-color: var(--success);
}

.improvement-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xs);
}

.improvement-category {
  font-size: var(--font-xs);
  padding: 2px 8px;
  background: var(--surface-hover);
  border-radius: var(--radius-sm);
}

.improvement-priority {
  font-size: var(--font-xs);
  font-weight: 600;
  text-transform: uppercase;
}

.improvement-suggestion {
  font-weight: 500;
  margin-bottom: var(--space-xs);
}

.improvement-impact {
  font-size: var(--font-sm);
  color: var(--text-muted);
}

/* LP Match Results */
.lp-match-score {
  text-align: center;
  padding: var(--space-xl);
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
}

.lp-match-score.strong { border-color: var(--success); }
.lp-match-score.good { border-color: var(--accent); }
.lp-match-score.needs-work { border-color: var(--warning); }
.lp-match-score.poor { border-color: var(--error); }

.match-score-value {
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
}

.match-score-label {
  font-size: var(--font-lg);
  margin-top: var(--space-sm);
}

.match-score-rating {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  font-weight: 600;
  margin-top: var(--space-sm);
}

.match-score-rating.strong { background: var(--success); color: white; }
.match-score-rating.good { background: var(--accent); color: white; }
.match-score-rating.needs-work { background: var(--warning); color: var(--text); }
.match-score-rating.poor { background: var(--error); color: white; }

/* Match Analysis Grid */
.match-analysis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.match-analysis-card {
  padding: var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.match-analysis-card h4 {
  margin: 0 0 var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.match-level {
  display: inline-block;
  padding: 2px 8px;
  font-size: var(--font-xs);
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.match-level.exact { background: var(--success); color: white; }
.match-level.close { background: var(--accent); color: white; }
.match-level.partial { background: var(--warning); color: var(--text); }
.match-level.weak { background: var(--error); color: white; }

.match-comparison {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: var(--space-sm) 0;
}

.match-item {
  padding: var(--space-sm);
  background: var(--surface-hover);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
}

.match-item-label {
  font-size: var(--font-xs);
  color: var(--text-muted);
  margin-bottom: 2px;
}

/* Quick Wins */
.quick-wins-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.quick-win {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--success);
  color: white;
  border-radius: var(--radius-full);
  font-size: var(--font-sm);
}

/* Competitor Research */
.ads-layout-single {
  display: block;
}

.competitor-research-content {
  max-width: 1000px;
  margin: 0 auto;
}

.section-intro {
  font-size: var(--font-md);
  color: var(--text-muted);
  margin-bottom: var(--space-lg);
}

.research-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-md);
}

.research-tool-card {
  padding: var(--space-md);
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.research-tool-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.tool-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.tool-icon {
  font-size: 1.5rem;
}

.tool-name {
  font-weight: 600;
  font-size: var(--font-md);
}

.tool-description {
  font-size: var(--font-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}

.tool-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-md);
}

.tool-features li {
  padding: var(--space-xs) 0;
  font-size: var(--font-sm);
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
}

.tool-features li::before {
  content: "✓";
  color: var(--success);
}

.tool-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.tool-link:hover {
  text-decoration: underline;
}

/* Research Strategy Steps */
.strategy-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.strategy-step {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--surface-hover);
  border-radius: var(--radius-md);
}

.step-number {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: white;
  border-radius: 50%;
  font-weight: 700;
  flex-shrink: 0;
}

.step-content h4 {
  margin: 0 0 var(--space-xs);
}

.step-content p {
  margin: 0 0 var(--space-sm);
  color: var(--text-muted);
  font-size: var(--font-sm);
}

.step-actions {
  list-style: none;
  padding: 0;
  margin: 0;
}

.step-actions li {
  padding: 4px 0;
  font-size: var(--font-sm);
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
}

.step-actions li::before {
  content: "→";
  color: var(--accent);
}

/* Tracking Template Table */
.tracking-template {
  overflow-x: auto;
}

.tracking-template table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-sm);
}

.tracking-template th,
.tracking-template td {
  padding: var(--space-sm);
  border: 1px solid var(--border);
  text-align: left;
}

.tracking-template th {
  background: var(--surface-hover);
  font-weight: 600;
}

.tracking-tips {
  background: var(--surface-hover);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.tracking-tips h4 {
  margin: 0 0 var(--space-sm);
}

.tracking-tips ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tracking-tips li {
  padding: var(--space-xs) 0;
  font-size: var(--font-sm);
}

/* Responsive */
@media (max-width: 768px) {
  .quality-score-summary {
    grid-template-columns: repeat(2, 1fr);
  }

  .match-analysis-grid {
    grid-template-columns: 1fr;
  }

  .research-tools-grid {
    grid-template-columns: 1fr;
  }

  .strategy-step {
    flex-direction: column;
  }
}


/* ============================================== */
/* Question Research (PAA) Styles                 */
/* ============================================== */

/* Keyword Research Subtabs */
.kr-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
  padding: var(--space-xs);
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  .kr-subtabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: var(--space-xs);
  }

  .kr-subtab-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: var(--space-sm) var(--space-sm);
    font-size: 12px;
  }
}

.kr-subtab-btn {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-weight: 500;
  font-size: var(--font-sm);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
}

.kr-subtab-btn:hover {
  color: var(--text);
  background: var(--surface-hover);
}

.kr-subtab-btn.active {
  background: var(--primary);
  color: white;
}

/* Subtab Content */
.kr-subtab-content {
  display: none;
}

.kr-subtab-content.active {
  display: block;
}

/* Keyword Research Layout */
.kr-layout {
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: var(--space-lg);
}

/* PAA Layout */
.paa-layout {
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: var(--space-lg);
}

/* Responsive layouts */
@media (max-width: 1024px) {
  .kr-layout,
  .paa-layout {
    grid-template-columns: 300px 1fr;
  }
}

@media (max-width: 768px) {
  .kr-layout,
  .paa-layout {
    grid-template-columns: 1fr;
  }

  .kr-layout aside,
  .paa-layout aside {
    order: 1;
  }

  .kr-layout .results,
  .paa-layout .results {
    order: 2;
  }
}

/* PAA Filters */
.paa-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.paa-filters .checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--surface);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  cursor: pointer;
  border: 1px solid var(--border);
  transition: all 0.2s ease;
}

.paa-filters .checkbox-label:hover {
  background: var(--surface-hover);
}

.paa-filters .checkbox-label input[type="checkbox"] {
  margin: 0;
}

/* Actions Stacked */
.actions-stacked {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Question Tree */
.paa-tree-container {
  max-height: 600px;
  overflow-y: auto;
}

.paa-question-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
  overflow: hidden;
  transition: all 0.2s ease;
}

.paa-question-item:hover {
  border-color: var(--primary);
}

.paa-question-item.selected {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border-color: var(--primary);
}

.paa-question-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
}

.paa-question-checkbox {
  flex-shrink: 0;
}

.paa-question-text {
  flex: 1;
  font-weight: 500;
}

.paa-question-type {
  font-size: var(--font-xs);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--surface-hover);
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
}

.paa-question-type.what { background: #e3f2fd; color: #1565c0; }
.paa-question-type.how { background: #e8f5e9; color: #2e7d32; }
.paa-question-type.why { background: #fff3e0; color: #ef6c00; }
.paa-question-type.when { background: #f3e5f5; color: #7b1fa2; }
.paa-question-type.where { background: #e0f7fa; color: #00838f; }
.paa-question-type.who { background: #fce4ec; color: #c2185b; }
.paa-question-type.which { background: #f1f8e9; color: #558b2f; }
.paa-question-type.can,
.paa-question-type.does,
.paa-question-type.is { background: #eceff1; color: #546e7a; }

.paa-question-expand {
  background: none;
  border: none;
  padding: var(--space-xs);
  cursor: pointer;
  color: var(--primary);
  font-size: var(--font-sm);
  opacity: 0.7;
  transition: all 0.2s ease;
}

.paa-question-expand:hover {
  opacity: 1;
  transform: scale(1.1);
}

.paa-question-meta {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-xs) var(--space-md) var(--space-sm);
  font-size: var(--font-xs);
  color: var(--text-muted);
  border-top: 1px dashed var(--border);
}

.paa-question-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.paa-sub-questions {
  padding-left: var(--space-lg);
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.paa-sub-questions .paa-question-item {
  margin: var(--space-sm);
  border-style: dashed;
}

/* Cluster Card */
.paa-cluster {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  overflow: hidden;
}

.paa-cluster-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-hover);
  cursor: pointer;
}

.paa-cluster-header h4 {
  margin: 0;
  font-size: var(--font-base);
}

.paa-cluster-badge {
  font-size: var(--font-xs);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: white;
}

.paa-cluster-body {
  padding: var(--space-md);
}

.paa-cluster-theme {
  font-size: var(--font-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
}

.paa-cluster-questions {
  list-style: none;
  padding: 0;
  margin: 0;
}

.paa-cluster-questions li {
  padding: var(--space-xs) 0;
  font-size: var(--font-sm);
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
}

.paa-cluster-questions li::before {
  content: '❓';
  flex-shrink: 0;
}

/* Content Ideas */
.paa-content-idea {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  padding: var(--space-md);
}

.paa-content-idea-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-sm);
}

.paa-content-idea-title {
  font-size: var(--font-md);
  font-weight: 600;
  margin: 0;
}

.paa-content-type {
  font-size: var(--font-xs);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--surface-hover);
  text-transform: uppercase;
  font-weight: 600;
}

.paa-content-type.blog { background: #e3f2fd; color: #1565c0; }
.paa-content-type.pillar { background: #e8f5e9; color: #2e7d32; }
.paa-content-type.faq { background: #fff3e0; color: #ef6c00; }
.paa-content-type.guide { background: #f3e5f5; color: #7b1fa2; }
.paa-content-type.comparison { background: #e0f7fa; color: #00838f; }
.paa-content-type.tutorial { background: #fce4ec; color: #c2185b; }
.paa-content-type.glossary { background: #f1f8e9; color: #558b2f; }
.paa-content-type.landing-page { background: #eceff1; color: #546e7a; }

.paa-content-angle {
  font-size: var(--font-sm);
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: var(--space-sm);
}

.paa-content-outline {
  margin: var(--space-sm) 0;
  padding-left: var(--space-md);
}

.paa-content-outline li {
  padding: var(--space-xs) 0;
  font-size: var(--font-sm);
}

.paa-content-meta {
  display: flex;
  gap: var(--space-md);
  font-size: var(--font-xs);
  color: var(--text-muted);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px dashed var(--border);
}

.paa-priority-high { color: var(--danger); }
.paa-priority-medium { color: var(--warning); }
.paa-priority-low { color: var(--success); }

/* FAQ Schema Preview */
.paa-faq-preview {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  font-family: monospace;
  font-size: var(--font-sm);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 400px;
  overflow-y: auto;
}

.paa-faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
  padding: var(--space-md);
}

.paa-faq-question {
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.paa-faq-answer {
  font-size: var(--font-sm);
  color: var(--text-muted);
}

/* Responsive */
@media (max-width: 1024px) {
  .kr-layout,
  .paa-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .kr-subtabs {
    max-width: 100%;
  }

  .paa-filters {
    gap: var(--space-xs);
  }

  .paa-filters .checkbox-label {
    font-size: var(--font-xs);
    padding: 2px 6px;
  }

  .paa-question-meta {
    flex-wrap: wrap;
  }
}

/* ================================================
   Brand Monitoring Styles
   ================================================ */

.brand-monitor-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-lg);
}

.brand-subnav {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}

.brand-subnav-btn {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--font-sm);
  font-weight: 500;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.brand-subnav-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.brand-subnav-btn.active {
  background: var(--accent);
  color: white;
}

.brand-section {
  display: none;
}

.brand-section.active {
  display: block;
}

/* Brand Setup Layout */
.brand-setup-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-lg);
}

.social-handles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

.social-handle-input {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.social-handle-input .handle-icon {
  font-size: 1.2em;
  width: 24px;
  text-align: center;
}

.social-handle-input .field {
  flex: 1;
}

.info-box {
  background: var(--bg-tertiary);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
}

.info-box ul {
  list-style: none;
  padding-left: 0;
}

.info-box li {
  padding: var(--space-xs) 0;
}

/* Brand Mentions Layout */
.brand-mentions-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.mentions-controls {
  background: var(--bg-secondary);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
}

.mentions-filter-row {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  flex-wrap: wrap;
}

.mentions-stats-bar {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  justify-content: space-around;
}

.mention-stat {
  text-align: center;
}

.mention-stat .stat-number {
  display: block;
  font-size: 1.5em;
  font-weight: 700;
  color: var(--text-primary);
}

.mention-stat .stat-label {
  font-size: var(--font-xs);
  color: var(--text-secondary);
}

.mention-stat.positive .stat-number {
  color: var(--success);
}

.mention-stat.negative .stat-number {
  color: var(--danger);
}

.mention-stat.neutral .stat-number {
  color: var(--text-secondary);
}

.mention-stat.trend .stat-number {
  color: var(--accent);
}

/* Mentions List */
.mentions-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.mention-card {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  border-left: 4px solid var(--border);
  transition: all 0.2s ease;
}

.mention-card:hover {
  box-shadow: var(--shadow-md);
}

.mention-card.sentiment-positive {
  border-left-color: var(--success);
}

.mention-card.sentiment-negative {
  border-left-color: var(--danger);
}

.mention-card.sentiment-neutral {
  border-left-color: var(--text-secondary);
}

.mention-card.sentiment-mixed {
  border-left-color: var(--warning);
}

.mention-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.mention-source-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 2px 8px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  color: var(--text-secondary);
}

.mention-title {
  flex: 1;
  font-weight: 600;
  font-size: var(--font-base);
  color: var(--text-primary);
}

.mention-title a {
  color: inherit;
  text-decoration: none;
}

.mention-title a:hover {
  color: var(--accent);
}

.mention-sentiment-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--font-xs);
  font-weight: 500;
}

.mention-sentiment-badge.positive {
  background: rgba(34, 197, 94, 0.15);
  color: var(--success);
}

.mention-sentiment-badge.negative {
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger);
}

.mention-sentiment-badge.neutral {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.mention-sentiment-badge.mixed {
  background: rgba(251, 191, 36, 0.15);
  color: var(--warning);
}

.mention-snippet {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-sm);
}

.mention-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-xs);
  color: var(--text-muted);
}

.mention-date {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* Analytics Section */
.brand-analytics-layout {
  padding: var(--space-md) 0;
}

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.analytics-grid .full-width {
  grid-column: 1 / -1;
}

.sentiment-chart {
  padding: var(--space-md) 0;
}

.sentiment-bar-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.sentiment-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  min-height: 40px;
  transition: width 0.5s ease;
}

.sentiment-bar.positive {
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.3) 0%, rgba(34, 197, 94, 0.1) 100%);
  border-left: 4px solid var(--success);
}

.sentiment-bar.negative {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.3) 0%, rgba(239, 68, 68, 0.1) 100%);
  border-left: 4px solid var(--danger);
}

.sentiment-bar.neutral {
  background: linear-gradient(90deg, rgba(107, 114, 128, 0.3) 0%, rgba(107, 114, 128, 0.1) 100%);
  border-left: 4px solid var(--text-secondary);
}

.sentiment-bar .bar-label {
  font-weight: 500;
  font-size: var(--font-sm);
}

.sentiment-bar .bar-value {
  font-weight: 700;
}

.sentiment-score-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  margin-top: var(--space-md);
}

.sentiment-score-display .score-label {
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.sentiment-score-display .score-value {
  font-size: 1.5em;
  font-weight: 700;
  color: var(--accent);
}

.sources-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.source-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
}

.source-item .source-name {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: 500;
}

.source-item .source-count {
  font-weight: 700;
  color: var(--accent);
}

.trend-summary {
  padding: var(--space-md);
}

.trend-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: 1.1em;
}

.trend-item .trend-icon {
  font-size: 2em;
}

/* Competitor Comparison */
.competitor-comparison-table {
  width: 100%;
}

.comparison-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 2fr;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
  align-items: center;
}

.comparison-row.header {
  background: var(--bg-tertiary);
  font-weight: 600;
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.comparison-row.your-brand {
  border: 2px solid var(--accent);
}

.comparison-cell {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.comparison-cell.brand-name {
  font-weight: 600;
}

.comparison-cell.mentions {
  font-size: 1.2em;
  font-weight: 700;
}

.comparison-cell.sentiment {
  font-weight: 500;
}

.comparison-cell.sources {
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

/* Alert Settings */
.brand-alerts-layout {
  max-width: 600px;
}

.alert-setting {
  padding: var(--space-sm) 0;
}

.alert-settings-extra {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

.brand-status {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
}

.brand-status.success {
  background: rgba(34, 197, 94, 0.15);
  color: var(--success);
}

.brand-status.error {
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger);
}

.empty-state-mini {
  padding: var(--space-md);
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--font-sm);
}

/* Responsive */
@media (max-width: 1024px) {
  .brand-setup-layout {
    grid-template-columns: 1fr;
  }

  .analytics-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .brand-monitor-container {
    padding: var(--space-md);
  }

  .social-handles-grid {
    grid-template-columns: 1fr;
  }

  .mentions-filter-row {
    flex-direction: column;
    align-items: stretch;
  }

  .mentions-stats-bar {
    flex-wrap: wrap;
    gap: var(--space-md);
  }

  .mention-stat {
    flex: 1 0 45%;
  }

  .comparison-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
  }

  .comparison-row.header {
    display: none;
  }
}

/* ============================================================
   GROW FLOW - Daily SEO Tasks
   ============================================================ */

.grow-flow-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.grow-flow-streak {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
  border-radius: var(--radius-md);
  color: white;
  font-weight: 600;
  font-size: var(--font-sm);
}

.streak-icon {
  font-size: 1.1em;
}

.streak-count {
  font-size: 1.1em;
}

.streak-label {
  font-weight: 400;
  opacity: 0.9;
}

.grow-flow-progress {
  margin-bottom: var(--space-md);
  padding: var(--space-md);
  background: var(--surface-elevated);
  border-radius: var(--radius-md);
}

.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}

.progress-text {
  font-weight: 500;
  color: var(--text-primary);
}

.progress-count {
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.progress-bar-container {
  height: 8px;
  background: var(--border-color);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-color) 0%, var(--accent-color, #10b981) 100%);
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}

.grow-flow-tasks {
  min-height: 200px;
}

.grow-flow-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  gap: var(--space-md);
  color: var(--text-secondary);
}

.grow-flow-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  text-align: center;
}

.grow-flow-empty .empty-icon {
  font-size: 3rem;
  margin-bottom: var(--space-md);
}

.grow-flow-empty h4 {
  margin: 0 0 var(--space-sm);
  color: var(--text-primary);
}

.grow-flow-empty p {
  margin: 0 0 var(--space-md);
  color: var(--text-secondary);
}

.grow-flow-task-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.grow-flow-task {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--surface-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.grow-flow-task:hover {
  border-color: var(--primary-color);
  box-shadow: var(--shadow-sm);
}

.grow-flow-task.completed {
  opacity: 0.6;
  background: var(--surface-secondary);
}

.grow-flow-task.completed .task-title {
  text-decoration: line-through;
}

.task-type-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-secondary);
  border-radius: var(--radius-md);
}

.task-content {
  flex: 1;
  min-width: 0;
}

.task-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.task-title {
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.task-badges {
  display: flex;
  gap: var(--space-xs);
}

.task-badge {
  font-size: var(--font-xs);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-weight: 500;
}

.task-badge.priority-high {
  background: #fee2e2;
  color: #dc2626;
}

.task-badge.priority-medium {
  background: #fef3c7;
  color: #d97706;
}

.task-badge.priority-low {
  background: #d1fae5;
  color: #059669;
}

.task-badge.difficulty-easy {
  background: #d1fae5;
  color: #059669;
}

.task-badge.difficulty-medium {
  background: #fef3c7;
  color: #d97706;
}

.task-badge.difficulty-hard {
  background: #fee2e2;
  color: #dc2626;
}

.theme-light .task-badge.priority-high {
  background: #fee2e2;
  color: #dc2626;
}

.task-description {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin: 0 0 var(--space-sm);
  line-height: 1.5;
}

.task-meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: var(--font-xs);
  color: var(--text-tertiary);
}

.task-meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.task-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex-shrink: 0;
}

.task-action-btn {
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--border-color);
  background: var(--surface-primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-sm);
  transition: all 0.2s ease;
}

.task-action-btn:hover {
  border-color: var(--primary-color);
  background: var(--surface-elevated);
}

.task-action-btn.complete-btn:hover {
  background: #d1fae5;
  border-color: #059669;
  color: #059669;
}

.task-action-btn.skip-btn:hover {
  background: #fef3c7;
  border-color: #d97706;
  color: #d97706;
}

.grow-flow-stats {
  display: flex;
  justify-content: center;
  gap: var(--space-xl);
  padding-top: var(--space-md);
  margin-top: var(--space-md);
  border-top: 1px solid var(--border-color);
}

.grow-stat {
  text-align: center;
}

.grow-stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
}

.grow-stat-label {
  font-size: var(--font-xs);
  color: var(--text-secondary);
}

/* Grow Flow Modal */
#growFlowModal .modal-content {
  max-width: 600px;
}

#growFlowModal .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

/* Success animation */
@keyframes taskComplete {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); background: #d1fae5; }
  100% { transform: scale(1); opacity: 0.6; }
}

.grow-flow-task.completing {
  animation: taskComplete 0.5s ease forwards;
}

/* Responsive */
@media (max-width: 768px) {
  .grow-flow-header-actions {
    flex-wrap: wrap;
  }

  .grow-flow-streak {
    width: 100%;
    justify-content: center;
    margin-bottom: var(--space-sm);
  }

  .grow-flow-task {
    flex-direction: column;
  }

  .task-type-icon {
    align-self: flex-start;
  }

  .task-actions {
    flex-direction: row;
    width: 100%;
    margin-top: var(--space-sm);
  }

  .task-action-btn {
    flex: 1;
  }

  .grow-flow-stats {
    flex-wrap: wrap;
    gap: var(--space-md);
  }

  .grow-stat {
    flex: 1 0 30%;
  }

  #growFlowModal .field-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   CONTENT EXPLORER STYLES
   ============================================================ */

/* Content Explorer Insights Grid */
.ce-insights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.ce-insight-stat {
  text-align: center;
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.ce-insight-label {
  display: block;
  font-size: var(--font-xs);
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.ce-insight-value {
  display: block;
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.ce-trend-tag {
  display: inline-block;
  padding: 2px 8px;
  background: var(--primary-color);
  color: white;
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  margin: 2px;
}

/* Content Explorer Results List */
.ce-results-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.ce-result-item {
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  transition: box-shadow 0.2s, border-color 0.2s;
}

.ce-result-item:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--primary-color);
}

.ce-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}

.ce-content-type {
  font-size: var(--font-xs);
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.ce-virality-badge {
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
}

.ce-virality-badge.score-high {
  background: #dcfce7;
  color: #166534;
}

.ce-virality-badge.score-medium {
  background: #fef3c7;
  color: #92400e;
}

.ce-virality-badge.score-low {
  background: #fee2e2;
  color: #991b1b;
}

.ce-result-title {
  font-size: var(--font-md);
  font-weight: 600;
  margin: 0 0 var(--space-xs);
  color: var(--text-primary);
}

.ce-result-desc {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin: 0 0 var(--space-sm);
  line-height: 1.5;
}

.ce-result-metrics {
  display: flex;
  gap: var(--space-md);
  font-size: var(--font-xs);
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.ce-competition {
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  text-transform: capitalize;
}

.ce-competition-low { background: #dcfce7; color: #166534; }
.ce-competition-medium { background: #fef3c7; color: #92400e; }
.ce-competition-high { background: #fee2e2; color: #991b1b; }

.ce-result-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

/* Content Explorer Detail */
.ce-detail-section {
  margin-bottom: var(--space-lg);
}

.ce-detail-section h4 {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--primary-color);
  margin: 0 0 var(--space-xs);
}

.ce-detail-section p {
  margin: 0;
  color: var(--text-primary);
  line-height: 1.6;
}

.ce-keyword-tag {
  display: inline-block;
  padding: 2px 8px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  margin: 2px;
}

.ce-detail-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-color);
}

.ce-metric-box {
  text-align: center;
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.ce-metric-value {
  display: block;
  font-size: var(--font-xl);
  font-weight: 700;
  color: var(--primary-color);
}

.ce-metric-label {
  display: block;
  font-size: var(--font-xs);
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ============================================================
   TRENDING TOPICS STYLES
   ============================================================ */

.tt-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.tt-overview-stat {
  text-align: center;
  padding: var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
}

.tt-stat-value {
  display: block;
  font-size: var(--font-xl);
  font-weight: 700;
}

.tt-stat-value.health-good { color: #059669; }
.tt-stat-value.health-medium { color: #d97706; }
.tt-stat-value.health-low { color: #dc2626; }

.tt-stat-label {
  display: block;
  font-size: var(--font-xs);
  color: var(--text-secondary);
}

.tt-overview-info {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  padding: var(--space-sm);
}

.tt-quick-win {
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
  border-left: 4px solid var(--success-color);
}

.tt-qw-topic {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.tt-qw-reason {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}

.tt-qw-meta {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
}

.tt-effort-low, .tt-potential-high { color: #059669; font-weight: 600; }
.tt-effort-medium, .tt-potential-medium { color: #d97706; font-weight: 600; }
.tt-effort-high, .tt-potential-low { color: #dc2626; font-weight: 600; }

.tt-trend-categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.tt-trend-cat-btn {
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-size: var(--font-xs);
  cursor: pointer;
  transition: all 0.2s;
}

.tt-trend-cat-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.tt-trend-cat-btn.active {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}

.tt-trends-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.tt-trend-item {
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}

.tt-trend-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}

.tt-trend-category {
  font-size: var(--font-xs);
  color: var(--text-secondary);
  text-transform: capitalize;
}

.tt-trend-strength {
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
}

.tt-trend-strength.strength-high { background: #dcfce7; color: #166534; }
.tt-trend-strength.strength-medium { background: #fef3c7; color: #92400e; }
.tt-trend-strength.strength-low { background: #fee2e2; color: #991b1b; }

.tt-trend-topic {
  font-size: var(--font-md);
  font-weight: 600;
  margin: 0 0 var(--space-xs);
  color: var(--text-primary);
}

.tt-trend-desc {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin: 0 0 var(--space-sm);
}

.tt-trend-meta {
  display: flex;
  gap: var(--space-md);
  font-size: var(--font-xs);
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.tt-trend-ideas {
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.tt-idea-chip {
  display: inline-block;
  padding: 2px 8px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  margin: 2px;
}

/* ============================================================
   CONTENT IDEAS GENERATOR STYLES
   ============================================================ */

.ci-checkbox-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.ci-checkbox-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-sm);
  cursor: pointer;
}

.ci-checkbox-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

.ci-strategy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.ci-strategy-item {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  padding: var(--space-sm);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
}

.ci-strategy-item strong {
  color: var(--text-primary);
}

.ci-ideas-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.ci-idea-item {
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  transition: box-shadow 0.2s, border-color 0.2s;
}

.ci-idea-item:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--primary-color);
}

.ci-idea-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}

.ci-idea-type {
  font-size: var(--font-xs);
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.ci-idea-viral {
  font-weight: 600;
  color: var(--warning-color);
}

.ci-idea-title {
  font-size: var(--font-md);
  font-weight: 600;
  margin: 0 0 var(--space-xs);
  color: var(--text-primary);
}

.ci-idea-desc {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin: 0 0 var(--space-sm);
  line-height: 1.5;
}

.ci-idea-meta {
  display: flex;
  gap: var(--space-md);
  font-size: var(--font-xs);
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.difficulty-easy { color: #059669; }
.difficulty-medium { color: #d97706; }
.difficulty-hard { color: #dc2626; }

.ci-idea-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.ci-detail-section {
  margin-bottom: var(--space-lg);
}

.ci-detail-section h4 {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--primary-color);
  margin: 0 0 var(--space-xs);
}

.ci-detail-section p, .ci-detail-section ol {
  margin: 0;
  color: var(--text-primary);
  line-height: 1.6;
}

.ci-detail-section ol {
  padding-left: 1.5em;
}

.ci-detail-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-color);
}

.ci-metric-box {
  text-align: center;
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.ci-metric-value {
  display: block;
  font-size: var(--font-lg);
  font-weight: 700;
  color: var(--primary-color);
}

.ci-metric-label {
  display: block;
  font-size: var(--font-xs);
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Responsive adjustments for Content Explorer */
@media (max-width: 768px) {
  .ce-insights-grid {
    grid-template-columns: 1fr;
  }

  .ce-detail-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .tt-overview-grid {
    grid-template-columns: 1fr;
  }

  .ci-checkbox-group {
    grid-template-columns: 1fr;
  }

  .ci-strategy-grid {
    grid-template-columns: 1fr;
  }

  .ci-detail-metrics {
    grid-template-columns: 1fr;
  }
}

/* ============================================================

/* ============================================================
   MOBILE BOTTOM NAVIGATION (Clean Implementation)
   ============================================================ */

/* Bottom Navigation Bar - DISABLED (using sidebar instead) */
.bottom-nav,
.more-menu,
.more-menu-overlay {
  display: none !important;
}

/* Old mobile bottom nav - now disabled
@media (max-width: 768px) {
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    z-index: 1000;
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
*/
@media (max-width: 768px) {
  .bottom-nav {
    display: none !important;
  }

  .bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 4px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 10px;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.2s;
    text-decoration: none;
  }

  .bottom-nav-item:hover,
  .bottom-nav-item:active {
    color: var(--accent);
  }

  .bottom-nav-item.active {
    color: var(--accent);
  }

  .bottom-nav-item .nav-icon {
    font-size: 20px;
    line-height: 1;
  }

  .bottom-nav-item .nav-label {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  /* "More" menu popup */
  .more-menu {
    display: none;
    position: fixed;
    bottom: 70px;
    left: 10px;
    right: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px;
    z-index: 1001;
    max-height: 60vh;
    overflow-y: auto;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
  }

  .more-menu.active {
    display: block;
  }

  .more-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: none;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
  }

  .more-menu-item:hover,
  .more-menu-item:active {
    background: var(--glass-light);
  }

  .more-menu-item.active {
    background: rgba(108, 140, 255, 0.15);
    color: var(--accent);
  }

  .more-menu-item .menu-icon {
    font-size: 18px;
    width: 24px;
    text-align: center;
  }

  .more-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.3);
    z-index: 1000;
  }

  .more-menu-overlay.active {
    display: block;
  }

  /* Hide desktop tab navigation */
  .tab-nav {
    display: none !important;
  }

  /* Adjust main content for bottom nav */
  .dashboard,
  .main-content,
  .content-area,
  [class*="-content"] {
    padding-bottom: 80px !important;
  }

  /* Simplify header */
  .app-header {
    padding: 10px 16px;
  }

  .brand-text .sub {
    display: none;
  }

  .brand-text .name {
    font-size: 16px;
  }

  /* Hide hamburger toggle since we use bottom nav */
  .mobile-nav-toggle,
  .mobile-sidebar,
  .mobile-sidebar-overlay,
  .mobile-current-tab,
  .settings-menu-container {
    display: none !important;
  }
}

/* Small screens adjustments */
@media (max-width: 480px) {
  .bottom-nav-item .nav-label {
    font-size: 9px;
  }

  .bottom-nav-item .nav-icon {
    font-size: 18px;
  }

  .app-header {
    padding: 8px 12px;
  }

  .brand-text .name {
    font-size: 14px;
  }
}

/* ============================================================
   NEW FEATURES STYLES - Added Feb 2026
   ============================================================ */

/* Common Layout Patterns */
.youtube-layout,
.podcast-layout,
.faq-layout,
.press-layout,
.competitor-layout,
.sov-layout,
.conversion-layout,
.persona-layout,
.predictive-layout,
.auto-opt-layout,
.shopify-layout,
.crm-layout,
.zapier-layout,
.client-layout,
.wl-reports-layout,
.subscription-layout {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 992px) {
  .youtube-layout,
  .podcast-layout,
  .faq-layout,
  .press-layout,
  .predictive-layout {
    grid-template-columns: 1fr 1fr;
  }
}

/* Page Header */
.page-header {
  margin-bottom: var(--space-xl);
}

.page-header-content {
  text-align: center;
}

.page-header-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 var(--space-sm);
}

.page-header-desc {
  color: var(--text-muted);
  font-size: 1rem;
  margin: 0;
}

/* ============================================================
   YouTube SEO Tab
   ============================================================ */
.youtube-seo-container {
  padding: var(--space-lg);
  max-width: 1400px;
  margin: 0 auto;
}

.yt-result-section {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border);
}

.yt-result-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}

.result-header h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.yt-result-content {
  background: var(--bg-secondary);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  white-space: pre-wrap;
  font-size: 0.9rem;
  line-height: 1.6;
}

.yt-tags-container,
.yt-hashtags-container,
.pod-tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.yt-tag,
.pod-tag {
  display: inline-block;
  padding: 4px 12px;
  background: var(--primary);
  color: white;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
}

.yt-hashtag {
  display: inline-block;
  padding: 4px 12px;
  background: var(--bg-tertiary);
  color: var(--primary);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
}

.yt-thumbnail-ideas {
  display: grid;
  gap: var(--space-sm);
}

.yt-thumbnail-idea {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.yt-thumbnail-idea .idea-number {
  width: 24px;
  height: 24px;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
}

.yt-score-display {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.score-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(var(--primary) var(--score-percent, 0%), var(--bg-tertiary) 0%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.score-circle::before {
  content: '';
  position: absolute;
  inset: 8px;
  background: var(--bg-primary);
  border-radius: 50%;
}

.score-circle .score-value,
.score-circle .score-label {
  position: relative;
  z-index: 1;
}

.score-circle .score-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary);
}

.score-circle .score-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.yt-score-breakdown {
  display: grid;
  gap: var(--space-sm);
}

.score-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.score-item-label {
  font-size: 0.9rem;
}

.score-item-value {
  font-weight: 600;
}

.score-item-value.good { color: var(--success); }
.score-item-value.warning { color: var(--warning); }
.score-item-value.bad { color: var(--danger); }

/* ============================================================
   Podcast SEO Tab
   ============================================================ */
.podcast-seo-container {
  padding: var(--space-lg);
  max-width: 1400px;
  margin: 0 auto;
}

.pod-result-section {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border);
}

.pod-result-section:last-child {
  border-bottom: none;
}

.pod-result-content {
  background: var(--bg-secondary);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  white-space: pre-wrap;
  font-size: 0.9rem;
  line-height: 1.6;
}

.platform-tips {
  display: grid;
  gap: var(--space-md);
}

.platform-tip {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.platform-icon {
  font-size: 1.5rem;
}

.platform-content strong {
  display: block;
  margin-bottom: var(--space-xs);
}

.platform-content p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.file-upload-area {
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.file-upload-area:hover {
  border-color: var(--primary);
  background: var(--bg-secondary);
}

.file-upload-area .upload-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: var(--space-sm);
}

.file-upload-area .upload-text {
  display: block;
  font-weight: 500;
  margin-bottom: var(--space-xs);
}

.file-upload-area .upload-hint {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ============================================================
   FAQ Generator Tab
   ============================================================ */
.faq-generator-container {
  padding: var(--space-lg);
  max-width: 1400px;
  margin: 0 auto;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-sm);
}

.faq-results-list {
  display: grid;
  gap: var(--space-md);
}

.faq-item {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  font-weight: 600;
  cursor: pointer;
  background: var(--bg-tertiary);
}

.faq-question:hover {
  background: var(--bg-hover);
}

.faq-question .toggle-icon {
  transition: transform 0.2s;
}

.faq-item.open .faq-question .toggle-icon {
  transform: rotate(180deg);
}

.faq-answer {
  padding: var(--space-md);
  display: none;
  line-height: 1.6;
}

.faq-item.open .faq-answer {
  display: block;
}

.faq-item-actions {
  display: flex;
  gap: var(--space-xs);
  padding: 0 var(--space-md) var(--space-md);
}

.benefits-list {
  display: grid;
  gap: var(--space-md);
}

.benefit-item {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.benefit-icon {
  font-size: 1.5rem;
}

.benefit-content strong {
  display: block;
  margin-bottom: var(--space-xs);
}

.benefit-content p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ============================================================
   Press Release Tab
   ============================================================ */
.press-release-container {
  padding: var(--space-lg);
  max-width: 1400px;
  margin: 0 auto;
}

.pr-result-content {
  background: var(--bg-secondary);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  line-height: 1.8;
}

.pr-result-content .pr-header {
  text-align: center;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 2px solid var(--border);
}

.pr-result-content .pr-headline {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.pr-result-content .pr-subhead {
  font-size: 1.1rem;
  color: var(--text-muted);
}

.pr-result-content .pr-dateline {
  font-weight: 600;
  margin-bottom: var(--space-md);
}

.pr-result-content .pr-body p {
  margin-bottom: var(--space-md);
}

.pr-result-content .pr-quote {
  font-style: italic;
  padding-left: var(--space-lg);
  border-left: 3px solid var(--primary);
  margin: var(--space-lg) 0;
}

.pr-result-content .pr-boilerplate {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
}

.pr-result-content .pr-contact {
  margin-top: var(--space-lg);
  font-size: 0.9rem;
}

.distribution-checklist {
  display: grid;
  gap: var(--space-sm);
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.checklist-item:hover {
  background: var(--bg-hover);
}

/* ============================================================
   Competitor Tracker Tab
   ============================================================ */
.competitor-tracker-container {
  padding: var(--space-lg);
  max-width: 1400px;
  margin: 0 auto;
}

.competitor-add-form .form-row {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-end;
}

.competitor-list {
  margin-top: var(--space-md);
  display: grid;
  gap: var(--space-sm);
}

.competitor-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.competitor-item .comp-info {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.competitor-item .comp-favicon {
  width: 20px;
  height: 20px;
  border-radius: 4px;
}

.competitor-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-md);
}

.comp-overview-card {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.comp-overview-card .comp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

.comp-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

.comp-stat {
  text-align: center;
  padding: var(--space-sm);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
}

.comp-stat-value {
  font-size: 1.25rem;
  font-weight: 700;
}

.comp-stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.comp-content-list {
  display: grid;
  gap: var(--space-sm);
}

.comp-content-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.keyword-gap-controls {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.keyword-gap-results {
  display: grid;
  gap: var(--space-sm);
}

.ranking-changes-list {
  display: grid;
  gap: var(--space-sm);
}

.ranking-change-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.rank-change.up { color: var(--success); }
.rank-change.down { color: var(--danger); }

/* ============================================================
   Share of Voice Tab
   ============================================================ */
.share-of-voice-container {
  padding: var(--space-lg);
  max-width: 1400px;
  margin: 0 auto;
}

.sov-controls-row {
  display: flex;
  gap: var(--space-md);
  align-items: flex-end;
  flex-wrap: wrap;
}

.sov-controls-row .form-group {
  flex: 1;
  min-width: 200px;
}

.sov-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-md);
}

.sov-stat-card {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: center;
}

.sov-stat-card.your-brand {
  background: var(--primary);
  color: white;
}

.sov-stat-header {
  font-size: 0.85rem;
  margin-bottom: var(--space-xs);
}

.sov-stat-value {
  font-size: 1.75rem;
  font-weight: 700;
}

.sov-stat-trend {
  font-size: 0.8rem;
}

.sov-chart-container {
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sov-chart-placeholder {
  text-align: center;
  color: var(--text-muted);
}

.sov-chart-placeholder .placeholder-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: var(--space-sm);
}

.sov-keyword-table {
  overflow-x: auto;
}

.sov-opportunities-list {
  display: grid;
  gap: var(--space-sm);
}

.sov-opportunity {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

/* ============================================================
   Conversion Tracking Tab
   ============================================================ */
.conversion-tracking-container {
  padding: var(--space-lg);
  max-width: 1400px;
  margin: 0 auto;
}

.conversion-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.conv-stat-card {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.conv-stat-icon {
  font-size: 2rem;
}

.conv-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
}

.conv-stat-label {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.conv-goals-list {
  display: grid;
  gap: var(--space-sm);
}

.conv-goal-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.conv-goal-info {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.conv-goal-icon {
  font-size: 1.25rem;
}

.conv-goal-stats {
  display: flex;
  gap: var(--space-md);
}

.conv-content-table {
  overflow-x: auto;
}

/* ============================================================
   AI Persona Chat Tab
   ============================================================ */
.ai-persona-container {
  padding: var(--space-lg);
  max-width: 1200px;
  margin: 0 auto;
}

.persona-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.persona-card {
  background: var(--bg-secondary);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.persona-card:hover {
  background: var(--bg-hover);
}

.persona-card.active {
  border-color: var(--primary);
  background: rgba(79, 108, 229, 0.1);
}

.persona-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: var(--space-sm);
}

.persona-name {
  font-weight: 600;
  display: block;
  margin-bottom: var(--space-xs);
}

.persona-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: block;
}

.custom-persona-setup {
  background: var(--bg-secondary);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
}

.persona-context-setup {
  margin-top: var(--space-md);
}

.persona-chat-messages {
  min-height: 300px;
  max-height: 500px;
  overflow-y: auto;
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}

.chat-welcome {
  text-align: center;
  padding: var(--space-xl);
  color: var(--text-muted);
}

.chat-welcome .welcome-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: var(--space-md);
}

.persona-message {
  margin-bottom: var(--space-md);
  max-width: 80%;
}

.persona-message.user {
  margin-left: auto;
  text-align: right;
}

.persona-message .message-content {
  display: inline-block;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
}

.persona-message.user .message-content {
  background: var(--primary);
  color: white;
}

.persona-message.ai .message-content {
  background: var(--bg-tertiary);
}

.persona-chat-input {
  display: flex;
  gap: var(--space-sm);
}

.persona-chat-input .field {
  flex: 1;
}

.persona-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.suggestion-btn {
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
}

.suggestion-btn:hover {
  background: var(--bg-hover);
  border-color: var(--primary);
}

/* ============================================================
   Predictive Rankings Tab
   ============================================================ */
.predictive-rankings-container {
  padding: var(--space-lg);
  max-width: 1400px;
  margin: 0 auto;
}

.pred-position-display {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.pred-position-circle {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: white;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-md);
}

.pred-position-circle .position-value {
  font-size: 3rem;
  font-weight: 700;
}

.pred-position-circle .position-label {
  font-size: 0.85rem;
  opacity: 0.9;
}

.pred-confidence {
  font-size: 1rem;
}

.pred-confidence .confidence-value {
  font-weight: 600;
  color: var(--primary);
}

.pred-score-breakdown {
  display: grid;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.pred-serp-preview {
  margin-top: var(--space-lg);
}

.pred-serp-preview h4 {
  margin-bottom: var(--space-md);
}

.serp-preview-container {
  background: white;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid #ddd;
}

.serp-result {
  margin-bottom: var(--space-md);
}

.serp-result .serp-title {
  color: #1a0dab;
  font-size: 1.1rem;
  margin-bottom: 2px;
}

.serp-result .serp-url {
  color: #006621;
  font-size: 0.85rem;
  margin-bottom: 2px;
}

.serp-result .serp-desc {
  color: #545454;
  font-size: 0.9rem;
}

.serp-result.highlight {
  background: #fffde7;
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--primary);
}

.pred-suggestions-list {
  display: grid;
  gap: var(--space-sm);
}

.pred-suggestion {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.pred-suggestion .suggestion-impact {
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
}

.pred-suggestion .suggestion-impact.high {
  background: var(--success);
  color: white;
}

.pred-suggestion .suggestion-impact.medium {
  background: var(--warning);
  color: #333;
}

.info-list {
  display: grid;
  gap: var(--space-sm);
}

.info-item {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}

.info-icon {
  flex-shrink: 0;
}

/* ============================================================
   Auto-Optimize Tab
   ============================================================ */
.auto-optimize-container {
  padding: var(--space-lg);
  max-width: 1200px;
  margin: 0 auto;
}

.auto-opt-score-compare {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.score-before,
.score-after {
  text-align: center;
}

.score-before .score-value,
.score-after .score-value {
  font-size: 2.5rem;
  font-weight: 700;
}

.score-before .score-value {
  color: var(--text-muted);
}

.score-after .score-value {
  color: var(--success);
}

.score-label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.score-arrow {
  font-size: 2rem;
  color: var(--primary);
}

.auto-opt-changes-list {
  display: grid;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.change-item {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.change-item .change-type {
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--primary);
  color: white;
}

/* ============================================================
   Shopify Integration Tab
   ============================================================ */
.shopify-integration-container {
  padding: var(--space-lg);
  max-width: 1200px;
  margin: 0 auto;
}

.connection-status {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.connection-status.connected {
  background: rgba(16, 185, 129, 0.1);
}

.connection-status .status-icon {
  font-size: 1.5rem;
}

.connection-status .status-info {
  flex: 1;
}

.connection-status .status-info strong {
  display: block;
}

.connection-status .status-text {
  font-size: 0.85rem;
  color: var(--success);
}

.shopify-products-list,
.shopify-collections-list {
  display: grid;
  gap: var(--space-sm);
}

.shopify-product-item,
.shopify-collection-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.product-info {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.product-image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.product-seo-score {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.seo-score-badge {
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 600;
}

.seo-score-badge.good { background: var(--success); color: white; }
.seo-score-badge.warning { background: var(--warning); color: #333; }
.seo-score-badge.bad { background: var(--danger); color: white; }

/* ============================================================
   CRM Integration Tab
   ============================================================ */
.crm-integration-container {
  padding: var(--space-lg);
  max-width: 1200px;
  margin: 0 auto;
}

.crm-selection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.crm-card {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.crm-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-tertiary);
}

.crm-logo {
  font-size: 1.5rem;
}

.crm-card-header h3 {
  margin: 0;
}

.crm-card-body {
  padding: var(--space-lg);
}

.crm-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.crm-stat {
  text-align: center;
  padding: var(--space-sm);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
}

.crm-stat .stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  display: block;
}

.crm-stat .stat-label {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.crm-syncs-list {
  display: grid;
  gap: var(--space-sm);
}

.crm-sync-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

/* ============================================================
   Zapier Integration Tab
   ============================================================ */
.zapier-triggers-container {
  padding: var(--space-lg);
  max-width: 1200px;
  margin: 0 auto;
}

.zapier-triggers-list {
  display: grid;
  gap: var(--space-md);
}

.zapier-trigger-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-tertiary);
  border-radius: 28px;
  transition: 0.3s;
}

.toggle-slider::before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background: white;
  border-radius: 50%;
  transition: 0.3s;
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--primary);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(22px);
}

.trigger-info {
  flex: 1;
}

.trigger-info strong {
  display: block;
  margin-bottom: 2px;
}

.trigger-info p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.popular-zaps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-md);
}

.zap-template {
  background: var(--bg-secondary);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  text-align: center;
}

.zap-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-size: 1.5rem;
  margin-bottom: var(--space-sm);
}

.zap-arrow {
  color: var(--text-muted);
}

.zap-template strong {
  display: block;
  margin-bottom: var(--space-xs);
}

.zap-template p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ============================================================
   Client Portal Tab
   ============================================================ */
.client-portal-container {
  padding: var(--space-lg);
  max-width: 1200px;
  margin: 0 auto;
}

.clients-list {
  display: grid;
  gap: var(--space-sm);
}

.client-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.client-info {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.client-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.25rem;
}

.client-details h4 {
  margin: 0 0 2px;
}

.client-details span {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.client-actions {
  display: flex;
  gap: var(--space-xs);
}

.input-with-addon {
  display: flex;
}

.input-with-addon .field {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-addon {
  display: flex;
  align-items: center;
  padding: 0 var(--space-md);
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.color-field {
  width: 60px;
  height: 40px;
  padding: 4px;
  cursor: pointer;
}

.share-links-list {
  display: grid;
  gap: var(--space-sm);
}

.share-link-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

/* ============================================================
   White Label Reports Tab
   ============================================================ */
.white-label-reports-container {
  padding: var(--space-lg);
  max-width: 1200px;
  margin: 0 auto;
}

.date-range-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.date-separator {
  color: var(--text-muted);
}

.wl-reports-list {
  display: grid;
  gap: var(--space-sm);
}

.wl-report-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.report-info {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.report-icon {
  font-size: 1.5rem;
}

.report-details h4 {
  margin: 0 0 2px;
}

.report-details span {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ============================================================
   Subscription Tiers Tab
   ============================================================ */
.subscription-tiers-container {
  padding: var(--space-lg);
  max-width: 1200px;
  margin: 0 auto;
}

.current-plan-card {
  margin-bottom: var(--space-xl);
}

.current-plan-display {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.plan-badge {
  padding: var(--space-sm) var(--space-lg);
  background: var(--primary);
  color: white;
  border-radius: var(--radius-full);
  font-weight: 600;
}

.plan-details h4 {
  margin: 0;
}

.plan-details p {
  margin: 0;
  color: var(--text-muted);
}

.usage-stats {
  display: grid;
  gap: var(--space-md);
}

.usage-item {
  display: grid;
  grid-template-columns: 150px 1fr 80px;
  align-items: center;
  gap: var(--space-md);
}

.usage-bar {
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
}

.usage-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 4px;
  transition: width 0.3s;
}

.usage-text {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: right;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.pricing-card {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  position: relative;
  border: 2px solid transparent;
}

.pricing-card.popular {
  border-color: var(--primary);
}

.popular-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 16px;
  background: var(--primary);
  color: white;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
}

.pricing-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.pricing-header h3 {
  margin: 0 0 var(--space-sm);
}

.pricing-price {
  font-size: 2rem;
  font-weight: 700;
}

.pricing-price span {
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-muted);
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-lg);
}

.pricing-features li {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border);
}

.pricing-features li:last-child {
  border-bottom: none;
}

.pricing-btn {
  width: 100%;
}

.billing-history-list {
  display: grid;
  gap: var(--space-sm);
}

.billing-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

/* ============================================================
   Common Utility Classes for New Features
   ============================================================ */
.divider-with-text {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-lg) 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.divider-with-text::before,
.divider-with-text::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.input-with-btn {
  display: flex;
  gap: var(--space-sm);
}

.input-with-btn .field {
  flex: 1;
}

.char-count {
  text-align: right;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.tips-list {
  display: grid;
  gap: var(--space-sm);
}

.tip-item {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}

.tip-icon {
  flex-shrink: 0;
}

.empty-state-box {
  text-align: center;
  padding: var(--space-xl);
  color: var(--text-muted);
}

.empty-state-box .empty-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: var(--space-md);
}

.empty-state-box h3 {
  margin: 0 0 var(--space-sm);
  color: var(--text-primary);
}

.empty-state-box p {
  margin: 0;
}

/* Mobile adjustments for new features */
@media (max-width: 768px) {
  .youtube-layout,
  .podcast-layout,
  .faq-layout,
  .press-layout,
  .predictive-layout {
    grid-template-columns: 1fr;
  }

  .persona-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .usage-item {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
  }

  .usage-label {
    font-weight: 500;
  }

  .usage-text {
    text-align: left;
  }

  .current-plan-display {
    flex-direction: column;
    text-align: center;
  }

  .sov-controls-row {
    flex-direction: column;
  }

  .sov-controls-row .form-group {
    width: 100%;
  }
}

/* ============================================================
   Broken Link Checker Tab
   ============================================================ */
.broken-links-container {
  padding: var(--space-lg);
  max-width: 1400px;
  margin: 0 auto;
}

.broken-links-layout {
  display: grid;
  gap: var(--space-lg);
}

.bl-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.bl-stat {
  background: var(--bg-secondary);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  text-align: center;
}

.bl-stat-value {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
}

.bl-stat-label {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.bl-stat-success .bl-stat-value { color: var(--success); }
.bl-stat-error .bl-stat-value { color: var(--danger); }
.bl-stat-warning .bl-stat-value { color: var(--warning); }

.bl-links-list {
  display: grid;
  gap: var(--space-sm);
}

.bl-link-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--success);
}

.bl-link-item.broken { border-left-color: var(--danger); }
.bl-link-item.redirect { border-left-color: var(--warning); }

.bl-link-url {
  flex: 1;
  word-break: break-all;
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

.bl-link-status {
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 500;
}

.bl-link-status.status-200 { background: var(--success); color: white; }
.bl-link-status.status-301,
.bl-link-status.status-302 { background: var(--warning); color: black; }
.bl-link-status.status-404,
.bl-link-status.status-500 { background: var(--danger); color: white; }

/* ============================================================
   Redirect Manager Tab
   ============================================================ */
.redirect-manager-container {
  padding: var(--space-lg);
  max-width: 1400px;
  margin: 0 auto;
}

.redirect-layout {
  display: grid;
  gap: var(--space-lg);
}

.redirect-list {
  display: grid;
  gap: var(--space-sm);
}

.redirect-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.redirect-from,
.redirect-to {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.redirect-arrow {
  color: var(--text-muted);
  font-size: 1.2rem;
}

.redirect-type {
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--primary);
  color: white;
}

.redirect-type.type-302 { background: var(--warning); color: black; }

.rd-config-tabs {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}

.rd-config-tab {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
}

.rd-config-tab.active {
  background: var(--primary);
  color: white;
}

/* ============================================================
   Hreflang Generator Tab
   ============================================================ */
.hreflang-container {
  padding: var(--space-lg);
  max-width: 1400px;
  margin: 0 auto;
}

.hreflang-layout {
  display: grid;
  gap: var(--space-lg);
}

.hf-versions-list {
  display: grid;
  gap: var(--space-sm);
}

.hf-version-row {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.hf-lang-select {
  flex: 1;
  min-width: 150px;
}

.hf-url-input {
  flex: 2;
}

/* ============================================================
   XML Sitemap Generator Tab
   ============================================================ */
.sitemap-container {
  padding: var(--space-lg);
  max-width: 1400px;
  margin: 0 auto;
}

.sitemap-layout {
  display: grid;
  gap: var(--space-lg);
}

.sm-stats {
  margin-bottom: var(--space-md);
  color: var(--text-muted);
}

/* ============================================================
   Robots.txt Editor Tab
   ============================================================ */
.robots-container {
  padding: var(--space-lg);
  max-width: 1400px;
  margin: 0 auto;
}

.robots-layout {
  display: grid;
  gap: var(--space-lg);
}

.code-textarea {
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

.rb-quick-rules {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.rb-quick-rule {
  font-size: 0.8rem;
}

#rbValidationResults .validation-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-xs);
}

.validation-item.valid { border-left: 3px solid var(--success); }
.validation-item.warning { border-left: 3px solid var(--warning); }
.validation-item.error { border-left: 3px solid var(--danger); }

/* ============================================================
   Viral Score Predictor Tab
   ============================================================ */
.viral-score-container {
  padding: var(--space-lg);
  max-width: 1400px;
  margin: 0 auto;
}

.viral-layout {
  display: grid;
  gap: var(--space-lg);
}

.vs-score-display {
  text-align: center;
  padding: var(--space-xl);
}

.vs-score-circle {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: conic-gradient(var(--primary) 0%, var(--bg-tertiary) 0%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-md);
  position: relative;
}

.vs-score-circle::before {
  content: '';
  position: absolute;
  width: 120px;
  height: 120px;
  background: var(--bg-primary);
  border-radius: 50%;
}

.vs-score-value {
  position: relative;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

.vs-score-label {
  position: relative;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.vs-score-rating {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--primary);
}

.vs-factors {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.vs-factor-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.vs-factor-bar {
  width: 100px;
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.vs-factor-fill {
  height: 100%;
  background: var(--primary);
  border-radius: var(--radius-full);
}

.vs-suggestions {
  margin-top: var(--space-lg);
}

.vs-suggestion-item {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm);
  margin-bottom: var(--space-xs);
}

/* ============================================================
   Hashtag Research Tab
   ============================================================ */
.hashtag-container {
  padding: var(--space-lg);
  max-width: 1400px;
  margin: 0 auto;
}

.hashtag-layout {
  display: grid;
  gap: var(--space-lg);
}

.ht-categories {
  display: grid;
  gap: var(--space-lg);
}

.ht-category h4 {
  margin-bottom: var(--space-sm);
  color: var(--text-primary);
}

.ht-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.ht-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 6px 12px;
  background: var(--bg-secondary);
  border-radius: var(--radius-full);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}

.ht-tag:hover {
  background: var(--bg-hover);
}

.ht-tag.selected {
  background: var(--primary);
  color: white;
}

.ht-tag-volume {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.ht-selected {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.ht-selected-list {
  margin: var(--space-sm) 0;
  font-family: var(--font-mono);
  word-break: break-all;
}

/* ============================================================
   Influencer Finder Tab
   ============================================================ */
.influencer-container {
  padding: var(--space-lg);
  max-width: 1400px;
  margin: 0 auto;
}

.influencer-layout {
  display: grid;
  gap: var(--space-lg);
}

.influencer-list {
  display: grid;
  gap: var(--space-md);
}

.influencer-card {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.influencer-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.influencer-info {
  flex: 1;
}

.influencer-name {
  font-weight: 600;
  margin-bottom: 4px;
}

.influencer-handle {
  color: var(--primary);
  font-size: 0.9rem;
  margin-bottom: var(--space-xs);
}

.influencer-stats {
  display: flex;
  gap: var(--space-md);
  font-size: 0.85rem;
  color: var(--text-muted);
}

.influencer-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.influencer-tag {
  padding: 2px 8px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
}

/* ============================================================
   TikTok SEO Tab
   ============================================================ */
.tiktok-container {
  padding: var(--space-lg);
  max-width: 1400px;
  margin: 0 auto;
}

.tiktok-layout {
  display: grid;
  gap: var(--space-lg);
}

.tt-section {
  margin-bottom: var(--space-lg);
}

.tt-section h4 {
  margin-bottom: var(--space-sm);
  color: var(--text-primary);
}

.tt-result-box {
  background: var(--bg-secondary);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  line-height: 1.6;
}

.tt-hashtags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.tt-hashtag {
  padding: 6px 12px;
  background: var(--bg-secondary);
  border-radius: var(--radius-full);
  color: var(--primary);
  font-weight: 500;
}

.tt-sounds {
  display: grid;
  gap: var(--space-sm);
}

.tt-sound-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.tt-times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-sm);
}

.tt-time-slot {
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  text-align: center;
}

.tt-tips {
  display: grid;
  gap: var(--space-sm);
}

.tt-tip {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.tt-copy-btn {
  margin-top: var(--space-xs);
}

/* ============================================================
   Content Repurposer Tab
   ============================================================ */
.repurpose-container {
  padding: var(--space-lg);
  max-width: 1400px;
  margin: 0 auto;
}

.repurpose-layout {
  display: grid;
  gap: var(--space-lg);
}

.rp-result-content {
  background: var(--bg-secondary);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  line-height: 1.8;
  white-space: pre-wrap;
}

/* ============================================================
   Tone Adjuster Tab
   ============================================================ */
.tone-container {
  padding: var(--space-lg);
  max-width: 1400px;
  margin: 0 auto;
}

.tone-layout {
  display: grid;
  gap: var(--space-lg);
}

.tone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-sm);
}

.tone-option input {
  display: none;
}

.tone-card {
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
  border: 2px solid transparent;
  text-align: center;
}

.tone-option input:checked + .tone-card {
  border-color: var(--primary);
  background: var(--bg-hover);
}

.tone-card:hover {
  background: var(--bg-hover);
}

.tone-icon {
  display: block;
  font-size: 2rem;
  margin-bottom: var(--space-xs);
}

.tone-name {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}

.tone-desc {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.ta-result-content {
  background: var(--bg-secondary);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  line-height: 1.8;
  white-space: pre-wrap;
}

/* ============================================================
   Translation Tool Tab
   ============================================================ */
.translation-container {
  padding: var(--space-lg);
  max-width: 1400px;
  margin: 0 auto;
}

.translation-layout {
  display: grid;
  gap: var(--space-lg);
}

.tr-result-content {
  background: var(--bg-secondary);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  line-height: 1.8;
  white-space: pre-wrap;
}

.tr-notes {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--warning);
}

.tr-notes h4 {
  margin-bottom: var(--space-sm);
}

/* ============================================================
   Voice Search Optimizer Tab
   ============================================================ */
.voice-search-container {
  padding: var(--space-lg);
  max-width: 1400px;
  margin: 0 auto;
}

.voice-layout {
  display: grid;
  gap: var(--space-lg);
}

.vo-section {
  margin-bottom: var(--space-lg);
}

.vo-section h4 {
  margin-bottom: var(--space-sm);
  color: var(--text-primary);
}

.vo-list {
  display: grid;
  gap: var(--space-sm);
}

.vo-item {
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  line-height: 1.6;
}

.vo-item-question {
  font-weight: 600;
  margin-bottom: var(--space-xs);
  color: var(--primary);
}

.vo-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.vo-keyword {
  padding: 6px 12px;
  background: var(--bg-secondary);
  border-radius: var(--radius-full);
  font-size: 0.9rem;
}

.vo-tips {
  display: grid;
  gap: var(--space-sm);
}

.vo-tip {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

/* ============================================================
   Page Speed Analyzer Tab
   ============================================================ */
.pagespeed-container {
  padding: var(--space-lg);
  max-width: 1400px;
  margin: 0 auto;
}

.pagespeed-layout {
  display: grid;
  gap: var(--space-lg);
}

.ps-scores {
  display: flex;
  justify-content: center;
  gap: var(--space-xl);
  padding: var(--space-lg);
}

.ps-score-item {
  text-align: center;
}

.ps-score-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-sm);
  border: 4px solid var(--bg-tertiary);
}

.ps-score-circle.score-good { border-color: var(--success); }
.ps-score-circle.score-moderate { border-color: var(--warning); }
.ps-score-circle.score-poor { border-color: var(--danger); }

.ps-score-value {
  font-size: 1.8rem;
  font-weight: 700;
}

.ps-score-label {
  color: var(--text-muted);
}

.ps-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.ps-metric-card {
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.ps-metric-name {
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.ps-metric-value {
  font-size: 1.2rem;
  color: var(--primary);
}

.ps-recommendations {
  display: grid;
  gap: var(--space-sm);
}

.ps-rec-item {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.ps-rec-icon {
  font-size: 1.5rem;
}

.ps-rec-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.ps-rec-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* ============================================================
   Core Web Vitals Tab
   ============================================================ */
.cwv-container {
  padding: var(--space-lg);
  max-width: 1400px;
  margin: 0 auto;
}

.cwv-layout {
  display: grid;
  gap: var(--space-lg);
}

.cwv-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.cwv-metric {
  background: var(--bg-secondary);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  text-align: center;
}

.cwv-metric-header {
  margin-bottom: var(--space-md);
}

.cwv-metric-name {
  font-size: 1.5rem;
  font-weight: 700;
  display: block;
}

.cwv-metric-full {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.cwv-metric-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.cwv-metric-status {
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  display: inline-block;
  margin-bottom: var(--space-xs);
}

.cwv-metric-status.good { background: var(--success); color: white; }
.cwv-metric-status.moderate { background: var(--warning); color: black; }
.cwv-metric-status.poor { background: var(--danger); color: white; }

.cwv-metric-target {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.cwv-tips {
  display: grid;
  gap: var(--space-sm);
}

.cwv-tip-item {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.cwv-explainer {
  display: grid;
  gap: var(--space-md);
}

.cwv-explain-item {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.cwv-explain-icon {
  font-size: 2rem;
}

.cwv-explain-item strong {
  display: block;
  margin-bottom: 4px;
}

.cwv-explain-item p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* ============================================================
   Mobile Usability Tab
   ============================================================ */
.mobile-check-container {
  padding: var(--space-lg);
  max-width: 1400px;
  margin: 0 auto;
}

.mobile-layout {
  display: grid;
  gap: var(--space-lg);
}

.mu-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  font-size: 1.2rem;
}

.mu-status-icon {
  font-size: 3rem;
}

.mu-status.passed .mu-status-icon::after { content: '✅'; }
.mu-status.failed .mu-status-icon::after { content: '❌'; }

.mu-checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.mu-check-card {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.mu-check-icon {
  font-size: 1.5rem;
}

.mu-check-card.passed .mu-check-icon::after { content: '✅'; }
.mu-check-card.failed .mu-check-icon::after { content: '❌'; }
.mu-check-card.warning .mu-check-icon::after { content: '⚠️'; }

.mu-issues {
  padding: var(--space-md);
  background: rgba(255,0,0,0.1);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
}

.mu-issues h4 {
  margin-bottom: var(--space-sm);
  color: var(--danger);
}

.mu-issue-item {
  padding: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.mu-recommendations {
  display: grid;
  gap: var(--space-sm);
}

.mu-checklist {
  display: grid;
  gap: var(--space-sm);
}

.mu-check-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.mu-check-item:hover {
  background: var(--bg-hover);
}

/* ============================================================
   Mobile Responsive Adjustments for New Features
   ============================================================ */
@media (max-width: 768px) {
  .bl-summary {
    grid-template-columns: repeat(2, 1fr);
  }

  .redirect-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .redirect-arrow {
    transform: rotate(90deg);
  }

  .hf-version-row {
    flex-direction: column;
  }

  .hf-lang-select,
  .hf-url-input {
    width: 100%;
  }

  .tone-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cwv-metrics {
    grid-template-columns: 1fr;
  }

  .ps-scores {
    flex-direction: column;
    align-items: center;
  }

  .vs-score-circle {
    width: 120px;
    height: 120px;
  }

  .vs-score-circle::before {
    width: 95px;
    height: 95px;
  }

  .vs-score-value {
    font-size: 2rem;
  }
}

/* ============================================================
   Cold Email Writer Styles
   ============================================================ */
.cold-email-container {
  max-width: 1200px;
  margin: 0 auto;
}

.cold-email-layout {
  display: grid;
  gap: var(--space-lg);
}

.ce-subject, .ce-body, .ce-followup {
  margin-bottom: var(--space-md);
}

.ce-tips {
  display: grid;
  gap: var(--space-sm);
}

.ce-tip-item {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.ce-tip-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.ce-tip-item strong {
  display: block;
  margin-bottom: 4px;
}

.ce-tip-item p {
  margin: 0;
  opacity: 0.8;
  font-size: 0.9rem;
}

/* ============================================================
   Email Sequence Builder Styles
   ============================================================ */
.email-sequence-container {
  max-width: 1200px;
  margin: 0 auto;
}

.email-sequence-layout {
  display: grid;
  gap: var(--space-lg);
}

.es-timeline {
  display: grid;
  gap: var(--space-md);
}

.es-email-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.es-email-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
}

.es-email-num {
  font-weight: 600;
  color: var(--primary);
}

.es-email-timing {
  font-size: 0.85rem;
  opacity: 0.7;
}

.es-email-content {
  padding: var(--space-md);
}

.es-email-subject {
  font-weight: 500;
  margin-bottom: var(--space-sm);
}

.es-email-body {
  font-size: 0.9rem;
  white-space: pre-wrap;
  background: var(--bg-secondary);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
}

.es-tips {
  display: grid;
  gap: var(--space-sm);
}

.es-tip-item {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.es-tip-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.es-tip-item strong {
  display: block;
  margin-bottom: 4px;
}

.es-tip-item p {
  margin: 0;
  opacity: 0.8;
  font-size: 0.9rem;
}

/* ============================================================
   HARO Response Generator Styles
   ============================================================ */
.haro-container {
  max-width: 1200px;
  margin: 0 auto;
}

.haro-layout {
  display: grid;
  gap: var(--space-lg);
}

.haro-subject, .haro-body {
  margin-bottom: var(--space-md);
}

.haro-tips {
  display: grid;
  gap: var(--space-sm);
}

.haro-tip-item {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.haro-tip-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.haro-tip-item strong {
  display: block;
  margin-bottom: 4px;
}

.haro-tip-item p {
  margin: 0;
  opacity: 0.8;
  font-size: 0.9rem;
}

/* ============================================================
   Infographic Generator Styles
   ============================================================ */
.infographic-container {
  max-width: 1200px;
  margin: 0 auto;
}

.infographic-layout {
  display: grid;
  gap: var(--space-lg);
}

.ig-preview {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}

.ig-preview svg {
  max-width: 100%;
  height: auto;
}

.ig-code-section {
  margin-top: var(--space-md);
}

.code-output {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
}

.ig-tips {
  display: grid;
  gap: var(--space-sm);
}

.ig-tip-item {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.ig-tip-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.ig-tip-item strong {
  display: block;
  margin-bottom: 4px;
}

.ig-tip-item p {
  margin: 0;
  opacity: 0.8;
  font-size: 0.9rem;
}

/* ============================================================
   Thumbnail Creator Styles
   ============================================================ */
.thumbnail-container {
  max-width: 1200px;
  margin: 0 auto;
}

.thumbnail-layout {
  display: grid;
  gap: var(--space-lg);
}

.tc-color-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.tc-color-btn {
  padding: var(--space-xs) var(--space-sm);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.tc-color-btn:hover {
  border-color: var(--primary);
}

.tc-color-btn.active {
  border-color: var(--primary);
  background: var(--primary-light);
}

.tc-preview-wrapper {
  display: flex;
  justify-content: center;
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.tc-preview {
  max-width: 100%;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}

.tc-variations {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.tc-tips {
  display: grid;
  gap: var(--space-sm);
}

.tc-tip-item {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.tc-tip-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.tc-tip-item strong {
  display: block;
  margin-bottom: 4px;
}

.tc-tip-item p {
  margin: 0;
  opacity: 0.8;
  font-size: 0.9rem;
}

/* ============================================================
   Video Storyboard Styles
   ============================================================ */
.storyboard-container {
  max-width: 1400px;
  margin: 0 auto;
}

.storyboard-layout {
  display: grid;
  gap: var(--space-lg);
}

.sb-timeline-header {
  display: grid;
  grid-template-columns: 80px 80px 1fr 1fr 150px;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.85rem;
}

.sb-timeline {
  display: grid;
  gap: var(--space-sm);
}

.sb-scene {
  display: grid;
  grid-template-columns: 80px 80px 1fr 1fr 150px;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
}

.sb-scene-num {
  font-weight: 600;
  color: var(--primary);
}

.sb-scene-time {
  font-size: 0.85rem;
  opacity: 0.8;
}

.sb-scene-visual {
  background: var(--bg-secondary);
  padding: var(--space-xs);
  border-radius: var(--radius-xs);
  font-size: 0.9rem;
}

.sb-scene-audio {
  font-size: 0.9rem;
}

.sb-scene-notes {
  font-size: 0.85rem;
  opacity: 0.8;
}

.sb-tips {
  display: grid;
  gap: var(--space-sm);
}

.sb-tip-item {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.sb-tip-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.sb-tip-item strong {
  display: block;
  margin-bottom: 4px;
}

.sb-tip-item p {
  margin: 0;
  opacity: 0.8;
  font-size: 0.9rem;
}

/* ============================================================
   Attribution Model Styles
   ============================================================ */
.attribution-container {
  max-width: 1200px;
  margin: 0 auto;
}

.attribution-layout {
  display: grid;
  gap: var(--space-lg);
}

.am-channels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-xs);
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs);
  background: var(--bg-secondary);
  border-radius: var(--radius-xs);
  cursor: pointer;
}

.checkbox-item:hover {
  background: var(--bg-hover);
}

.am-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.am-summary-card {
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  text-align: center;
}

.am-summary-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary);
}

.am-summary-label {
  font-size: 0.85rem;
  opacity: 0.8;
}

.am-chart-container {
  height: 300px;
  margin-bottom: var(--space-lg);
}

.am-table-container {
  overflow-x: auto;
}

.am-table {
  width: 100%;
  border-collapse: collapse;
}

.am-table th,
.am-table td {
  padding: var(--space-sm);
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.am-table th {
  background: var(--bg-secondary);
  font-weight: 600;
}

.am-insights {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.am-guide {
  display: grid;
  gap: var(--space-sm);
}

.am-guide-item {
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}

.am-guide-item strong {
  color: var(--primary);
}

/* ============================================================
   Customer Journey Map Styles
   ============================================================ */
.journey-container {
  max-width: 1400px;
  margin: 0 auto;
}

.journey-layout {
  display: grid;
  gap: var(--space-lg);
}

.jm-stages {
  overflow-x: auto;
}

.jm-stage-header {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.jm-stage-title {
  text-align: center;
  font-weight: 600;
  padding: var(--space-sm);
  background: var(--primary);
  color: white;
  border-radius: var(--radius-sm);
}

.jm-stage-content {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-sm);
}

.jm-touchpoint {
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  border-left: 3px solid var(--primary);
}

.jm-emotions {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.jm-emotion-graph {
  display: flex;
  align-items: flex-end;
  height: 100px;
  gap: var(--space-sm);
}

.jm-opportunities {
  margin-top: var(--space-lg);
}

.jm-opportunity-item {
  padding: var(--space-sm);
  margin-bottom: var(--space-xs);
  background: rgba(34, 197, 94, 0.1);
  border-left: 3px solid var(--success);
  border-radius: var(--radius-sm);
}

.jm-tips {
  display: grid;
  gap: var(--space-sm);
}

.jm-tip-item {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.jm-tip-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.jm-tip-item strong {
  display: block;
  margin-bottom: 4px;
}

.jm-tip-item p {
  margin: 0;
  opacity: 0.8;
  font-size: 0.9rem;
}

/* ============================================================
   Cohort Analysis Styles
   ============================================================ */
.cohort-container {
  max-width: 1400px;
  margin: 0 auto;
}

.cohort-layout {
  display: grid;
  gap: var(--space-lg);
}

.ca-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.ca-summary-card {
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  text-align: center;
}

.ca-summary-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--primary);
}

.ca-summary-label {
  font-size: 0.85rem;
  opacity: 0.8;
}

.ca-heatmap-container {
  overflow-x: auto;
  margin-bottom: var(--space-lg);
}

.ca-heatmap {
  min-width: 600px;
}

.ca-heatmap-row {
  display: flex;
  gap: 2px;
  margin-bottom: 2px;
}

.ca-heatmap-label {
  width: 100px;
  padding: var(--space-xs);
  font-size: 0.75rem;
  background: var(--bg-secondary);
}

.ca-heatmap-cell {
  flex: 1;
  min-width: 50px;
  padding: var(--space-xs);
  text-align: center;
  font-size: 0.75rem;
  border-radius: 2px;
}

.ca-heatmap-cell.high { background: rgba(34, 197, 94, 0.8); color: white; }
.ca-heatmap-cell.medium { background: rgba(234, 179, 8, 0.8); color: black; }
.ca-heatmap-cell.low { background: rgba(239, 68, 68, 0.8); color: white; }

.ca-insights {
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.ca-tips {
  display: grid;
  gap: var(--space-sm);
}

.ca-tip-item {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.ca-tip-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.ca-tip-item strong {
  display: block;
  margin-bottom: 4px;
}

.ca-tip-item p {
  margin: 0;
  opacity: 0.8;
  font-size: 0.9rem;
}

/* ============================================================
   SSL Checker Styles
   ============================================================ */
.ssl-container {
  max-width: 1200px;
  margin: 0 auto;
}

.ssl-layout {
  display: grid;
  gap: var(--space-lg);
}

.ssl-status {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
}

.ssl-status.valid {
  background: rgba(34, 197, 94, 0.15);
  border: 2px solid var(--success);
}

.ssl-status.invalid {
  background: rgba(239, 68, 68, 0.15);
  border: 2px solid var(--danger);
}

.ssl-status.warning {
  background: rgba(234, 179, 8, 0.15);
  border: 2px solid var(--warning);
}

.ssl-status-icon {
  font-size: 3rem;
}

.ssl-status-text {
  font-size: 1.25rem;
  font-weight: 600;
}

.ssl-details {
  display: grid;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.ssl-detail-item {
  display: flex;
  justify-content: space-between;
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.ssl-detail-label {
  font-weight: 500;
}

.ssl-chain {
  margin-bottom: var(--space-lg);
}

.ssl-chain-item {
  padding: var(--space-sm);
  margin-left: var(--space-md);
  border-left: 2px solid var(--primary);
  margin-bottom: var(--space-xs);
}

.ssl-issues {
  padding: var(--space-md);
  background: rgba(239, 68, 68, 0.1);
  border-radius: var(--radius-md);
}

.ssl-issue-item {
  padding: var(--space-xs);
  margin-bottom: var(--space-xs);
  color: var(--danger);
}

.ssl-checklist {
  display: grid;
  gap: var(--space-sm);
}

.ssl-check-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.ssl-check-item:hover {
  background: var(--bg-hover);
}

/* ============================================================
   Security Headers Styles
   ============================================================ */
.secheaders-container {
  max-width: 1200px;
  margin: 0 auto;
}

.secheaders-layout {
  display: grid;
  gap: var(--space-lg);
}

.sh-grade {
  font-size: 1.5rem;
  font-weight: 700;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
}

.sh-grade.grade-a { background: var(--success); color: white; }
.sh-grade.grade-b { background: #84cc16; color: white; }
.sh-grade.grade-c { background: var(--warning); color: black; }
.sh-grade.grade-d { background: #f97316; color: white; }
.sh-grade.grade-f { background: var(--danger); color: white; }

.sh-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.sh-summary-item {
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  text-align: center;
}

.sh-headers-list {
  display: grid;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.sh-header-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--border);
}

.sh-header-item.present {
  border-left-color: var(--success);
}

.sh-header-item.missing {
  border-left-color: var(--danger);
}

.sh-header-name {
  font-weight: 500;
}

.sh-header-status {
  font-size: 0.85rem;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-xs);
}

.sh-header-status.present {
  background: rgba(34, 197, 94, 0.15);
  color: var(--success);
}

.sh-header-status.missing {
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger);
}

.sh-recommendations {
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.sh-guide {
  display: grid;
  gap: var(--space-sm);
}

.sh-guide-item {
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}

.sh-guide-item strong {
  color: var(--primary);
}

/* ============================================================
   GDPR Compliance Styles
   ============================================================ */
.gdpr-container {
  max-width: 1200px;
  margin: 0 auto;
}

.gdpr-layout {
  display: grid;
  gap: var(--space-lg);
}

.gdpr-score {
  font-size: 1.25rem;
  font-weight: 700;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
}

.gdpr-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.gdpr-summary-card {
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  text-align: center;
}

.gdpr-checks {
  display: grid;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.gdpr-check-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--border);
}

.gdpr-check-card.passed {
  border-left-color: var(--success);
}

.gdpr-check-card.failed {
  border-left-color: var(--danger);
}

.gdpr-check-card.warning {
  border-left-color: var(--warning);
}

.gdpr-issues {
  padding: var(--space-md);
  background: rgba(239, 68, 68, 0.1);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
}

.gdpr-recommendations {
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.gdpr-checklist {
  display: grid;
  gap: var(--space-lg);
}

.gdpr-section h4 {
  margin-bottom: var(--space-sm);
  color: var(--primary);
}

.gdpr-check-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-bottom: var(--space-xs);
}

.gdpr-check-item:hover {
  background: var(--bg-hover);
}

/* ============================================================
   Mobile Responsive for New Features
   ============================================================ */
@media (max-width: 768px) {
  .sb-timeline-header,
  .sb-scene {
    grid-template-columns: 1fr;
  }

  .sb-timeline-header {
    display: none;
  }

  .sb-scene {
    display: block;
  }

  .sb-scene > * {
    margin-bottom: var(--space-xs);
  }

  .jm-stage-header,
  .jm-stage-content {
    grid-template-columns: 1fr;
  }

  .am-channels {
    grid-template-columns: 1fr 1fr;
  }

  .tc-color-presets {
    flex-direction: column;
  }

  .tc-color-btn {
    width: 100%;
  }
}

/* ============================================================
   MOBILE FIX - Comprehensive Mobile Styles
   ============================================================ */

/* Prevent horizontal scroll on entire page */
html {
	overflow-x: hidden !important;
	max-width: 100vw !important;
}

body {
	overflow-x: hidden !important;
	max-width: 100vw !important;
	position: relative !important;
}

/* Mobile container for menu positioning */
.mobile-menu-container {
	position: relative;
}

@media (max-width: 768px) {
	/* Force no horizontal scroll */
	html, body {
		overflow-x: hidden !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	/* Header fixes */
	.app-header {
		position: relative !important;
		width: 100% !important;
		max-width: 100% !important;
		overflow: hidden !important;
		padding: 8px 12px !important;
	}

	.brand {
		overflow: hidden !important;
		max-width: 50% !important;
	}

	.brand-text .name {
		font-size: 14px !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

	.brand-text .sub {
		display: none !important;
	}

	.header-actions {
		flex-shrink: 0 !important;
	}

	.header-actions .btn {
		padding: 6px 8px !important;
		font-size: 11px !important;
	}

	/* Mobile menu toggle - floating button at bottom */
	.mobile-menu-toggle {
		display: flex !important;
		position: fixed !important;
		bottom: 20px !important;
		left: 50% !important;
		transform: translateX(-50%) !important;
		z-index: 500 !important;
		width: auto !important;
		padding: 14px 28px !important;
		background: linear-gradient(135deg, var(--accent), var(--accent-hover)) !important;
		border: none !important;
		border-radius: 30px !important;
		color: white !important;
		font-size: 14px !important;
		font-weight: 600 !important;
		touch-action: manipulation !important;
		-webkit-tap-highlight-color: transparent !important;
		box-shadow: 0 4px 20px rgba(108, 140, 255, 0.4) !important;
	}

	.mobile-menu-toggle:active {
		transform: translateX(-50%) scale(0.95) !important;
	}

	/* Tab navigation as sidebar (slide from left) */
	.tab-nav {
		display: flex !important;
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		bottom: 0 !important;
		width: 280px !important;
		max-width: 85vw !important;
		background: var(--surface) !important;
		z-index: 1000 !important;
		flex-direction: column !important;
		padding: 70px 12px 20px !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch !important;
		transform: translateX(-100%) !important;
		transition: transform 0.3s ease !important;
		box-shadow: 4px 0 20px rgba(0,0,0,0.3) !important;
	}

	.tab-nav.open {
		transform: translateX(0) !important;
	}

	.tab-nav .tab-btn {
		display: flex !important;
		width: 100% !important;
		padding: 14px 16px !important;
		margin: 2px 0 !important;
		font-size: 14px !important;
		text-align: left !important;
		background: var(--surface) !important;
		border-radius: var(--radius) !important;
		border: 1px solid var(--border) !important;
		touch-action: manipulation !important;
		-webkit-tap-highlight-color: transparent !important;
	}

	.tab-nav .tab-btn:active {
		background: var(--surface-elevated) !important;
		transform: scale(0.98) !important;
	}

	.tab-nav .tab-btn.active {
		background: var(--accent) !important;
		color: white !important;
		border-color: var(--accent) !important;
	}

	.tab-nav .tab-btn .tab-icon {
		font-size: 18px !important;
		margin-right: 12px !important;
	}

	/* Close button for mobile menu - real button now */
	.mobile-menu-close {
		display: block !important;
		position: sticky !important;
		top: 0 !important;
		width: 100% !important;
		padding: 14px 20px !important;
		background: var(--danger) !important;
		color: white !important;
		border: none !important;
		border-radius: 0 !important;
		font-size: 16px !important;
		font-weight: 600 !important;
		font-family: inherit !important;
		cursor: pointer !important;
		z-index: 10 !important;
		text-align: center !important;
	}

	.mobile-menu-close:active {
		background: #c0392b !important;
	}

	/* Main content area */
	.dashboard {
		width: 100% !important;
		max-width: 100% !important;
		padding: 12px !important;
		margin: 0 !important;
		overflow-x: hidden !important;
	}

	.tab-content {
		width: 100% !important;
		max-width: 100% !important;
		overflow-x: hidden !important;
	}

	/* Cards and panels */
	.panel,
	.card,
	.dashboard-card,
	.stat-card {
		width: 100% !important;
		max-width: 100% !important;
		overflow: hidden !important;
	}

	/* Stats grid - 2 columns */
	.stats-grid {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 10px !important;
		width: 100% !important;
	}

	.stat-card {
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
		padding: 12px !important;
	}

	.stat-icon {
		width: 40px !important;
		height: 40px !important;
		font-size: 20px !important;
	}

	.stat-value {
		font-size: 20px !important;
	}

	.stat-label {
		font-size: 11px !important;
		word-break: break-word !important;
	}

	/* Forms and inputs */
	.field,
	input,
	textarea,
	select {
		width: 100% !important;
		max-width: 100% !important;
		font-size: 16px !important; /* Prevents zoom on iOS */
	}

	/* Buttons */
	.btn {
		touch-action: manipulation !important;
		-webkit-tap-highlight-color: transparent !important;
	}

	/* Tables - scroll container */
	table {
		display: block !important;
		width: 100% !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
	}

	/* Dashboard rows */
	.dashboard-row {
		grid-template-columns: 1fr !important;
	}

	/* Quick actions */
	.quick-actions-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 8px !important;
	}

	/* Page headers */
	.dashboard-header,
	.page-header {
		padding: 12px 0 !important;
	}

	.page-title,
	.dashboard-header .page-title {
		font-size: 20px !important;
	}

	.page-subtitle {
		font-size: 13px !important;
	}
}

@media (max-width: 480px) {
	/* Extra small screens */
	.stats-grid {
		grid-template-columns: 1fr 1fr !important;
		gap: 8px !important;
	}

	.stat-card {
		padding: 10px !important;
	}

	.stat-value {
		font-size: 18px !important;
	}

	.quick-actions-grid {
		grid-template-columns: 1fr 1fr !important;
	}

	.btn {
		padding: 10px 12px !important;
		font-size: 13px !important;
	}
}

/* ============================================================
   Autocomplete Suggestions
   ============================================================ */
.autocomplete-suggestions {
  position: absolute;
  z-index: 1000;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-height: 250px;
  overflow-y: auto;
  width: 100%;
  box-shadow: var(--shadow-2);
}

.autocomplete-suggestion {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  font-size: var(--font-size-sm);
}

.autocomplete-suggestion:last-child {
  border-bottom: none;
}

.autocomplete-suggestion:hover,
.autocomplete-suggestion.active {
  background: var(--glass-light);
}

.autocomplete-suggestion .suggestion-name {
  font-weight: 500;
  color: var(--text-primary);
}

.autocomplete-suggestion .suggestion-detail {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

.autocomplete-suggestion .suggestion-type {
  font-size: 10px;
  color: var(--primary);
  text-transform: capitalize;
  margin-top: 2px;
  opacity: 0.8;
}

.autocomplete-suggestion.business-suggestion {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Position relative for autocomplete parent */
.geogrid-section {
  position: relative;
}

.geogrid-section label + input {
  position: relative;
}

/* ============================================================
   GMB Features Styles
   ============================================================ */

/* GMB Post Generator */
.gmb-post-preview {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-lg);
}

.gmb-post-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

.gmb-post-type-badge {
  display: inline-block;
  padding: 4px 12px;
  background: var(--accent);
  color: white;
  border-radius: 20px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
}

.gmb-char-count {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.gmb-char-count.over-limit {
  color: var(--danger);
  font-weight: 600;
}

.gmb-post-content {
  font-size: var(--font-size-md);
  line-height: 1.6;
  white-space: pre-wrap;
  color: var(--text-primary);
}

.gmb-post-cta {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

.gmb-cta-button {
  display: inline-block;
  padding: 10px 24px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: default;
}

.gmb-post-suggestions,
.gmb-post-schedule,
.gmb-post-tips {
  background: var(--glass);
  padding: var(--space-md);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.gmb-post-suggestions h4,
.gmb-post-schedule h4,
.gmb-post-tips h4 {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* Review Response */
.review-response-preview {
  background: var(--glass);
  border-radius: var(--radius);
  padding: var(--space-lg);
}

.review-original {
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-md);
}

.review-quote {
  background: var(--surface-elevated);
  border-left: 3px solid var(--accent);
  padding: var(--space-md);
  margin: var(--space-sm) 0;
  font-style: italic;
  color: var(--text-secondary);
}

.response-text {
  background: var(--surface-elevated);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  line-height: 1.6;
  white-space: pre-wrap;
}

.variation-item {
  background: var(--glass);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-sm);
}

.quick-template-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.review-template-btn {
  font-size: var(--font-size-xs) !important;
}

/* Q&A Generator */
.qa-stats-bar {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-md);
  background: var(--glass);
  border-radius: var(--radius);
  margin-bottom: var(--space-lg);
}

.qa-stat {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.qa-category-group {
  margin-bottom: var(--space-lg);
}

.qa-category-group h4 {
  margin: 0 0 var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}

.qa-item {
  background: var(--glass);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
  border: 1px solid var(--border);
}

.qa-question {
  margin-bottom: var(--space-sm);
  color: var(--text-primary);
}

.qa-answer {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.qa-copy-btn {
  margin-top: var(--space-sm);
}

.instruction-list {
  padding-left: var(--space-lg);
}

.instruction-list li {
  margin-bottom: var(--space-sm);
  color: var(--text-secondary);
}

/* Category Optimizer */
.category-card {
  background: var(--glass);
  padding: var(--space-lg);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.category-card.primary-category {
  border-color: var(--accent);
  background: rgba(108, 140, 255, 0.05);
}

.category-name {
  font-size: var(--font-size-md);
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

.category-reason {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.category-impact {
  font-size: var(--font-size-xs);
}

.impact-high { color: var(--success); font-weight: 600; }
.impact-medium { color: var(--warning); font-weight: 600; }
.impact-low { color: var(--text-muted); }

.category-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.category-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  background: var(--glass);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.category-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--surface-elevated);
  border-radius: 50%;
  font-weight: 600;
  font-size: var(--font-size-sm);
  flex-shrink: 0;
}

.category-info {
  flex: 1;
}

.competitor-cat-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.competitor-cat-chip {
  display: inline-block;
  padding: 4px 10px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

/* GMB Spy */
.spy-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--space-md);
}

.spy-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-md);
  background: var(--glass);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  text-align: center;
}

.spy-stat-card .stat-icon {
  font-size: 20px;
  margin-bottom: var(--space-xs);
}

.spy-stat-card .stat-value {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--text-primary);
}

.spy-stat-card .stat-label {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.recommendation-item {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--glass);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
  border: 1px solid var(--border);
}

.rec-priority {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  flex-shrink: 0;
  height: fit-content;
}

.rec-high { background: rgba(239, 68, 68, 0.15); color: var(--danger); }
.rec-medium { background: rgba(251, 191, 36, 0.15); color: var(--warning); }
.rec-low { background: rgba(52, 211, 153, 0.15); color: var(--success); }

.rec-content strong {
  display: block;
  margin-bottom: 4px;
}

.rec-content p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.strength-list li,
.weakness-list li {
  margin-bottom: var(--space-sm);
  font-size: var(--font-size-sm);
}

.gap-positive { color: var(--success); }
.gap-negative { color: var(--danger); }
.gap-neutral { color: var(--text-muted); }

.competitor-input-row {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.competitor-input-row input {
  flex: 1;
}

/* Photo SEO */
.filename-list,
.alt-text-list,
.description-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.filename-item,
.alt-text-item,
.description-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  background: var(--glass);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.filename-item code {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--font-size-sm);
  background: var(--surface-elevated);
  padding: 4px 8px;
  border-radius: 4px;
}

.alt-text {
  flex: 1;
  font-size: var(--font-size-sm);
}

.description-item p {
  margin: 0;
  flex: 1;
  font-size: var(--font-size-sm);
}

.geotag-info {
  background: var(--glass);
  padding: var(--space-md);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.geotag-coords {
  margin-top: var(--space-sm);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--font-size-sm);
  color: var(--accent);
}

.tech-specs-list li {
  margin-bottom: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* Service Area Planner */
.strategy-card {
  background: var(--glass);
  padding: var(--space-lg);
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  border-left-width: 4px;
}

.strategy-type {
  font-size: var(--font-size-md);
  margin-bottom: var(--space-sm);
}

.strategy-desc {
  margin-bottom: var(--space-sm);
  color: var(--text-secondary);
}

.strategy-reason {
  font-size: var(--font-size-sm);
  font-style: italic;
  color: var(--text-muted);
}

.approach-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.approach-option {
  background: var(--glass);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.approach-option h5 {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-sm);
}

.approach-option p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.approach-recommendation {
  padding: var(--space-md);
  background: rgba(108, 140, 255, 0.08);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.areas-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-md);
}

.area-card {
  background: var(--glass);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.area-name {
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.area-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
}

.area-notes {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.demand-high { color: var(--success); }
.demand-medium { color: var(--warning); }
.demand-low { color: var(--text-muted); }

.coverage-gaps,
.high-demand {
  margin-top: var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.opportunity-list li {
  margin-bottom: var(--space-sm);
  font-size: var(--font-size-sm);
}

/* Suggestion list shared style */
.suggestion-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.suggestion-list li {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.suggestion-list li:last-child {
  border-bottom: none;
}

.suggestion-list li::before {
  content: "💡 ";
}

/* Checkbox group */
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: var(--space-sm) 0;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  font-size: var(--font-size-sm);
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

/* Section title small */
.section-title-sm {
  font-size: var(--font-size-md);
  font-weight: 600;
  margin: var(--space-lg) 0 var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}

.section-title-sm:first-child {
  margin-top: 0;
}

/* ============================================================
   GOOGLE BUSINESS PROFILE STYLES
   ============================================================ */

/* GBP Status Card */
.gbp-status-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: 500;
}

.status-indicator .status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.status-indicator.connected .status-dot {
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
}

.status-indicator.disconnected .status-dot {
  background: var(--text-tertiary);
}

.status-indicator.warning .status-dot {
  background: var(--warning);
}

/* GBP Section */
.gbp-section {
  margin-bottom: var(--space-xl);
}

/* GBP Business Info */
.gbp-business-info {
  background: var(--bg-secondary);
  border-radius: var(--radius);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.gbp-business-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin: 0 0 var(--space-md);
}

.gbp-info-grid {
  display: grid;
  gap: var(--space-sm);
}

.gbp-info-item {
  display: flex;
  gap: var(--space-sm);
}

.gbp-info-item .info-label {
  font-weight: 500;
  color: var(--text-secondary);
  min-width: 100px;
}

.gbp-info-item .info-value {
  color: var(--text-primary);
}

/* GBP Metrics Grid */
.gbp-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.gbp-metric-card {
  background: var(--bg-secondary);
  border-radius: var(--radius);
  padding: var(--space-md);
  text-align: center;
}

.gbp-metric-card .metric-value {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--primary);
}

.gbp-metric-card .metric-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-top: var(--space-xs);
}

/* GBP Review Summary */
.gbp-review-summary {
  border-top: 1px solid var(--border);
  padding-top: var(--space-lg);
}

.gbp-review-stats {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.review-rating-display {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}

.review-rating-display .big-rating {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--text-primary);
}

.review-rating-display .rating-stars {
  color: var(--warning);
  font-size: var(--font-size-lg);
}

/* GBP Recent Reviews (mini) */
.gbp-recent-reviews {
  margin-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.gbp-review-item-mini {
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
}

.gbp-review-item-mini .review-rating {
  color: var(--warning);
  font-size: var(--font-size-sm);
}

.gbp-review-item-mini .review-text {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: var(--space-xs) 0;
}

.gbp-review-item-mini .review-meta {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

/* GBP Posts List */
.gbp-posts-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.gbp-post-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-md);
}

.gbp-post-card .post-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}

.gbp-post-card .post-type {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
}

.gbp-post-card .post-date {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

.gbp-post-card .post-content {
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: var(--space-md);
}

.gbp-post-card .post-cta {
  margin-bottom: var(--space-md);
}

.gbp-post-card .post-actions {
  display: flex;
  gap: var(--space-sm);
  border-top: 1px solid var(--border);
  padding-top: var(--space-sm);
}

/* GBP Reviews List */
.gbp-reviews-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.gbp-review-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-md);
}

.gbp-review-card .review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}

.gbp-review-card .reviewer-info {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.gbp-review-card .reviewer-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.gbp-review-card .reviewer-avatar-placeholder {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gbp-review-card .reviewer-name {
  font-weight: 500;
}

.gbp-review-card .review-rating {
  color: var(--warning);
}

.gbp-review-card .review-text {
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: var(--space-sm);
}

.gbp-review-card .review-date {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--space-md);
}

.gbp-review-card .review-reply-section {
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
}

.gbp-review-card .reply-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}

.gbp-review-card .reply-text {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.gbp-review-card .review-actions {
  display: flex;
  gap: var(--space-sm);
  border-top: 1px solid var(--border);
  padding-top: var(--space-sm);
}

/* Review Breakdown Bars */
.gbp-review-breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.rating-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.rating-bar .rating-label {
  width: 30px;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.rating-bar .rating-bar-fill {
  flex: 1;
  height: 8px;
  background: var(--warning);
  border-radius: var(--radius-sm);
  transition: width 0.3s ease;
}

.rating-bar .rating-count {
  width: 30px;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  text-align: right;
}

.review-stats-summary {
  display: flex;
  gap: var(--space-lg);
  margin-top: var(--space-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* GBP Q&A List */
.gbp-qa-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.gbp-qa-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-md);
}

.gbp-qa-card .qa-question,
.gbp-qa-card .qa-answer {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.gbp-qa-card .qa-icon {
  flex-shrink: 0;
}

.gbp-qa-card .qa-text {
  color: var(--text-primary);
  line-height: 1.4;
}

.gbp-qa-card .qa-answer {
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  margin-top: var(--space-sm);
}

.gbp-qa-card .qa-meta {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

.gbp-qa-card .qa-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  border-top: 1px solid var(--border);
  padding-top: var(--space-sm);
}

/* Q&A Stats Grid */
.stats-grid-small {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}

.stats-grid-small .stat-item {
  text-align: center;
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.stats-grid-small .stat-value {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--primary);
}

.stats-grid-small .stat-label {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

/* GBP Modals */
.gbp-original-review,
.gbp-original-question {
  background: var(--bg-secondary);
  border-radius: var(--radius);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.gbp-original-review .review-rating {
  color: var(--warning);
  margin-bottom: var(--space-xs);
}

.gbp-original-review .review-text,
.gbp-original-question .question-text {
  color: var(--text-primary);
  line-height: 1.5;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .gbp-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gbp-review-stats {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }

  .stats-grid-small {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   LINK BUILDING STYLES
   ============================================================ */

.link-building-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-lg);
}

/* Link Building Subtabs */
.lb-subtabs {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
}

.lb-subtab {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.lb-subtab:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.lb-subtab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.lb-subtab-content {
  display: none;
}

.lb-subtab-content.active {
  display: block;
}

.lb-layout {
  display: grid;
  gap: var(--space-lg);
}

/* Tokens Grid */
.lb-tokens-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-sm);
}

.lb-token {
  padding: var(--space-sm);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
}

.lb-token code {
  background: var(--bg-primary);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  color: var(--primary);
  margin-right: var(--space-xs);
}

/* Operators Grid */
.lb-operators-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-sm);
}

/* Email Results */
.lb-result-section {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
}

.lb-result-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.lb-result-section h4 {
  margin-bottom: var(--space-sm);
  color: var(--text-primary);
}

.lb-subject-lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.lb-subject-line {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
}

.lb-subject-label {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.8rem;
  min-width: 70px;
}

.lb-subject-text {
  flex: 1;
  font-size: 0.9rem;
}

.lb-copy-subject {
  padding: 4px 8px !important;
}

.lb-email-content {
  margin-top: var(--space-sm);
}

.lb-email-body {
  white-space: pre-wrap;
  font-size: 0.9rem;
  line-height: 1.6;
}

.lb-followup-card {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--primary);
}

.lb-followup-header {
  margin-bottom: var(--space-sm);
}

.lb-followup-timing {
  font-weight: 600;
  color: var(--primary);
}

.lb-followup-subject {
  margin-bottom: var(--space-sm);
  font-size: 0.9rem;
}

.lb-followup-body {
  font-size: 0.85rem;
  white-space: pre-wrap;
}

.lb-tips-list {
  padding-left: var(--space-lg);
}

.lb-tips-list li {
  margin-bottom: var(--space-xs);
  font-size: 0.9rem;
}

/* Guest Post Results */
.lb-results-summary {
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}

.lb-results-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.lb-result-item {
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.lb-result-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

.lb-result-title {
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  font-size: 1rem;
}

.lb-result-title:hover {
  text-decoration: underline;
}

.lb-result-da {
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.lb-result-da.high {
  background: var(--success-light);
  color: var(--success);
}

.lb-result-da.medium {
  background: var(--warning-light);
  color: var(--warning);
}

.lb-result-da.low {
  background: var(--bg-tertiary);
  color: var(--text-muted);
}

.lb-result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  font-size: 0.8rem;
  color: var(--text-muted);
}

.lb-result-requirements {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.lb-requirement-tag {
  padding: 2px 8px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
}

.lb-result-contact {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Broken Link Results */
.lb-broken-item {
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  margin-bottom: var(--space-md);
}

.lb-broken-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}

.lb-broken-score {
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
}

.lb-broken-score.high {
  background: var(--success-light);
  color: var(--success);
}

.lb-broken-score.medium {
  background: var(--warning-light);
  color: var(--warning);
}

.lb-broken-score.low {
  background: var(--bg-tertiary);
  color: var(--text-muted);
}

.lb-broken-difficulty {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.lb-broken-urls {
  font-size: 0.85rem;
}

.lb-broken-url-row {
  margin-bottom: var(--space-xs);
  word-break: break-all;
}

.lb-broken-url-row a {
  color: var(--primary);
}

.lb-broken-url code {
  background: var(--bg-tertiary);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.lb-status-badge {
  display: inline-block;
  padding: 2px 6px;
  background: var(--error-light);
  color: var(--error);
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 600;
  margin-left: var(--space-xs);
}

.lb-broken-context {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
  margin: var(--space-sm) 0;
}

.lb-broken-suggestion {
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

/* Bulk Check Results */
.lb-bulk-summary {
  display: flex;
  gap: var(--space-lg);
  margin-bottom: var(--space-md);
  padding: var(--space-sm);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
}

.lb-broken-count strong {
  color: var(--error);
}

.lb-bulk-list {
  max-height: 300px;
  overflow-y: auto;
}

.lb-bulk-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}

.lb-bulk-item:last-child {
  border-bottom: none;
}

.lb-bulk-item.broken {
  background: var(--error-light);
}

.lb-bulk-status {
  font-size: 1rem;
}

.lb-bulk-url {
  flex: 1;
  word-break: break-all;
}

.lb-bulk-status-text {
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* HARO Styles */
.haro-about p {
  margin-bottom: var(--space-md);
  line-height: 1.6;
}

.haro-how-it-works {
  margin-bottom: var(--space-md);
}

.haro-how-it-works h4 {
  margin-bottom: var(--space-sm);
}

.haro-how-it-works ol {
  padding-left: var(--space-lg);
}

.haro-how-it-works li {
  margin-bottom: var(--space-xs);
}

.haro-benefits {
  margin-bottom: var(--space-md);
}

.haro-benefits h4 {
  margin-bottom: var(--space-sm);
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-sm);
}

.benefit-item {
  padding: var(--space-sm);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}

.haro-alternatives h4 {
  margin-bottom: var(--space-sm);
}

.alternatives-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.alternative-link {
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  color: var(--primary);
  text-decoration: none;
  font-size: 0.85rem;
}

.alternative-link:hover {
  background: var(--primary);
  color: white;
}

/* HARO Pitch Results */
.haro-quality-score {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
}

.haro-quality-score.high {
  background: var(--success-light);
  color: var(--success);
}

.haro-quality-score.medium {
  background: var(--warning-light);
  color: var(--warning);
}

.haro-quality-score.low {
  background: var(--error-light);
  color: var(--error);
}

.haro-pitch-section {
  margin-bottom: var(--space-lg);
}

.haro-pitch-section h4 {
  margin-bottom: var(--space-sm);
}

.haro-subject-line {
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  font-weight: 500;
}

.haro-pitch-body {
  white-space: pre-wrap;
  font-size: 0.9rem;
  line-height: 1.6;
}

.haro-quotes {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.haro-quote {
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  font-style: italic;
  font-size: 0.9rem;
}

.haro-bio {
  padding: var(--space-sm);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}

.haro-pitch-tips {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
}

.haro-pitch-tips h4 {
  margin-bottom: var(--space-sm);
}

.haro-pitch-tips ul {
  padding-left: var(--space-lg);
  margin: 0;
}

.haro-pitch-tips li {
  margin-bottom: var(--space-xs);
  font-size: 0.9rem;
}

/* Best Practices Grid */
.best-practices-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-md);
}

.practice-item {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.practice-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.practice-content strong {
  display: block;
  margin-bottom: var(--space-xs);
}

.practice-content p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

/* Responsive */
@media (max-width: 768px) {
  .lb-subtabs {
    justify-content: center;
  }

  .lb-subtab {
    flex: 1 1 45%;
    text-align: center;
  }

  .lb-tokens-grid,
  .lb-operators-grid {
    grid-template-columns: 1fr;
  }

  .lb-result-header {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .best-practices-grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   VIDEO SEO SUITE STYLES
   ============================================================ */

/* Video SEO Container */
.video-seo-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-lg);
}

/* Sub-navigation */
.video-seo-subnav {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  padding: var(--space-xs);
  background: var(--bg-secondary);
  border-radius: var(--radius);
  overflow-x: auto;
}

.video-seo-subnav-btn {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.video-seo-subnav-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.video-seo-subnav-btn.active {
  background: var(--primary);
  color: white;
}

.video-seo-subnav-btn .subnav-icon {
  font-size: 1.1em;
}

/* Feature sections */
.video-seo-feature {
  display: none;
}

.video-seo-feature.active {
  display: block;
}

/* Layout */
.video-seo-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

@media (max-width: 1024px) {
  .video-seo-layout {
    grid-template-columns: 1fr;
  }
}

/* Result sections */
.vs-result-section,
.vt-result-section,
.vc-result-section {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border);
}

.vs-result-section:last-child,
.vt-result-section:last-child,
.vc-result-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

.result-header h4 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-base);
}

.result-header-actions {
  display: flex;
  gap: var(--space-xs);
}

/* Title options */
.vs-title-option {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  margin-bottom: var(--space-xs);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.vs-title-option .title-number {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.vs-title-option .title-text {
  flex: 1;
  color: var(--text-primary);
}

.vs-title-option .title-length {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

/* Description */
.vs-description-text {
  white-space: pre-wrap;
  word-wrap: break-word;
  background: var(--bg-secondary);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--font-size-sm);
  line-height: 1.6;
  max-height: 300px;
  overflow-y: auto;
}

/* Tags */
.vs-tags-container,
.vt-tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.vs-tag,
.vt-keyword-tag {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

/* Hashtags */
.vs-hashtags-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.vs-hashtag {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  background: var(--primary-light);
  color: var(--primary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

/* Keywords grid */
.vs-keywords-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.kw-section h5 {
  margin: 0 0 var(--space-xs) 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.kw-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.kw-tag {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.kw-tag.primary { background: #e3f2fd; color: #1565c0; }
.kw-tag.longtail { background: #f3e5f5; color: #7b1fa2; }
.kw-tag.question { background: #fff3e0; color: #e65100; }
.kw-tag.trending { background: #ffebee; color: #c62828; }

/* Thumbnail ideas */
.vs-thumbnail-idea {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
}

.vs-thumbnail-idea .thumb-preview {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
}

.vs-thumbnail-idea .thumb-style {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

/* Posting times */
.posting-times-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.posting-section h5 {
  margin: 0 0 var(--space-xs) 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.days-list,
.times-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.day-tag,
.time-tag {
  padding: var(--space-xs) var(--space-sm);
  background: var(--success-light);
  color: var(--success);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.posting-reasoning {
  grid-column: 1 / -1;
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* Score display */
.vs-score-display {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-lg);
}

.vs-score-breakdown,
.vc-score-display {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.score-item,
.breakdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.score-item-label,
.breakdown-label {
  flex: 1;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.score-bar-container,
.breakdown-bar {
  flex: 2;
  height: 8px;
  background: var(--bg-secondary);
  border-radius: 4px;
  overflow: hidden;
}

.score-bar,
.bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.score-item-value,
.breakdown-value {
  min-width: 30px;
  text-align: right;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
}

/* Transcript specific */
.vt-chapters .chapter-item {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm);
  margin-bottom: var(--space-xs);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.chapter-timestamp {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--primary);
  white-space: nowrap;
}

.chapter-title {
  font-weight: 500;
  color: var(--text-primary);
}

.chapter-summary {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

.vt-blog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
  font-size: var(--font-size-sm);
}

.vt-blog-content {
  max-height: 500px;
  overflow-y: auto;
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.quote-card {
  padding: var(--space-md);
  margin-bottom: var(--space-sm);
  background: var(--bg-secondary);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
}

.quote-text {
  font-style: italic;
  color: var(--text-primary);
  margin: 0 0 var(--space-xs) 0;
}

.quote-context {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.quote-timestamp {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-xs);
}

.transcript-text {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: inherit;
  font-size: var(--font-size-sm);
  line-height: 1.6;
  max-height: 300px;
  overflow-y: auto;
  background: var(--bg-secondary);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
}

.summary-executive {
  color: var(--text-primary);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

.summary-tldr {
  padding: var(--space-sm);
  background: var(--info-light);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.takeaways-list {
  margin: 0;
  padding-left: var(--space-lg);
}

.takeaways-list li {
  margin-bottom: var(--space-xs);
  color: var(--text-primary);
}

/* Competitor specific */
.overview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.overview-item {
  display: flex;
  flex-direction: column;
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.overview-item .label {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin-bottom: var(--space-xs);
}

.overview-item .value {
  font-weight: 600;
  color: var(--text-primary);
}

.content-focus {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
}

.focus-tag {
  padding: var(--space-xs) var(--space-sm);
  background: var(--primary-light);
  color: var(--primary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.competitive-score-main {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-bottom: var(--space-md);
}

.competitive-score-main .score-big {
  font-size: 3rem;
  font-weight: 700;
  color: var(--primary);
}

.competitive-score-main .score-label {
  font-size: var(--font-size-lg);
  color: var(--text-tertiary);
}

.score-breakdown-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.vc-tags-analysis {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.tag-section h5 {
  margin: 0 0 var(--space-xs) 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.tag-section .tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.tag-section .tag {
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.tag-section .tag.opportunity {
  background: var(--success-light);
  color: var(--success);
}

.gaps-table {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.gap-item {
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.gap-topic {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.gap-opportunity {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.gap-meta {
  display: flex;
  gap: var(--space-sm);
}

.gap-meta .difficulty,
.gap-meta .potential {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.gap-meta .difficulty.low { background: #e8f5e9; color: #2e7d32; }
.gap-meta .difficulty.medium { background: #fff3e0; color: #ef6c00; }
.gap-meta .difficulty.high { background: #ffebee; color: #c62828; }
.gap-meta .potential.high { background: #e3f2fd; color: #1565c0; }
.gap-meta .potential.medium { background: #f3e5f5; color: #7b1fa2; }

.trajectory {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-weight: 500;
}

.trajectory.growing { background: #e8f5e9; color: #2e7d32; }
.trajectory.stable { background: #fff3e0; color: #ef6c00; }
.trajectory.declining { background: #ffebee; color: #c62828; }

/* SWOT Grid */
.swot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.swot-quadrant {
  padding: var(--space-md);
  border-radius: var(--radius-sm);
}

.swot-quadrant h5 {
  margin: 0 0 var(--space-sm) 0;
  font-size: var(--font-size-sm);
}

.swot-quadrant ul {
  margin: 0;
  padding-left: var(--space-md);
  font-size: var(--font-size-sm);
}

.swot-quadrant li {
  margin-bottom: var(--space-xs);
}

.swot-quadrant.strengths { background: #e8f5e9; }
.swot-quadrant.weaknesses { background: #ffebee; }
.swot-quadrant.opportunities { background: #e3f2fd; }
.swot-quadrant.threats { background: #fff3e0; }

/* Recommendations */
.rec-section {
  margin-bottom: var(--space-md);
}

.rec-section h5 {
  margin: 0 0 var(--space-sm) 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.rec-section ul {
  margin: 0;
  padding-left: var(--space-lg);
}

.rec-section li {
  margin-bottom: var(--space-xs);
  color: var(--text-primary);
}

.content-ideas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-sm);
}

.idea-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.idea-card strong {
  color: var(--text-primary);
}

.idea-type {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.idea-potential {
  font-size: var(--font-size-xs);
  font-weight: 500;
  padding: 2px var(--space-xs);
  border-radius: var(--radius-xs);
  align-self: flex-start;
}

.idea-potential.high { background: #e8f5e9; color: #2e7d32; }
.idea-potential.medium { background: #fff3e0; color: #ef6c00; }

/* Metrics */
.vs-metrics {
  margin-top: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

.vs-metrics .metric {
  margin-right: var(--space-md);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .video-seo-subnav {
    flex-wrap: nowrap;
  }

  .video-seo-subnav-btn {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-sm);
  }

  .posting-times-grid {
    grid-template-columns: 1fr;
  }

  .swot-grid {
    grid-template-columns: 1fr;
  }

  .overview-grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   MONDAY.COM STYLE TASK BOARDS - Enhanced UI
   ============================================================ */

/* Project Sidebar */
.tm-sidebar {
  width: 280px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width var(--transition-base);
}

.tm-sidebar.collapsed {
  width: 60px;
}

.tm-sidebar-header {
  padding: var(--space-lg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tm-sidebar-title {
  font-weight: 700;
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.tm-project-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md);
}

.tm-project-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-bottom: var(--space-xs);
}

.tm-project-item:hover {
  background: var(--glass-light);
}

.tm-project-item.active {
  background: linear-gradient(135deg, var(--accent-glow), rgba(99, 102, 241, 0.2));
  border: 1px solid var(--accent);
}

.tm-project-color {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  flex-shrink: 0;
}

.tm-project-name {
  flex: 1;
  font-weight: 500;
  font-size: var(--font-size-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tm-project-count {
  background: var(--glass);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  color: var(--text-muted);
}

/* Board Header */
.tm-board-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-elevated) 100%);
  border-bottom: 1px solid var(--border);
}

.tm-board-title {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.tm-board-title h2 {
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin: 0;
}

.tm-board-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* View Toggle Buttons - Monday Style */
.view-toggle-group {
  display: flex;
  background: var(--glass);
  border-radius: var(--radius);
  padding: 4px;
  gap: 2px;
}

.view-toggle-btn {
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 6px;
}

.view-toggle-btn:hover {
  background: var(--glass-light);
  color: var(--text-primary);
}

.view-toggle-btn.active {
  background: var(--accent);
  color: white;
  box-shadow: 0 2px 8px var(--accent-glow);
}

/* Enhanced Kanban Column - Monday Style */
.kanban-column-monday {
  flex: 0 0 300px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 240px);
  transition: all var(--transition-base);
  border: 2px solid transparent;
}

.kanban-column-monday:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.kanban-column-monday.drag-over {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--accent-glow) 0%, var(--surface) 30%);
}

.column-header-monday {
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  position: relative;
}

.column-color-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.column-title-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.column-title-monday {
  font-weight: 700;
  font-size: var(--font-size-base);
  color: var(--text-primary);
}

.column-count-monday {
  background: var(--glass);
  color: var(--text-muted);
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.column-wip-warning {
  color: var(--warning);
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Task Card - Monday Style */
.task-card-monday {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: var(--space-sm) var(--space-md);
  cursor: grab;
  transition: all var(--transition-base);
  overflow: hidden;
}

.task-card-monday:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.task-card-monday.dragging {
  opacity: 0.8;
  transform: rotate(2deg) scale(1.02);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  cursor: grabbing;
}

.task-card-monday.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.task-card-header {
  display: flex;
  align-items: flex-start;
  padding: var(--space-md);
  gap: var(--space-sm);
}

.task-checkbox {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-strong);
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.task-checkbox:hover {
  border-color: var(--accent);
}

.task-checkbox.checked {
  background: var(--success);
  border-color: var(--success);
}

.task-checkbox.checked::after {
  content: '✓';
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.task-card-content {
  flex: 1;
  min-width: 0;
}

.task-card-title-monday {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
  line-height: 1.4;
}

.task-card-title-monday.completed {
  text-decoration: line-through;
  color: var(--text-muted);
}

.task-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  background: var(--glass);
  border-top: 1px solid var(--border);
}

.task-meta-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* Priority Colors - Monday Style */
.priority-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.priority-dot.urgent { background: #ff4d4d; box-shadow: 0 0 8px rgba(255, 77, 77, 0.5); }
.priority-dot.high { background: #ff9f43; }
.priority-dot.medium { background: #54a0ff; }
.priority-dot.low { background: #a4b0be; }

/* Assignee Avatar */
.task-assignee {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: white;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--surface-elevated);
}

.task-assignee.unassigned {
  background: var(--glass);
  color: var(--text-muted);
  border: 2px dashed var(--border-strong);
}

/* Due Date Badge - Monday Style */
.due-badge-monday {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}

.due-badge-monday.overdue {
  background: rgba(255, 77, 77, 0.15);
  color: #ff4d4d;
}

.due-badge-monday.today {
  background: rgba(255, 159, 67, 0.15);
  color: #ff9f43;
}

.due-badge-monday.upcoming {
  background: rgba(84, 160, 255, 0.15);
  color: #54a0ff;
}

.due-badge-monday.later {
  background: var(--glass);
  color: var(--text-muted);
}

/* Subtask Progress Bar */
.subtask-progress {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

.subtask-progress-bar {
  width: 40px;
  height: 4px;
  background: var(--glass);
  border-radius: 2px;
  overflow: hidden;
}

.subtask-progress-fill {
  height: 100%;
  background: var(--success);
  border-radius: 2px;
  transition: width var(--transition-base);
}

/* Task Tags - Monday Style */
.task-tags-monday {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding: 0 var(--space-md) var(--space-sm);
}

.task-tag-monday {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
}

.task-tag-monday.tag-seo { background: rgba(16, 185, 129, 0.2); color: #10b981; }
.task-tag-monday.tag-content { background: rgba(99, 102, 241, 0.2); color: #6366f1; }
.task-tag-monday.tag-technical { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.task-tag-monday.tag-design { background: rgba(236, 72, 153, 0.2); color: #ec4899; }
.task-tag-monday.tag-link-building { background: rgba(245, 158, 11, 0.2); color: #f59e0b; }

/* Quick Add - Monday Style */
.quick-add-monday {
  padding: var(--space-md);
}

.quick-add-btn-monday {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

.quick-add-btn-monday:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-glow);
}

/* ============================================================
   TIMELINE / GANTT VIEW
   ============================================================ */

.timeline-view {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 240px);
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border);
  background: var(--glass);
}

.timeline-controls {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.timeline-zoom {
  display: flex;
  gap: 4px;
}

.timeline-zoom .btn {
  padding: 6px 12px;
  font-size: var(--font-size-sm);
}

.timeline-container {
  flex: 1;
  display: flex;
  overflow: auto;
}

.timeline-sidebar {
  width: 250px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: var(--surface);
}

.timeline-task-row {
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 var(--space-md);
  border-bottom: 1px solid var(--border);
  font-size: var(--font-size-sm);
}

.timeline-task-row:hover {
  background: var(--glass-light);
}

.timeline-grid {
  flex: 1;
  position: relative;
}

.timeline-header-row {
  display: flex;
  height: 40px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 2;
}

.timeline-day {
  flex: 0 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-muted);
}

.timeline-day.weekend {
  background: rgba(255, 255, 255, 0.02);
}

.timeline-day.today {
  background: var(--accent-glow);
  color: var(--accent);
  font-weight: 600;
}

.timeline-bars {
  position: relative;
}

.timeline-bar-row {
  height: 48px;
  position: relative;
  border-bottom: 1px solid var(--border);
}

.timeline-bar {
  position: absolute;
  height: 28px;
  top: 10px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-size: 11px;
  color: white;
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.timeline-bar:hover {
  transform: scaleY(1.1);
  box-shadow: 0 4px 12px var(--accent-glow);
  z-index: 1;
}

.timeline-bar.low { background: linear-gradient(135deg, #a4b0be, #95a5a6); }
.timeline-bar.medium { background: linear-gradient(135deg, #54a0ff, #2e86de); }
.timeline-bar.high { background: linear-gradient(135deg, #ff9f43, #ee5a24); }
.timeline-bar.urgent { background: linear-gradient(135deg, #ff4d4d, #c0392b); }

.timeline-today-line {
  position: absolute;
  width: 2px;
  top: 0;
  bottom: 0;
  background: var(--accent);
  z-index: 10;
}

.timeline-today-line::before {
  content: '';
  position: absolute;
  top: -6px;
  left: -4px;
  width: 10px;
  height: 10px;
  background: var(--accent);
  border-radius: 50%;
}

/* ============================================================
   CLIENT MANAGEMENT DASHBOARD
   ============================================================ */

.clients-container {
  padding: var(--space-lg);
}

.clients-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
}

.clients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-lg);
}

.client-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: all var(--transition-base);
  cursor: pointer;
}

.client-card:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.client-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.client-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: white;
  font-size: var(--font-size-lg);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.client-info h3 {
  margin: 0 0 4px;
  font-size: var(--font-size-base);
  font-weight: 600;
}

.client-info p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.client-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  padding: var(--space-md) 0;
  border-top: 1px solid var(--border);
}

.client-stat {
  text-align: center;
}

.client-stat-value {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--text-primary);
}

.client-stat-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.client-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.client-status.active {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.client-status.inactive {
  background: rgba(156, 163, 175, 0.15);
  color: #9ca3af;
}

/* ============================================================
   WHITE LABEL SETTINGS
   ============================================================ */

.white-label-container {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-lg);
}

.white-label-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.white-label-section h3 {
  margin: 0 0 var(--space-lg);
  font-size: var(--font-size-lg);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.color-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-lg);
}

.color-picker-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.color-picker-item label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

.color-picker-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.color-preview {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  cursor: pointer;
}

.color-input {
  flex: 1;
}

.logo-upload-area {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.logo-upload-area:hover {
  border-color: var(--accent);
  background: var(--accent-glow);
}

.logo-preview {
  max-width: 200px;
  max-height: 80px;
  margin: var(--space-md) auto;
}

.brand-preview {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-top: var(--space-lg);
}

.brand-preview-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-md);
}

/* ============================================================
   CLIENT PORTAL STYLES
   ============================================================ */

.portal-container {
  min-height: 100vh;
  background: var(--bg);
}

.portal-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: var(--space-md) var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.portal-logo {
  height: 36px;
}

.portal-nav {
  display: flex;
  gap: var(--space-md);
}

.portal-nav-item {
  padding: var(--space-sm) var(--space-md);
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  border-radius: var(--radius);
  transition: all var(--transition-fast);
}

.portal-nav-item:hover,
.portal-nav-item.active {
  color: var(--accent);
  background: var(--accent-glow);
}

.portal-main {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-xl);
}

.portal-welcome {
  margin-bottom: var(--space-xl);
}

.portal-welcome h1 {
  font-size: var(--font-size-2xl);
  margin: 0 0 var(--space-sm);
}

.portal-welcome p {
  color: var(--text-muted);
  margin: 0;
}

.portal-widgets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: var(--space-lg);
}

.portal-widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.portal-widget-header {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--glass);
}

.portal-widget-header h3 {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: 600;
}

.portal-widget-body {
  padding: var(--space-lg);
}

.portal-report-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.portal-report-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  background: var(--glass);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.portal-report-item:hover {
  background: var(--accent-glow);
}

.portal-feedback-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.portal-feedback-textarea {
  width: 100%;
  min-height: 120px;
  padding: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text-primary);
  font-family: inherit;
  resize: vertical;
}

.portal-feedback-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* ============================================================
   BOARD TEMPLATES MODAL
   ============================================================ */

.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.template-card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.template-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.template-card.selected {
  border-color: var(--accent);
  background: var(--accent-glow);
}

.template-icon {
  font-size: 32px;
  margin-bottom: var(--space-md);
}

.template-name {
  font-weight: 600;
  font-size: var(--font-size-base);
  margin-bottom: var(--space-xs);
}

.template-description {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  line-height: 1.4;
}

.template-columns {
  display: flex;
  gap: 4px;
  margin-top: var(--space-md);
  flex-wrap: wrap;
}

.template-column-preview {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  color: white;
  font-weight: 500;
}

/* ============================================================
   ENHANCED TASK DETAIL MODAL
   ============================================================ */

.task-detail-modal {
  max-width: 800px;
  width: 90vw;
}

.task-detail-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-bottom: 1px solid var(--border);
}

.task-detail-checkbox {
  width: 24px;
  height: 24px;
  margin-top: 4px;
}

.task-detail-title {
  flex: 1;
}

.task-detail-title input {
  width: 100%;
  font-size: var(--font-size-xl);
  font-weight: 700;
  border: none;
  background: transparent;
  color: var(--text-primary);
}

.task-detail-title input:focus {
  outline: none;
}

.task-detail-body {
  display: flex;
  min-height: 400px;
}

.task-detail-main {
  flex: 1;
  padding: var(--space-lg);
  border-right: 1px solid var(--border);
}

.task-detail-sidebar {
  width: 280px;
  padding: var(--space-lg);
  background: var(--glass);
}

.task-detail-section {
  margin-bottom: var(--space-xl);
}

.task-detail-section-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}

.task-description-editor {
  width: 100%;
  min-height: 120px;
  padding: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-primary);
  font-family: inherit;
  line-height: 1.6;
}

.task-description-editor:focus {
  outline: none;
  border-color: var(--accent);
}

/* Subtasks */
.subtask-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.subtask-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.subtask-item:hover {
  background: var(--glass);
}

.subtask-item.completed {
  opacity: 0.6;
}

.subtask-item.completed .subtask-title {
  text-decoration: line-through;
}

.subtask-checkbox {
  width: 16px;
  height: 16px;
}

.subtask-title {
  flex: 1;
  font-size: var(--font-size-sm);
}

.add-subtask-input {
  width: 100%;
  padding: var(--space-sm);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

/* Comments */
.comment-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.comment-item {
  display: flex;
  gap: var(--space-sm);
}

.comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: white;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.comment-content {
  flex: 1;
  background: var(--glass);
  padding: var(--space-md);
  border-radius: var(--radius);
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-xs);
}

.comment-author {
  font-weight: 600;
  font-size: var(--font-size-sm);
}

.comment-time {
  font-size: 11px;
  color: var(--text-muted);
}

.comment-text {
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.comment-text .mention {
  color: var(--accent);
  font-weight: 500;
}

.add-comment-form {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.add-comment-input {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-primary);
}

/* Activity Log */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--glass);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

.activity-text strong {
  color: var(--text-primary);
}

/* ============================================================
   EXPORT BOARD TO CSV
   ============================================================ */

.export-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
}

.export-option {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.export-option:hover {
  border-color: var(--accent);
  background: var(--accent-glow);
}

.export-option-icon {
  font-size: 24px;
}

.export-option-info h4 {
  margin: 0 0 4px;
  font-size: var(--font-size-base);
}

.export-option-info p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* ============================================================
   RESPONSIVE OVERRIDES
   ============================================================ */

@media (max-width: 1024px) {
  .tm-sidebar {
    position: fixed;
    left: -280px;
    top: 0;
    height: 100vh;
    z-index: 1000;
    transition: left var(--transition-base);
  }

  .tm-sidebar.open {
    left: 0;
  }

  .kanban-column-monday {
    flex: 0 0 280px;
  }

  .portal-widgets {
    grid-template-columns: 1fr;
  }

  .task-detail-body {
    flex-direction: column;
  }

  .task-detail-sidebar {
    width: 100%;
    border-top: 1px solid var(--border);
  }
}

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

  .color-picker-grid {
    grid-template-columns: 1fr;
  }

  .template-grid {
    grid-template-columns: 1fr;
  }

  .timeline-sidebar {
    width: 150px;
  }

  .timeline-day {
    flex: 0 0 30px;
  }
}

/* ============================================================================
   E-COMMERCE SEO MODULE STYLES
   ============================================================================ */

/* E-commerce Subtabs Container */
.ecom-subtabs-container {
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

.ecom-subtabs {
  display: flex;
  gap: var(--space-xs);
  min-width: max-content;
}

.ecom-subtab-btn {
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.ecom-subtab-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.ecom-subtab-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

/* E-commerce Subtab Content */
.ecom-subtab-content {
  display: none;
}

.ecom-subtab-content.active {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  padding: var(--space-md);
}

/* E-commerce Info Box */
.ecom-info-box {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  border-left: 4px solid var(--primary);
  margin-bottom: var(--space-md);
}

.ecom-info-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.ecom-info-content strong {
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--text-primary);
}

.ecom-info-content p {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
}

/* Product Schema Styles */
.ps-advanced-section {
  margin-top: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.ps-advanced-section summary {
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  background: var(--bg-tertiary);
  border-radius: var(--radius);
}

.ps-advanced-section[open] summary {
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
}

.ps-advanced-fields {
  padding: var(--space-md);
}

.ps-validation-list {
  padding: var(--space-sm);
  border-radius: var(--radius);
  margin-bottom: var(--space-sm);
}

.ps-validation-list h4 {
  margin: 0 0 var(--space-xs) 0;
  font-size: var(--font-size-sm);
}

.ps-validation-list ul {
  margin: 0;
  padding-left: var(--space-md);
}

.ps-validation-list li {
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-xs);
}

.ps-errors {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid var(--error);
}

.ps-warnings {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid var(--warning);
}

.ps-validation-success {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid var(--success);
  border-radius: var(--radius);
  color: var(--success);
  font-weight: 500;
}

.ps-validation-success .success-icon {
  font-size: 1.2rem;
}

/* Amazon Optimizer Styles */
.amz-advanced-section {
  margin-top: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.amz-advanced-section summary {
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  background: var(--bg-tertiary);
  border-radius: var(--radius);
}

.amz-advanced-section[open] summary {
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
}

.amz-advanced-fields {
  padding: var(--space-md);
}

.amz-status {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius);
  margin-top: var(--space-md);
  font-size: var(--font-size-sm);
}

.amz-status.loading {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid var(--primary);
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.amz-status.error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid var(--error);
  color: var(--error);
}

.loading-spinner-inline {
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.amz-result-card {
  margin-bottom: var(--space-md);
}

.amz-result-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.amz-char-count {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.amz-char-count .over-limit {
  color: var(--error);
  font-weight: 600;
}

.amz-bullets-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.amz-bullet-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-tertiary);
  border-radius: var(--radius);
}

.amz-bullet-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  font-size: var(--font-size-sm);
  font-weight: 600;
  flex-shrink: 0;
}

.amz-bullet-text {
  flex: 1;
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.amz-bullet-count {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.amz-bullet-count.over-limit {
  color: var(--error);
  font-weight: 600;
}

.amz-aplus-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.amz-aplus-item {
  padding: var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  border-left: 3px solid var(--primary);
}

.amz-aplus-item strong {
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--primary);
}

.amz-aplus-item p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.amz-keyword-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.amz-keyword-tag {
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.amz-keyword-tag:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.amz-keyword-tag.recommended {
  border-color: var(--success);
  color: var(--success);
}

.amz-keyword-tag.recommended:hover {
  background: var(--success);
  color: white;
}

.amz-tips-list {
  margin: 0;
  padding-left: var(--space-md);
}

.amz-tips-list li {
  margin-bottom: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.amz-validation-issues {
  padding: var(--space-md);
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid var(--warning);
  border-radius: var(--radius);
  margin-top: var(--space-md);
}

.amz-validation-issues h4 {
  margin: 0 0 var(--space-sm) 0;
  color: var(--warning);
}

.amz-validation-issues ul {
  margin: 0;
  padding-left: var(--space-md);
}

.amz-validation-issues li {
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-xs);
}

.amz-issue-error {
  color: var(--error);
}

.amz-issue-warning {
  color: var(--warning);
}

.amz-analysis-section {
  padding: var(--space-md);
  border-bottom: 1px solid var(--border);
}

.amz-analysis-section:last-child {
  border-bottom: none;
}

.amz-analysis-section h4 {
  margin: 0 0 var(--space-sm) 0;
  color: var(--text-primary);
}

.amz-analysis-section ul {
  margin: var(--space-xs) 0 0 0;
  padding-left: var(--space-md);
}

.amz-analysis-section li {
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-xs);
}

/* Review Schema Builder Styles */
.rv-type-tabs {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}

.rv-type-btn {
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.rv-type-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.rv-type-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.rv-form {
  display: none;
}

.rv-form.active {
  display: block;
}

.rv-conditional-fields {
  padding: var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  margin-top: var(--space-md);
}

.rv-item-details {
  margin-top: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.rv-item-details summary {
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  background: var(--bg-tertiary);
}

.rv-item-fields {
  padding: var(--space-md);
}

.rv-csv-preview {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  max-height: 300px;
  overflow: auto;
}

.rv-csv-preview h4 {
  margin: 0 0 var(--space-sm) 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.rv-validation-list {
  padding: var(--space-sm);
  border-radius: var(--radius);
  margin-bottom: var(--space-sm);
}

.rv-validation-list h4 {
  margin: 0 0 var(--space-xs) 0;
  font-size: var(--font-size-sm);
}

.rv-validation-list ul {
  margin: 0;
  padding-left: var(--space-md);
}

.rv-validation-list li {
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-xs);
}

.rv-errors {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid var(--error);
}

.rv-warnings {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid var(--warning);
}

.rv-validation-success {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid var(--success);
  border-radius: var(--radius);
  color: var(--success);
  font-weight: 500;
}

.rv-validation-success .success-icon {
  font-size: 1.2rem;
}

.rv-bulk-summary {
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  margin-bottom: var(--space-md);
}

.rv-bulk-summary p {
  margin: 0;
  font-size: var(--font-size-sm);
}

/* Responsive adjustments for E-commerce */
@media (max-width: 768px) {
  .ecom-subtab-content.active {
    flex-direction: column;
  }

  .ecom-subtab-content .panel {
    width: 100%;
    max-width: 100%;
  }

  .rv-type-tabs {
    flex-direction: column;
  }

  .rv-type-btn {
    width: 100%;
    text-align: center;
  }
}

/* ============================================================
   AI ADVANCED FEATURES
   ============================================================ */

.ai-advanced-container {
  padding: var(--space-lg);
  max-width: 1400px;
  margin: 0 auto;
}

.ai-advanced-header {
  margin-bottom: var(--space-lg);
}

.ai-advanced-header .page-title {
  margin: 0 0 var(--space-xs) 0;
}

.ai-advanced-header .page-subtitle {
  color: var(--text-secondary);
  margin: 0;
}

/* Subtabs */
.ai-advanced-subtabs {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-sm);
  flex-wrap: wrap;
}

.ai-adv-subtab {
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius) var(--radius) 0 0;
  transition: all 0.2s;
}

.ai-adv-subtab:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.ai-adv-subtab.active {
  color: var(--primary);
  border-bottom: 2px solid var(--primary);
}

/* Panels */
.ai-adv-panel {
  display: none;
}

.ai-adv-panel.active {
  display: block;
}

/* Split Layout */
.ai-adv-split {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--space-lg);
}

@media (max-width: 1024px) {
  .ai-adv-split {
    grid-template-columns: 1fr;
  }
}

.ai-adv-input {
  background: var(--bg-secondary);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

.ai-adv-input h3 {
  margin: 0 0 var(--space-xs) 0;
}

.ai-adv-input > .field-helper {
  margin-bottom: var(--space-md);
  color: var(--text-secondary);
}

.ai-adv-output {
  background: var(--bg-secondary);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  min-height: 400px;
}

/* Empty State */
.ai-adv-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-xl);
  color: var(--text-secondary);
}

.ai-adv-empty .empty-icon {
  font-size: 4rem;
  margin-bottom: var(--space-md);
}

.ai-adv-empty h3 {
  margin: 0 0 var(--space-sm) 0;
  color: var(--text-primary);
}

.ai-adv-empty p {
  margin: 0 0 var(--space-md) 0;
}

.ai-adv-empty .empty-features {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.ai-adv-empty .empty-features li {
  margin-bottom: var(--space-xs);
}

/* Actions */
.ai-adv-actions {
  margin-top: var(--space-md);
}

.ai-adv-actions .btn-primary {
  width: 100%;
}

/* Status */
.ai-adv-status {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius);
  font-size: var(--font-size-sm);
}

.ai-adv-status.info {
  background: rgba(59, 130, 246, 0.1);
  color: var(--info);
  border: 1px solid var(--info);
}

.ai-adv-status.error {
  background: rgba(239, 68, 68, 0.1);
  color: var(--error);
  border: 1px solid var(--error);
}

.ai-adv-status.success {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
  border: 1px solid var(--success);
}

/* Field Row */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

@media (max-width: 600px) {
  .field-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   CONTENT BRIEF STYLES
   ============================================================ */

.brief-advanced-options {
  margin-top: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.brief-advanced-options summary {
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
}

.brief-advanced-content {
  padding: var(--space-md);
  border-top: 1px solid var(--border);
}

/* Brief Results */
.brief-results {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.brief-section {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
}

.brief-section:last-child {
  border-bottom: none;
}

.brief-section h4 {
  margin: 0 0 var(--space-md) 0;
  font-size: 1rem;
}

.brief-header-section {
  background: var(--bg-tertiary);
  padding: var(--space-md);
  border-radius: var(--radius);
}

.brief-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.brief-title-row h3 {
  margin: 0;
  flex: 1;
}

.brief-badges {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.brief-badge {
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.brief-badge.intent {
  background: var(--primary);
  color: white;
}

.brief-meta-desc {
  margin-top: var(--space-sm);
  font-style: italic;
  color: var(--text-secondary);
}

/* Keywords */
.brief-keywords {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.keyword-group {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.keyword-group label {
  font-weight: 500;
  min-width: 100px;
  font-size: var(--font-size-sm);
}

.keyword-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.keyword-tag {
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  font-size: var(--font-size-sm);
}

.keyword-tag.primary {
  background: var(--primary);
  color: white;
}

.keyword-tag.lsi {
  background: rgba(168, 85, 247, 0.1);
  border: 1px solid rgb(168, 85, 247);
}

.keyword-tag.long-tail {
  background: rgba(236, 72, 153, 0.1);
  border: 1px solid rgb(236, 72, 153);
}

/* Content Structure */
.brief-structure .structure-h1 {
  font-size: 1.1rem;
  margin-bottom: var(--space-md);
  padding: var(--space-sm);
  background: var(--bg-tertiary);
  border-radius: var(--radius);
}

.structure-section {
  margin-bottom: var(--space-md);
  padding-left: var(--space-md);
  border-left: 3px solid var(--border);
}

.section-h2 {
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.section-h3s {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: var(--space-xs) 0;
}

.h3-item {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  padding: var(--space-xs);
  background: var(--bg-tertiary);
  border-radius: var(--radius);
}

.section-points {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: var(--space-xs) 0;
}

.section-words {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* Questions */
.brief-questions-list {
  list-style: decimal;
  padding-left: var(--space-lg);
}

.brief-questions-list li {
  margin-bottom: var(--space-xs);
}

/* Links */
.link-suggestion {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  margin-bottom: var(--space-xs);
  flex-wrap: wrap;
}

.link-anchor {
  font-weight: 500;
  color: var(--primary);
}

.link-arrow {
  color: var(--text-muted);
}

.link-suggestion a {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  word-break: break-all;
}

/* Sources */
.source-item {
  padding: var(--space-sm);
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  margin-bottom: var(--space-xs);
}

.source-type {
  display: inline-block;
  padding: var(--space-xs);
  background: var(--primary);
  color: white;
  border-radius: var(--radius);
  font-size: var(--font-size-xs);
  margin-right: var(--space-sm);
}

.source-desc {
  display: block;
  margin: var(--space-xs) 0;
}

.source-search {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* Tips */
.brief-tips-list {
  list-style: disc;
  padding-left: var(--space-lg);
}

.brief-tips-list li {
  margin-bottom: var(--space-xs);
}

/* CTA */
.brief-cta .cta-item {
  margin-bottom: var(--space-xs);
}

.brief-cta label {
  font-weight: 500;
  margin-right: var(--space-sm);
}

/* Export */
.brief-export-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

/* ============================================================
   CONTENT GAP STYLES
   ============================================================ */

.gap-results {
  animation: fadeIn 0.3s ease;
}

.gap-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

@media (max-width: 768px) {
  .gap-summary {
    grid-template-columns: repeat(2, 1fr);
  }
}

.gap-summary-card {
  background: var(--bg-tertiary);
  padding: var(--space-md);
  border-radius: var(--radius);
  text-align: center;
}

.gap-summary-card.highlight {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid var(--success);
}

.gap-summary-value {
  font-size: 2rem;
  font-weight: 700;
}

.gap-summary-value.severity {
  font-size: 1.25rem;
  text-transform: uppercase;
}

.gap-summary-value.severity.high {
  color: var(--error);
}

.gap-summary-value.severity.medium {
  color: var(--warning);
}

.gap-summary-value.severity.low {
  color: var(--success);
}

.gap-summary-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* Gap Section */
.gap-section {
  margin-bottom: var(--space-lg);
}

.gap-section h4 {
  margin: 0 0 var(--space-md) 0;
}

/* Filter Bar */
.gap-filter-bar {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.gap-filter-btn {
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: var(--font-size-sm);
}

.gap-filter-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

/* Gap Items */
.gaps-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.gap-item {
  background: var(--bg-tertiary);
  padding: var(--space-md);
  border-radius: var(--radius);
  border-left: 4px solid var(--border);
}

.gap-item.quick-win {
  border-left-color: var(--success);
}

.gap-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
  flex-wrap: wrap;
}

.gap-topic {
  font-weight: 600;
  font-size: 1.1rem;
}

.gap-badges {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.gap-badges .badge {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.badge.quick-win {
  background: var(--success);
  color: white;
}

.badge.priority-high {
  background: rgba(239, 68, 68, 0.1);
  color: var(--error);
}

.badge.priority-medium {
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning);
}

.badge.priority-low {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
}

.badge.traffic-high {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
}

.badge.traffic-medium {
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning);
}

.badge.traffic-low {
  background: rgba(156, 163, 175, 0.2);
  color: var(--text-secondary);
}

.gap-details {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.gap-competitors {
  margin-bottom: var(--space-xs);
}

.gap-suggestion {
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius);
  margin-top: var(--space-sm);
}

.gap-keywords {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

/* Clusters */
.gap-clusters {
  display: grid;
  gap: var(--space-md);
}

.cluster-item {
  background: var(--bg-tertiary);
  padding: var(--space-md);
  border-radius: var(--radius);
}

.cluster-name {
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

.cluster-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.kw-tag {
  padding: var(--space-xs);
  background: var(--bg-secondary);
  border-radius: var(--radius);
  font-size: var(--font-size-xs);
}

.cluster-coverage {
  display: flex;
  gap: var(--space-md);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-sm);
}

.coverage-none { color: var(--error); }
.coverage-partial { color: var(--warning); }
.coverage-good { color: var(--success); }

.cluster-rec {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-style: italic;
}

/* Recommendations */
.gap-recommendations {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.rec-item {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius);
}

.rec-rank {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
  min-width: 40px;
}

.rec-content {
  flex: 1;
}

.rec-action {
  font-weight: 500;
  margin-bottom: var(--space-xs);
}

.rec-meta {
  display: flex;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
}

.rec-meta span {
  padding: var(--space-xs);
  border-radius: var(--radius);
}

.impact-high { background: rgba(16, 185, 129, 0.1); color: var(--success); }
.impact-medium { background: rgba(245, 158, 11, 0.1); color: var(--warning); }
.impact-low { background: rgba(156, 163, 175, 0.1); color: var(--text-secondary); }

.effort-low { background: rgba(16, 185, 129, 0.1); color: var(--success); }
.effort-medium { background: rgba(245, 158, 11, 0.1); color: var(--warning); }
.effort-high { background: rgba(239, 68, 68, 0.1); color: var(--error); }

/* Competitor Insights */
.gap-competitor-insights {
  display: grid;
  gap: var(--space-md);
}

.insight-item {
  background: var(--bg-tertiary);
  padding: var(--space-md);
  border-radius: var(--radius);
}

.insight-competitor {
  font-weight: 600;
  margin-bottom: var(--space-sm);
  color: var(--primary);
}

.insight-strength, .insight-strategy {
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-xs);
}

/* Export */
.gap-export-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

/* ============================================================
   SEO RECOMMENDATIONS STYLES
   ============================================================ */

.seo-rec-results {
  animation: fadeIn 0.3s ease;
}

/* Score Card */
.seo-rec-score-card {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background: var(--bg-tertiary);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
  align-items: center;
  flex-wrap: wrap;
}

.seo-rec-score-circle {
  position: relative;
  width: 120px;
  height: 120px;
}

.seo-rec-score-circle .score-svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}

.seo-rec-score-circle .score-bg {
  fill: none;
  stroke: var(--border);
  stroke-width: 8;
}

.seo-rec-score-circle .score-progress {
  fill: none;
  stroke: var(--success);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s ease;
}

.seo-rec-score-circle .score-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  font-weight: 700;
}

.seo-rec-score-breakdown {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.breakdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.breakdown-label {
  min-width: 80px;
  font-size: var(--font-size-sm);
}

.breakdown-bar {
  flex: 1;
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.breakdown-fill {
  height: 100%;
  background: var(--primary);
  transition: width 0.5s ease;
}

.breakdown-value {
  min-width: 30px;
  text-align: right;
  font-weight: 600;
}

/* Summary */
.seo-rec-summary {
  padding: var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  margin-bottom: var(--space-lg);
}

.seo-rec-summary p {
  margin: 0;
  line-height: 1.6;
}

/* Section */
.seo-rec-section {
  margin-bottom: var(--space-lg);
}

.seo-rec-section h4 {
  margin: 0 0 var(--space-md) 0;
}

/* Lists */
.seo-rec-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.seo-rec-item {
  padding: var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  border-left: 4px solid var(--border);
}

.seo-rec-item.quick-win {
  border-left-color: var(--success);
}

.seo-rec-item.critical {
  border-left-color: var(--error);
  background: rgba(239, 68, 68, 0.05);
}

.rec-issue {
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

.rec-current, .rec-action, .rec-fix, .rec-impact, .rec-time {
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-xs);
}

.rec-time {
  color: var(--text-secondary);
}

.rec-severity {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius);
  font-size: var(--font-size-xs);
  font-weight: 500;
  margin-bottom: var(--space-sm);
}

.severity-high {
  background: rgba(239, 68, 68, 0.1);
  color: var(--error);
}

.severity-medium {
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning);
}

.severity-low {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
}

.code-example {
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  overflow-x: auto;
}

/* Priority Matrix */
.priority-matrix {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

@media (max-width: 600px) {
  .priority-matrix {
    grid-template-columns: 1fr;
  }
}

.matrix-quadrant {
  padding: var(--space-md);
  border-radius: var(--radius);
  min-height: 120px;
}

.matrix-quadrant.high-impact-low-effort {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid var(--success);
}

.matrix-quadrant.high-impact-high-effort {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid var(--info);
}

.matrix-quadrant.low-impact-low-effort {
  background: rgba(156, 163, 175, 0.1);
  border: 1px solid var(--border);
}

.matrix-quadrant.low-impact-high-effort {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid var(--warning);
}

.quadrant-label {
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

.matrix-quadrant ul {
  margin: 0;
  padding-left: var(--space-md);
  font-size: var(--font-size-sm);
}

.matrix-quadrant li {
  margin-bottom: var(--space-xs);
}

/* Checklist */
.seo-rec-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.checklist-week {
  background: var(--bg-tertiary);
  padding: var(--space-md);
  border-radius: var(--radius);
}

.week-header {
  font-weight: 600;
  margin-bottom: var(--space-sm);
  color: var(--primary);
}

.checklist-week ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.checklist-week li {
  margin-bottom: var(--space-xs);
}

.checklist-week label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  cursor: pointer;
}

.checklist-week input[type="checkbox"] {
  margin-top: 3px;
}

/* Details */
.seo-rec-details {
  margin-bottom: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.seo-rec-details summary {
  padding: var(--space-md);
  cursor: pointer;
  font-weight: 500;
}

.seo-rec-details[open] summary {
  border-bottom: 1px solid var(--border);
}

.seo-rec-details .seo-rec-list {
  padding: var(--space-md);
}

/* Export */
.seo-rec-export-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

/* Weekly Audit */
.weekly-audit-section {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
}

.weekly-audit-section h4 {
  margin: 0 0 var(--space-xs) 0;
}

.weekly-audit-section > .field-helper {
  margin-bottom: var(--space-md);
}

/* Checkboxes */
.seo-rec-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.seo-rec-checkboxes .checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: var(--font-size-sm);
}

.no-items, .no-gaps, .no-suggestions {
  color: var(--text-secondary);
  font-style: italic;
  padding: var(--space-md);
  text-align: center;
}

/* ============================================================
   TRAFFIC VALUE ESTIMATOR STYLES
   ============================================================ */
.traffic-value-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
}

.traffic-value-header {
  margin-bottom: 24px;
}

.traffic-value-grid {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 24px;
}

@media (max-width: 1024px) {
  .traffic-value-grid {
    grid-template-columns: 1fr;
  }
}

.traffic-value-input-panel,
.traffic-value-results-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tv-card {
  background: var(--bg-secondary);
  border-radius: 12px;
  border: 1px solid var(--border);
  overflow: hidden;
}

.tv-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-tertiary);
}

.tv-card-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.tv-card-body {
  padding: 20px;
}

.tv-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.tv-tab {
  flex: 1;
  padding: 10px 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.2s;
}

.tv-tab:hover {
  background: var(--bg-hover);
}

.tv-tab.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.tv-form-group {
  margin-bottom: 16px;
}

.tv-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.tv-keyword-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.tv-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.tv-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 40px;
  background: var(--bg-secondary);
  border-radius: 12px;
  border: 2px dashed var(--border);
}

.tv-placeholder-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.tv-placeholder h3 {
  margin: 0 0 8px;
}

.tv-placeholder p {
  color: var(--text-muted);
  max-width: 400px;
}

.tv-placeholder-tips {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tv-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.tv-results-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tv-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.tv-summary-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--bg-secondary);
  border-radius: 12px;
  border: 1px solid var(--border);
}

.tv-card-highlight {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: white;
  border: none;
}

.tv-summary-icon {
  font-size: 32px;
}

.tv-summary-value {
  font-size: 1.5rem;
  font-weight: 700;
}

.tv-summary-label {
  font-size: 0.875rem;
  opacity: 0.8;
}

.tv-chart-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.tv-chart-label {
  width: 140px;
  font-size: 0.875rem;
}

.tv-chart-bar-wrap {
  flex: 1;
  height: 32px;
  background: var(--bg-tertiary);
  border-radius: 8px;
  overflow: hidden;
}

.tv-chart-bar {
  height: 100%;
  border-radius: 8px;
  transition: width 0.5s ease;
}

.tv-bar-organic {
  background: linear-gradient(90deg, #10b981, #34d399);
}

.tv-bar-paid {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.tv-chart-value {
  width: 120px;
  text-align: right;
  font-weight: 600;
  font-size: 0.875rem;
}

.savings-highlight {
  display: inline-block;
  padding: 12px 20px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border-radius: 8px;
  font-weight: 600;
}

.tv-projections-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 768px) {
  .tv-projections-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.tv-projection {
  text-align: center;
  padding: 16px;
  background: var(--bg-tertiary);
  border-radius: 8px;
}

.projection-period {
  display: block;
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.projection-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary);
}

.tv-keyword-table-wrap {
  overflow-x: auto;
}

.tv-keyword-table {
  width: 100%;
  border-collapse: collapse;
}

.tv-keyword-table th,
.tv-keyword-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.tv-keyword-table th {
  background: var(--bg-tertiary);
  font-weight: 600;
  font-size: 0.875rem;
}

.tv-value-highlight {
  color: var(--success);
  font-weight: 600;
}

.tv-export-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.tv-benchmarks-card .tv-benchmark-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tv-benchmark-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border-radius: 6px;
  font-size: 0.875rem;
}

.tv-competitor-section {
  margin-top: 24px;
}

.tv-competitor-inputs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tv-competitor-item {
  display: flex;
  gap: 12px;
  align-items: center;
}

.tv-competitor-item .field {
  flex: 1;
}

.tv-competitor-actions {
  margin-top: 16px;
}

.tv-competitor-results {
  margin-top: 20px;
}

.tv-comp-summary {
  display: flex;
  gap: 24px;
  margin-bottom: 16px;
}

.tv-comp-table-wrap {
  overflow-x: auto;
}

.tv-comp-table {
  width: 100%;
  border-collapse: collapse;
}

.tv-comp-table th,
.tv-comp-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.tv-comp-you {
  background: var(--bg-tertiary);
  font-weight: 600;
}

.tv-positive {
  color: var(--success);
}

.tv-negative {
  color: var(--error);
}

/* ============================================================
   CONVERSION FUNNEL ANALYZER STYLES
   ============================================================ */
.funnel-analyzer-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
}

.funnel-header {
  margin-bottom: 24px;
}

.funnel-main-grid {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 24px;
}

@media (max-width: 1024px) {
  .funnel-main-grid {
    grid-template-columns: 1fr;
  }
}

.funnel-input-panel,
.funnel-results-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.funnel-card {
  background: var(--bg-secondary);
  border-radius: 12px;
  border: 1px solid var(--border);
  overflow: hidden;
}

.funnel-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-tertiary);
}

.funnel-card-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.funnel-card-body {
  padding: 20px;
}

.funnel-form-group {
  margin-bottom: 16px;
}

.funnel-presets {
  margin-bottom: 20px;
}

.funnel-preset-btns {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.funnel-steps-section {
  margin-bottom: 20px;
}

.funnel-steps-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.funnel-step-item {
  display: flex;
  gap: 8px;
  align-items: center;
}

.funnel-step-num {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
}

.funnel-step-item .field {
  flex: 1;
}

.funnel-step-name {
  flex: 2;
}

.funnel-step-visitors {
  flex: 1;
}

.funnel-options {
  margin-bottom: 20px;
}

.funnel-actions {
  display: flex;
  gap: 12px;
}

.funnel-benchmarks-card .funnel-benchmark-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.funnel-benchmark-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border-radius: 6px;
  font-size: 0.875rem;
}

.funnel-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 40px;
  background: var(--bg-secondary);
  border-radius: 12px;
  border: 2px dashed var(--border);
}

.funnel-placeholder-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.funnel-placeholder h3 {
  margin: 0 0 8px;
}

.funnel-placeholder p {
  color: var(--text-muted);
  max-width: 400px;
}

.funnel-placeholder-tips {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.funnel-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.funnel-results-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.funnel-visualization {
  padding: 20px 0;
}

.funnel-viz-step {
  margin-bottom: 8px;
}

.funnel-viz-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(90deg, var(--primary), var(--primary-dark));
  border-radius: 8px;
  color: white;
  min-width: 150px;
  transition: width 0.5s ease;
}

.funnel-viz-name {
  font-weight: 500;
}

.funnel-viz-count {
  font-weight: 700;
}

.funnel-viz-dropoff {
  text-align: center;
  padding: 8px;
  color: var(--error);
  font-size: 0.875rem;
}

.funnel-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.funnel-metric-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: 12px;
  border: 1px solid var(--border);
}

.funnel-metric-icon {
  font-size: 28px;
}

.funnel-metric-value {
  font-size: 1.25rem;
  font-weight: 700;
}

.funnel-metric-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.funnel-dropoff-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.funnel-dropoff-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border-radius: 8px;
  border-left: 4px solid var(--warning);
}

.funnel-dropoff-severe {
  border-left-color: var(--error);
  background: rgba(239, 68, 68, 0.1);
}

.funnel-dropoff-moderate {
  border-left-color: var(--warning);
}

.funnel-dropoff-low {
  border-left-color: var(--success);
}

.dropoff-rank {
  font-weight: 700;
  color: var(--text-muted);
}

.dropoff-step {
  flex: 1;
  font-weight: 500;
}

.dropoff-rate {
  font-weight: 700;
  color: var(--error);
}

.dropoff-count {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.funnel-ai-card .ai-badge {
  font-size: 0.75rem;
  padding: 4px 8px;
  background: var(--primary);
  color: white;
  border-radius: 4px;
}

.funnel-ai-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px;
  color: var(--text-muted);
}

.funnel-ai-content {
  line-height: 1.6;
}

.ai-analysis {
  margin-bottom: 20px;
  padding: 16px;
  background: var(--bg-tertiary);
  border-radius: 8px;
}

.ai-step-recs {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ai-step-rec {
  padding: 16px;
  background: var(--bg-tertiary);
  border-radius: 8px;
}

.ai-step-rec h4 {
  margin: 0 0 12px;
}

.rec-issues,
.rec-fixes {
  margin-bottom: 12px;
}

.rec-issues ul,
.rec-fixes ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.rec-issues li,
.rec-fixes li {
  margin-bottom: 4px;
}

.ai-quick-wins {
  margin-top: 20px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05));
  border-radius: 8px;
  border-left: 4px solid var(--success);
}

.ai-quick-wins h4 {
  margin: 0 0 12px;
}

.ai-impact {
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border-radius: 8px;
}

.funnel-abtest-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ab-step-group {
  padding: 16px;
  background: var(--bg-tertiary);
  border-radius: 8px;
}

.ab-step-group h4 {
  margin: 0 0 12px;
}

.ab-test-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border-radius: 6px;
  margin-bottom: 8px;
}

.ab-element {
  font-weight: 500;
}

.ab-variants {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.funnel-table-wrap {
  overflow-x: auto;
}

.funnel-table {
  width: 100%;
  border-collapse: collapse;
}

.funnel-table th,
.funnel-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.funnel-table th {
  background: var(--bg-tertiary);
  font-weight: 600;
  font-size: 0.875rem;
}

.funnel-table td.severe {
  color: var(--error);
  font-weight: 600;
}

.funnel-table td.moderate {
  color: var(--warning);
}

.funnel-export-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.funnel-ga4-section,
.funnel-history-section {
  margin-top: 24px;
}

.funnel-ga4-notice {
  text-align: center;
  padding: 20px;
}

.funnel-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.funnel-history-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}

.empty-icon {
  font-size: 32px;
  display: block;
  margin-bottom: 12px;
}

.funnel-history-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border-radius: 8px;
}

.history-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.history-name {
  font-weight: 500;
}

.history-date {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.history-rate {
  font-weight: 700;
  color: var(--primary);
}

/* Spinner for loading states */
.spinner-sm {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   Manus AI Integration Styles
   ============================================================ */

.manus-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

.manus-header {
  margin-bottom: 24px;
}

.manus-header .page-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.manus-header .page-subtitle {
  color: var(--text-muted);
  margin-bottom: 16px;
}

.manus-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg-tertiary);
  border-radius: 20px;
  font-size: 0.85rem;
}

.manus-status-badge .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
}

.manus-status-badge.connected .status-dot {
  background: var(--success);
  animation: pulse 2s infinite;
}

.manus-status-badge.disconnected .status-dot {
  background: var(--danger);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Manus Sub-tabs */
.manus-subtabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-tertiary);
  border-radius: 12px;
  margin-bottom: 24px;
  overflow-x: auto;
}

.manus-subtab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.manus-subtab:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.manus-subtab.active {
  background: var(--primary);
  color: white;
}

.subtab-icon {
  font-size: 1.1em;
}

/* Manus Sub-tab Content */
.manus-subtab-content {
  display: none;
}

.manus-subtab-content.active {
  display: block;
}

/* Manus Cards */
.manus-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 24px;
}

.manus-card-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.manus-card-header h3 {
  margin: 0 0 4px 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.manus-card-header p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.manus-card-body {
  padding: 24px;
}

.manus-card-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* Templates Grid */
.manus-templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.manus-template-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.2s;
}

.manus-template-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.manus-template-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: var(--bg-tertiary);
  border-radius: 12px;
  margin-bottom: 16px;
}

.manus-template-name {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 8px;
}

.manus-template-desc {
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* Template Form */
.manus-template-form .manus-card-header {
  position: relative;
}

.manus-template-form .manus-card-header .btn-ghost {
  position: absolute;
  top: 16px;
  left: 16px;
}

/* Task Status */
.manus-task-status {
  background: var(--bg-tertiary);
  border-radius: 8px;
  padding: 16px;
}

.task-status-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.task-status-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.task-status-badge.pending {
  background: var(--warning-bg, #fef3c7);
  color: var(--warning, #d97706);
}

.task-status-badge.running {
  background: var(--info-bg, #dbeafe);
  color: var(--info, #2563eb);
}

.task-status-badge.completed {
  background: var(--success-bg, #d1fae5);
  color: var(--success);
}

.task-status-badge.failed {
  background: var(--danger-bg, #fee2e2);
  color: var(--danger);
}

.task-id {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.task-prompt-preview {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: 8px;
  max-height: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-actions {
  display: flex;
  gap: 8px;
}

/* Task List */
.manus-task-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.manus-task-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--bg-tertiary);
  border-radius: 8px;
  transition: background 0.2s;
}

.manus-task-item:hover {
  background: var(--bg-hover);
}

.manus-task-item .task-status-badge {
  flex-shrink: 0;
}

.manus-task-info {
  flex: 1;
  min-width: 0;
}

.manus-task-prompt {
  font-weight: 500;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.manus-task-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.manus-task-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.manus-loading {
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
}

.manus-empty {
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
}

.manus-empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

/* History Controls */
.manus-history-controls {
  display: flex;
  gap: 12px;
}

.manus-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.manus-card-header h3 {
  flex: 1;
}

/* Settings */
.manus-settings-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  margin-bottom: 24px;
}

.manus-connection-status {
  background: var(--bg-tertiary);
  border-radius: 8px;
  padding: 16px;
}

.manus-connection-status .status-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.manus-connection-status .status-item:last-child {
  border-bottom: none;
}

.manus-connection-status .status-label {
  color: var(--text-muted);
}

.manus-connection-status .status-value {
  font-weight: 500;
}

.manus-connection-status .status-value.success {
  color: var(--success);
}

.manus-connection-status .status-value.error {
  color: var(--danger);
}

/* Attached Files */
.manus-attached-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.manus-attached-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg-tertiary);
  border-radius: 20px;
  font-size: 0.85rem;
}

.manus-attached-file .remove-file {
  cursor: pointer;
  opacity: 0.7;
}

.manus-attached-file .remove-file:hover {
  opacity: 1;
}

/* Input with action button */
.input-with-action {
  display: flex;
  gap: 8px;
}

.input-with-action .field {
  flex: 1;
}

/* Field row */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 600px) {
  .field-row {
    grid-template-columns: 1fr;
  }
}

/* Variables pills */
.manus-template-variables {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.manus-variable-pill {
  display: inline-block;
  padding: 4px 10px;
  background: var(--primary-bg, rgba(79, 108, 229, 0.1));
  color: var(--primary);
  border-radius: 16px;
  font-size: 0.75rem;
  font-family: 'JetBrains Mono', monospace;
}

/* Modal overlay fix for manus */
.manus-subtab-content .modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.manus-subtab-content .modal-sm {
  max-width: 480px;
  width: 90%;
}

/* ============================================================
   NEW FEATURES CSS
   ============================================================ */

/* Content Scoring Editor */
.cs-metrics {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-metric {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.cs-metric:last-child {
  border-bottom: none;
}

#csEditor {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  white-space: pre-wrap;
  word-wrap: break-word;
}

#csEditor:empty:before {
  content: attr(placeholder);
  color: var(--text-dim);
  pointer-events: none;
}

/* SERP Preview Tool */
.serp-preview-box {
  border: 1px solid #e8eaed;
  box-shadow: 0 1px 6px rgba(32, 33, 36, 0.1);
  transition: max-width 0.3s ease;
}

.serp-preview-box strong {
  font-weight: 600;
}

/* Keyword Clustering */
.clusters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.cluster-card {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 16px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.cluster-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.cluster-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Backlink Gap */
.gap-list > div {
  transition: background 0.2s;
}

.gap-list > div:hover {
  background: var(--bg-secondary);
}

/* Domain Authority */
#daScore {
  font-size: 3rem;
  font-weight: 700;
}

/* Competitor Alerts */
.alert-item {
  transition: background 0.2s;
}

.alert-item:hover {
  background: var(--bg-secondary);
}

/* Keyword Difficulty */
#kdScore {
  transition: color 0.3s;
}

/* Animation for score circles */
@keyframes scoreReveal {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

#csScoreCircle {
  animation: scoreReveal 0.5s ease-out;
}

/* Mobile responsive for new features */
@media (max-width: 768px) {
  .scoring-container > div,
  .kd-container .card-body > div,
  .gap-container .card-body > div {
    grid-template-columns: 1fr;
  }

  .serp-preview-container > div {
    grid-template-columns: 1fr;
  }

  .clustering-container > div {
    grid-template-columns: 1fr;
  }

  .alerts-container > div {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   UI/UX IMPROVEMENTS - Feb 2026
   Modern, Clean, Professional Design System Enhancements
   ============================================================ */

/* ============================================================
   ENHANCED CARD STYLES
   ============================================================ */
.card,
.dashboard-card {
	background: var(--surface);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
				0 2px 4px -2px rgba(0, 0, 0, 0.1);
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover,
.dashboard-card:hover {
	border-color: var(--border-strong);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15),
				0 4px 6px -4px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

/* Stat cards special treatment */
.stat-card {
	background: linear-gradient(135deg, var(--surface) 0%, var(--surface-elevated) 100%);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	transition: all 0.25s ease;
}

.stat-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.2);
	border-color: var(--accent);
}

.stat-card .stat-icon {
	font-size: 2rem;
	margin-bottom: var(--space-sm);
	filter: grayscale(0.2);
	transition: filter 0.25s ease, transform 0.25s ease;
}

.stat-card:hover .stat-icon {
	filter: grayscale(0);
	transform: scale(1.1);
}

.stat-card .stat-value {
	font-size: 2rem;
	font-weight: 700;
	color: var(--text-primary);
	line-height: 1.2;
}

.stat-card .stat-label {
	font-size: var(--font-size-sm);
	color: var(--text-muted);
	margin-top: 4px;
}
   MOBILE NAVIGATION FIXES
   ============================================================ */

/* Mobile Menu Toggle Button - visible only on tablet/mobile */
.mobile-menu-toggle {
	display: none;
	width: 100%;
	padding: 14px 16px;
	background: var(--surface);
	border: none;
	border-bottom: 1px solid var(--border);
	color: var(--text-primary);
	font-family: inherit;
	font-size: var(--font-size-base);
	font-weight: 500;
	cursor: pointer;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	position: sticky;
	top: 0;
	z-index: 50;
}

.mobile-menu-toggle .hamburger-icon {
	font-size: 20px;
	width: 24px;
	text-align: center;
}

.mobile-menu-toggle .current-tab-name {
	flex: 1;
	text-align: left;
	font-weight: 600;
}

.mobile-menu-toggle .dropdown-arrow {
	font-size: 12px;
	transition: transform 0.3s ease;
	color: var(--text-muted);
}

.mobile-menu-toggle.open .dropdown-arrow {
	transform: rotate(180deg);
}

/* Mobile Menu Close Button */
.mobile-menu-close {
	display: none;
	width: 100%;
	padding: 16px;
	background: var(--accent);
	color: white;
	border: none;
	font-family: inherit;
	font-size: var(--font-size-base);
	font-weight: 600;
	cursor: pointer;
	text-align: center;
	margin-bottom: 8px;
	border-radius: var(--radius-sm);
	transition: background 0.2s ease;
}

.mobile-menu-close:hover {
	background: var(--accent-hover);
}

/* Tablet breakpoint - show mobile toggle instead of full tab nav */
@media (max-width: 1024px) and (min-width: 769px) {
	.mobile-menu-toggle {
		display: flex;
	}

	.tab-nav {
		display: none;
		flex-direction: column;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--surface);
		border-bottom: 1px solid var(--border);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
		z-index: 100;
		max-height: 70vh;
		overflow-y: auto;
		padding: 12px;
	}

	.tab-nav.mobile-open {
		display: flex;
	}

	.mobile-menu-close {
		display: block;
	}

	.tab-btn {
		padding: 14px 18px;
		font-size: var(--font-size-sm);
		text-align: left;
		justify-content: flex-start;
		border-radius: var(--radius-sm);
	}

	.tab-btn .tab-icon {
		font-size: 18px;
		margin-right: 12px;
	}
}

/* Mobile breakpoint - use bottom nav primarily */
@media (max-width: 768px) {
	/* Show mobile menu toggle only when bottom nav isn't available */
	.mobile-menu-toggle {
		display: none;
	}

	/* Bottom nav handles navigation on mobile */
	.tab-nav {
		display: none !important;
	}

	/* Mobile menu close - not needed with bottom nav */
	.mobile-menu-close {
		display: none;
	}

	/* Better header on mobile */
	.app-header {
		padding: 12px 16px;
		gap: var(--space-sm);
	}

	.brand {
		gap: 10px;
	}

	.logo {
		width: 32px;
		height: 32px;
	}

	.brand-text .name {
		font-size: 16px;
	}

	.brand-text .sub {
		display: none;
	}

	/* Show settings menu on mobile - it was hidden */
	.settings-menu-container {
		display: block !important;
	}

	.settings-menu-btn {
		padding: 8px 10px;
		font-size: 16px;
	}

	/* Better spacing for dashboard */
	.dashboard {
		padding: 0 12px 100px 12px;
		margin: 12px auto;
	}

	/* Stack stats grid better */
	.stats-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.stat-card {
		padding: var(--space-md);
	}

	.stat-card .stat-value {
		font-size: 1.5rem;
	}

	/* Quick actions grid */
	.quick-actions-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}

	.quick-action-btn {
		padding: 12px;
		min-height: 75px;
	}

	.quick-action-btn span:last-child {
		font-size: 11px;
	}
}

/* Very small screens */
@media (max-width: 480px) {
	.stats-grid {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.quick-actions-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.app-header {
		padding: 10px 12px;
	}

	.brand-text .name {
		font-size: 14px;
	}
}

/* ============================================================
   BOTTOM NAVIGATION ENHANCEMENTS
   ============================================================ */
@media (max-width: 768px) {
	.bottom-nav {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 64px;
		background: var(--surface);
		border-top: 1px solid var(--border);
		z-index: 1000;
		padding: 0;
		padding-bottom: env(safe-area-inset-bottom, 0);
		box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
	}

	.bottom-nav-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		padding: 8px 4px;
		background: none;
		border: none;
		color: var(--text-muted);
		font-size: 10px;
		font-family: inherit;
		cursor: pointer;
		transition: all 0.2s ease;
		text-decoration: none;
		position: relative;
	}

	.bottom-nav-item::before {
		content: '';
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 0;
		height: 3px;
		background: var(--accent);
		border-radius: 0 0 3px 3px;
		transition: width 0.2s ease;
	}

	.bottom-nav-item.active::before {
		width: 32px;
	}

	.bottom-nav-item:hover,
	.bottom-nav-item:active {
		color: var(--accent);
	}

	.bottom-nav-item.active {
		color: var(--accent);
	}

	.bottom-nav-item .nav-icon {
		font-size: 22px;
		line-height: 1;
		transition: transform 0.2s ease;
	}

	.bottom-nav-item.active .nav-icon {
		transform: scale(1.1);
	}

	.bottom-nav-item .nav-label {
		font-weight: 600;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
		font-size: 10px;
	}

	/* More menu improvements */
	.more-menu {
		display: none;
		position: fixed;
		bottom: 74px;
		left: 12px;
		right: 12px;
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: var(--radius-lg);
		padding: 12px;
		z-index: 1001;
		max-height: 65vh;
		overflow-y: auto;
		box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
	}

	.more-menu.active {
		display: block;
		animation: slideUpMore 0.25s ease-out;
	}

	@keyframes slideUpMore {
		from {
			opacity: 0;
			transform: translateY(20px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.more-menu-item {
		display: flex;
		align-items: center;
		gap: 14px;
		width: 100%;
		padding: 14px 16px;
		background: none;
		border: none;
		border-radius: var(--radius-sm);
		font-size: 15px;
		font-family: inherit;
		color: var(--text-primary);
		cursor: pointer;
		text-align: left;
		transition: all 0.15s ease;
	}

	.more-menu-item:hover,
	.more-menu-item:active {
		background: var(--glass-light);
	}

	.more-menu-item.active {
		background: rgba(108, 140, 255, 0.15);
		color: var(--accent);
	}

	.more-menu-item .menu-icon {
		font-size: 20px;
		width: 28px;
		text-align: center;
	}

	.more-menu-overlay {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		backdrop-filter: blur(4px);
		z-index: 999;
	}

	.more-menu-overlay.active {
		display: block;
	}
}

/* ============================================================
   DASHBOARD CARD LAYOUT IMPROVEMENTS
   ============================================================ */
.dashboard-container {
	max-width: 1200px;
	margin: 0 auto;
}

.dashboard-header {
	margin-bottom: var(--space-xl);
}

.dashboard-header .page-title {
	font-size: 28px;
	font-weight: 700;
	margin: 0 0 8px;
	letter-spacing: -0.5px;
}

.dashboard-header .page-subtitle {
	font-size: var(--font-size-base);
	color: var(--text-muted);
	margin: 0;
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-lg);
	margin-bottom: var(--space-xl);
}

.dashboard-row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-lg);
	margin-bottom: var(--space-lg);
}

.dashboard-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.dashboard-card.full-width {
	grid-column: 1 / -1;
}

.dashboard-card .card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-md) var(--space-lg);
	border-bottom: 1px solid var(--border);
	background: var(--glass);
}

.dashboard-card .card-header h3 {
	margin: 0;
	font-size: var(--font-size-md);
	font-weight: 600;
}

.dashboard-card .card-body {
	padding: var(--space-lg);
}

/* Quick actions grid inside card */
.quick-actions-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
}

/* ============================================================
   TIPS CAROUSEL IMPROVEMENTS
   ============================================================ */
.tips-carousel {
	position: relative;
	overflow: hidden;
}

.tip-card {
	display: none;
	padding: var(--space-lg);
	background: var(--glass);
	border-radius: var(--radius);
	border: 1px solid var(--border);
}

.tip-card.active {
	display: flex;
	align-items: flex-start;
	gap: var(--space-md);
	animation: fadeIn 0.3s ease;
}

.tip-card .tip-icon {
	font-size: 2rem;
	flex-shrink: 0;
}

.tip-card .tip-content strong {
	display: block;
	font-size: var(--font-size-md);
	margin-bottom: 6px;
	color: var(--text-primary);
}

.tip-card .tip-content p {
	margin: 0;
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	line-height: 1.5;
}

.tips-nav {
	display: flex;
	justify-content: center;
	gap: var(--space-sm);
	margin-top: var(--space-md);
}

.tip-nav-btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--border);
	background: var(--glass);
	color: var(--text-secondary);
	cursor: pointer;
	transition: all 0.2s ease;
	font-size: 16px;
}

.tip-nav-btn:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: white;
}

/* ============================================================
   PANEL IMPROVEMENTS
   ============================================================ */
.panel {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--space-xl);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.panel-header {
	margin-bottom: var(--space-lg);
	padding-bottom: var(--space-md);
	border-bottom: 1px solid var(--border);
}

.panel-title {
	margin: 0;
	font-size: var(--font-size-lg);
	font-weight: 700;
	letter-spacing: -0.3px;
}

.panel-sub {
	font-size: var(--font-size-sm);
	color: var(--text-muted);
	margin-top: 6px;
	line-height: 1.5;
}

/* ============================================================
   MODAL IMPROVEMENTS
   ============================================================ */
.modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(8px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1050;
	padding: var(--space-lg);
}

.modal-content {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	max-width: 560px;
	width: 100%;
	max-height: 90vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	animation: modalAppear 0.25s ease-out;
}

@keyframes modalAppear {
	from {
		opacity: 0;
		transform: scale(0.95) translateY(10px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.modal-content.modal-lg {
	max-width: 720px;
}

.modal-header {
	padding: var(--space-lg) var(--space-xl);
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.modal-header h2 {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
}

.modal-close {
	width: 36px;
	height: 36px;
	border-radius: var(--radius-sm);
	border: none;
	background: var(--glass);
	color: var(--text-muted);
	font-size: 20px;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal-close:hover {
	background: var(--glass-strong);
	color: var(--text-primary);
}

.modal-body {
	padding: var(--space-xl);
	overflow-y: auto;
	flex: 1;
}

.modal-footer {
	padding: var(--space-lg) var(--space-xl);
	border-top: 1px solid var(--border);
	display: flex;
	justify-content: flex-end;
	gap: var(--space-sm);
	background: var(--glass);
}

/* ============================================================
   SETTINGS MENU IMPROVEMENTS
   ============================================================ */
.settings-menu-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 220px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
	z-index: 100;
	padding: 8px;
	animation: dropdownAppear 0.2s ease-out;
}

@keyframes dropdownAppear {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.settings-menu-item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 12px 14px;
	background: none;
	border: none;
	border-radius: var(--radius-sm);
	font-family: inherit;
	font-size: var(--font-size-sm);
	color: var(--text-primary);
	cursor: pointer;
	text-align: left;
	transition: all 0.15s ease;
}

.settings-menu-item:hover {
	background: var(--glass-light);
}

.settings-menu-item .settings-item-icon {
	font-size: 16px;
	width: 24px;
	text-align: center;
}

.settings-menu-divider {
	border: none;
	border-top: 1px solid var(--border);
	margin: 8px 0;
}

/* ============================================================
   LIGHT THEME ENHANCEMENTS
   ============================================================ */
.theme-light .stat-card {
	background: linear-gradient(135deg, #ffffff 0%, #f8f9fc 100%);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.theme-light .stat-card:hover {
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.theme-light .quick-action-btn {
	background: #ffffff;
	border-color: var(--border);
}

.theme-light .quick-action-btn:hover {
	background: rgba(79, 108, 229, 0.05);
	border-color: var(--accent);
}

.theme-light .bottom-nav {
	background: #ffffff;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
}

.theme-light .more-menu {
	background: #ffffff;
	box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
}

.theme-light .settings-menu-dropdown {
	background: #ffffff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.theme-light .modal-content {
	background: #ffffff;
}

.theme-light .tip-card {
	background: #f8f9fc;
}

/* ============================================================
   ANIMATION UTILITIES
   ============================================================ */
@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.05); }
}

/* Apply smooth transitions to interactive elements */
.card,
.btn,
.stat-card,
.quick-action-btn,
.tab-btn,
.bottom-nav-item,
.more-menu-item,
.settings-menu-item {
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   COMPREHENSIVE RESPONSIVE OVERHAUL - Mobile First
   Added: Feb 2026
   ============================================================ */

/* --- Standardized Breakpoints ---
   xs: 0-479px (small phones)
   sm: 480-767px (large phones)
   md: 768-1023px (tablets)
   lg: 1024-1279px (small desktops)
   xl: 1280px+ (large desktops)
*/

/* === GLOBAL RESPONSIVE FOUNDATION === */

/* Ensure no horizontal overflow */
html, body {
	overflow-x: hidden;
	max-width: 100vw;
}

* {
	box-sizing: border-box;
}

/* === TYPOGRAPHY RESPONSIVE === */
@media (max-width: 767px) {
	:root {
		--font-size-base: 14px;
		--font-size-sm: 12px;
		--font-size-lg: 16px;
		--font-size-xl: 18px;
		--font-size-2xl: 22px;
		--font-size-3xl: 26px;
		--space-xl: 16px;
		--space-2xl: 24px;
	}

	h1, .page-header-title {
		font-size: var(--font-size-2xl) !important;
		line-height: 1.3 !important;
	}

	h2 {
		font-size: var(--font-size-xl) !important;
	}

	h3 {
		font-size: var(--font-size-lg) !important;
	}
}

@media (max-width: 479px) {
	:root {
		--font-size-base: 13px;
		--font-size-sm: 11px;
		--space-md: 10px;
		--space-lg: 14px;
		--space-xl: 16px;
	}
}

/* === MAIN LAYOUT RESPONSIVE === */

/* Mobile: Full width content */
@media (max-width: 1024px) {
	.main-wrap {
		margin-left: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: var(--space-md) !important;
	}

	.dashboard {
		max-width: 100% !important;
		padding: var(--space-md) !important;
	}

	/* Two-panel layouts stack on mobile */
	.two-panel-layout,
	.kr-layout,
	.site-audit-layout,
	.paa-layout,
	.schema-layout,
	.rank-tracker-layout {
		flex-direction: column !important;
		gap: var(--space-lg) !important;
	}

	/* Panels take full width */
	.panel-left,
	.panel-right,
	.audit-input-panel,
	.audit-results-panel {
		width: 100% !important;
		max-width: 100% !important;
		position: static !important;
		flex-shrink: unset !important;
	}
}

/* === SIDEBAR RESPONSIVE === */
@media (max-width: 1024px) {
	.tab-nav {
		position: fixed !important;
		left: 0 !important;
		top: 0 !important;
		bottom: 0 !important;
		width: 280px !important;
		max-width: 85vw !important;
		transform: translateX(-100%) !important;
		z-index: 1000 !important;
		padding-top: 60px !important;
		transition: transform 0.3s ease !important;
	}

	.tab-nav.open {
		transform: translateX(0) !important;
	}

	/* Mobile menu toggle (floating button) */
	#mobileMenuToggle,
	.mobile-menu-toggle {
		display: flex !important;
		position: fixed !important;
		bottom: 20px !important;
		left: 50% !important;
		transform: translateX(-50%) !important;
		z-index: 99 !important;
		padding: 12px 24px !important;
		background: var(--accent) !important;
		color: white !important;
		border-radius: 30px !important;
		box-shadow: 0 4px 20px rgba(108, 140, 255, 0.4) !important;
	}

	/* Sidebar overlay */
	#sidebarOverlay,
	.sidebar-overlay {
		position: fixed !important;
		inset: 0 !important;
		background: rgba(0, 0, 0, 0.5) !important;
		z-index: 999 !important;
		display: none !important;
	}

	#sidebarOverlay.visible,
	.sidebar-overlay.visible {
		display: block !important;
	}
}

/* Desktop: show sidebar normally */
@media (min-width: 1025px) {
	#mobileMenuToggle,
	.mobile-menu-toggle,
	#sidebarOverlay,
	.sidebar-overlay,
	#mobileMenuClose,
	.mobile-menu-close {
		display: none !important;
	}

	.tab-nav {
		transform: translateX(0) !important;
	}
}

/* === CARDS & PANELS RESPONSIVE === */
@media (max-width: 767px) {
	.card,
	.panel {
		padding: var(--space-md) !important;
		border-radius: var(--radius) !important;
	}

	.card-header,
	.panel-header {
		padding-bottom: var(--space-sm) !important;
		margin-bottom: var(--space-md) !important;
	}

	.card-header h3,
	.panel-title {
		font-size: var(--font-size-base) !important;
	}
}

/* === GRIDS RESPONSIVE === */
@media (max-width: 1024px) {
	.stats-grid,
	.quick-actions-grid,
	.dashboard-grid,
	.features-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: var(--space-md) !important;
	}
}

@media (max-width: 600px) {
	.stats-grid,
	.quick-actions-grid,
	.dashboard-grid,
	.features-grid {
		grid-template-columns: 1fr !important;
	}
}

/* === FORMS & INPUTS RESPONSIVE === */
@media (max-width: 767px) {
	.field,
	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="password"],
	input[type="number"],
	input[type="search"],
	select,
	textarea {
		font-size: 16px !important; /* Prevents iOS zoom */
		padding: 12px 14px !important;
		border-radius: var(--radius) !important;
	}

	.field-label {
		font-size: var(--font-size-sm) !important;
		margin-bottom: 6px !important;
	}

	.form-group {
		margin-bottom: var(--space-md) !important;
	}
}

/* === BUTTONS RESPONSIVE === */
@media (max-width: 767px) {
	.btn {
		padding: 10px 16px !important;
		font-size: var(--font-size-sm) !important;
		min-height: 44px !important; /* Touch-friendly */
	}

	.btn-lg {
		padding: 12px 20px !important;
		font-size: var(--font-size-base) !important;
	}

	.btn-sm {
		padding: 8px 12px !important;
		font-size: 12px !important;
		min-height: 36px !important;
	}

	/* Stack buttons vertically on small screens */
	.actions,
	.btn-group,
	.card-header-actions {
		flex-direction: column !important;
		gap: 8px !important;
		width: 100% !important;
	}

	.actions .btn,
	.btn-group .btn {
		width: 100% !important;
		justify-content: center !important;
	}
}

/* Keep button rows on larger mobile */
@media (min-width: 480px) and (max-width: 767px) {
	.actions,
	.btn-group {
		flex-direction: row !important;
		flex-wrap: wrap !important;
	}

	.actions .btn,
	.btn-group .btn {
		width: auto !important;
		flex: 1 1 auto !important;
		min-width: 120px !important;
	}
}

/* === TABLES RESPONSIVE === */
@media (max-width: 767px) {
	/* Make tables scrollable horizontally */
	.table-wrapper,
	.table-container {
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
		margin: 0 calc(var(--space-md) * -1) !important;
		padding: 0 var(--space-md) !important;
	}

	table,
	.data-table,
	.kr-table {
		min-width: 600px !important;
		font-size: var(--font-size-sm) !important;
	}

	th, td {
		padding: 10px 12px !important;
		white-space: nowrap !important;
	}

	/* Alternative: Card-style table on mobile */
	.responsive-table {
		min-width: auto !important;
	}

	.responsive-table thead {
		display: none !important;
	}

	.responsive-table tbody tr {
		display: block !important;
		margin-bottom: var(--space-md) !important;
		background: var(--surface) !important;
		border-radius: var(--radius) !important;
		padding: var(--space-md) !important;
		border: 1px solid var(--border) !important;
	}

	.responsive-table tbody td {
		display: flex !important;
		justify-content: space-between !important;
		padding: 8px 0 !important;
		border-bottom: 1px solid var(--border-light) !important;
		white-space: normal !important;
	}

	.responsive-table tbody td:last-child {
		border-bottom: none !important;
	}

	.responsive-table tbody td::before {
		content: attr(data-label) !important;
		font-weight: 600 !important;
		color: var(--text-secondary) !important;
		margin-right: var(--space-md) !important;
	}
}

/* === MODALS RESPONSIVE === */
@media (max-width: 767px) {
	.modal-content,
	.modal-inner,
	[class*="modal"] > div {
		width: 95vw !important;
		max-width: 95vw !important;
		max-height: 90vh !important;
		margin: 5vh auto !important;
		border-radius: var(--radius-lg) !important;
	}

	.modal-header,
	.modal-body,
	.modal-footer {
		padding: var(--space-md) !important;
	}
}

/* === SPECIFIC COMPONENTS === */

/* Dashboard Stats */
@media (max-width: 600px) {
	.stat-card {
		padding: var(--space-md) !important;
	}

	.stat-value {
		font-size: var(--font-size-2xl) !important;
	}

	.stat-label {
		font-size: var(--font-size-sm) !important;
	}
}

/* Keyword Research */
@media (max-width: 1024px) {
	.kr-layout {
		display: flex !important;
		flex-direction: column !important;
	}

	#kr-keywords-subtab .panel-left,
	#kr-questions-subtab .panel-left {
		width: 100% !important;
		position: static !important;
	}
}

/* Site Audit */
@media (max-width: 1024px) {
	.site-audit-layout {
		display: flex !important;
		flex-direction: column !important;
	}

	.audit-input-panel,
	.audit-results-panel {
		width: 100% !important;
	}

	.audit-score-card {
		padding: var(--space-lg) !important;
	}

	.score-svg {
		width: 120px !important;
		height: 120px !important;
	}
}

/* Schema Generator */
@media (max-width: 1024px) {
	.schema-layout {
		flex-direction: column !important;
	}

	#schema-generator-tab .panel-left {
		width: 100% !important;
		position: static !important;
	}
}

/* TimPilot Chat */
@media (max-width: 1024px) {
	.timpilot-layout {
		flex-direction: column !important;
	}

	.timpilot-threads {
		width: 100% !important;
		max-height: 200px !important;
		border-right: none !important;
		border-bottom: 1px solid var(--border) !important;
	}

	.timpilot-chat {
		height: calc(100vh - 400px) !important;
		min-height: 400px !important;
	}
}

/* GeoGrid */
@media (max-width: 767px) {
	.geogrid-container {
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 4px !important;
	}

	.geogrid-cell {
		width: 100% !important;
		aspect-ratio: 1 !important;
		font-size: 10px !important;
	}
}

/* === TOUCH IMPROVEMENTS === */
@media (pointer: coarse) {
	/* Larger touch targets */
	.btn,
	.tab-btn,
	.nav-category-header,
	input[type="checkbox"],
	input[type="radio"],
	select {
		min-height: 44px !important;
	}

	/* Remove hover effects that don't work on touch */
	.btn:hover,
	.card:hover,
	.tab-btn:hover {
		transform: none !important;
	}
}

/* === PRINT STYLES === */
@media print {
	.tab-nav,
	.sidebar,
	#mobileMenuToggle,
	.mobile-menu-toggle,
	.app-header,
	.btn,
	.actions {
		display: none !important;
	}

	.main-wrap {
		margin: 0 !important;
		padding: 0 !important;
	}

	.card,
	.panel {
		break-inside: avoid !important;
		box-shadow: none !important;
		border: 1px solid #ddd !important;
	}
}

/* === SAFE AREA INSETS (for notched phones) === */
@supports (padding: env(safe-area-inset-bottom)) {
	#mobileMenuToggle,
	.mobile-menu-toggle {
		bottom: calc(20px + env(safe-area-inset-bottom)) !important;
	}

	.tab-nav {
		padding-bottom: env(safe-area-inset-bottom) !important;
	}
}

/* === DARK MODE MOBILE ADJUSTMENTS === */
@media (max-width: 767px) and (prefers-color-scheme: dark) {
	.card,
	.panel {
		background: var(--surface) !important;
	}
}

/* === LANDSCAPE PHONE ADJUSTMENTS === */
@media (max-width: 896px) and (orientation: landscape) {
	.tab-nav {
		width: 250px !important;
	}

	.modal-content {
		max-height: 80vh !important;
	}
}

/* ============================================================
   MOBILE DASHBOARD SPECIFIC FIXES
   Fix for "blue pill" card issue on mobile
   Added: Feb 2026
   ============================================================ */

/* Ensure stats grid never has full-height cards */
@media (max-width: 767px) {
	.stats-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 12px !important;
	}

	.stat-card {
		min-height: auto !important;
		height: auto !important;
		max-height: none !important;
		padding: 16px !important;
		aspect-ratio: unset !important;
	}

	.stat-icon {
		width: 48px !important;
		height: 48px !important;
		font-size: 24px !important;
	}

	.stat-value {
		font-size: 24px !important;
	}

	.stat-label {
		font-size: 11px !important;
	}

	/* Dashboard cards stack properly */
	.dashboard-row {
		display: flex !important;
		flex-direction: column !important;
		gap: 16px !important;
	}

	.dashboard-card {
		width: 100% !important;
		min-height: auto !important;
		height: auto !important;
	}

	.dashboard-card.full-width {
		width: 100% !important;
	}

	/* Quick actions 2x3 grid on mobile */
	.quick-actions-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 8px !important;
	}

	.quick-action-btn {
		padding: 12px 8px !important;
		min-height: 80px !important;
	}

	.quick-action-btn .qa-icon {
		font-size: 24px !important;
	}

	/* Mobile menu toggle - ensure it doesn't cover content */
	#mobileMenuToggle,
	.mobile-menu-toggle {
		max-width: 200px !important;
		padding: 10px 20px !important;
		font-size: 13px !important;
	}

	/* Add bottom padding to dashboard for floating button */
	.dashboard-container,
	#dashboard-tab {
		padding-bottom: 80px !important;
	}
}

/* Very small screens */
@media (max-width: 400px) {
	.stats-grid {
		grid-template-columns: 1fr 1fr !important;
		gap: 8px !important;
	}

	.stat-card {
		padding: 12px !important;
	}

	.stat-icon {
		width: 36px !important;
		height: 36px !important;
		font-size: 18px !important;
	}

	.stat-value {
		font-size: 20px !important;
	}

	.stat-label {
		font-size: 10px !important;
	}

	.quick-actions-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.quick-action-btn {
		padding: 10px 6px !important;
		min-height: 70px !important;
	}

	.quick-action-btn .qa-icon {
		font-size: 20px !important;
	}

	.quick-action-btn span:last-child {
		font-size: 10px !important;
	}

	#mobileMenuToggle,
	.mobile-menu-toggle {
		padding: 8px 16px !important;
		font-size: 12px !important;
		max-width: 180px !important;
	}
}

/* Prevent any card from being taller than viewport */
.stat-card,
.dashboard-card,
.card {
	max-height: none !important;
}

/* Fix any potential flex-grow issues */
@media (max-width: 767px) {
	.stats-grid > *,
	.dashboard-row > *,
	.quick-actions-grid > * {
		flex: none !important;
		flex-grow: 0 !important;
	}
}

/* ============================================================
   AGGRESSIVE MOBILE FIX - Kill Blue Pillar Bug
   ============================================================ */

/* Force hide sidebar on mobile - triple enforcement */
@media (max-width: 1024px) {
	.tab-nav:not(.open) {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
		transform: translateX(-100%) !important;
		pointer-events: none !important;
	}

	/* Only show when explicitly opened */
	.tab-nav.open {
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
		transform: translateX(0) !important;
		pointer-events: auto !important;
	}
}

/* Ensure nothing is 100vh on mobile */
@media (max-width: 767px) {
	* {
		max-height: none;
	}

	.stat-card,
	.dashboard-card,
	.card,
	.panel,
	.main-wrap,
	.tab-content,
	.dashboard-container,
	#dashboard-tab {
		min-height: auto !important;
		height: auto !important;
		max-height: none !important;
		flex: none !important;
		flex-grow: 0 !important;
	}

	/* Stats grid - guaranteed 2 columns, small cards */
	.stats-grid {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 10px !important;
		width: 100% !important;
	}

	.stat-card {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		padding: 12px !important;
		min-height: 0 !important;
		height: auto !important;
		aspect-ratio: unset !important;
		flex-grow: 0 !important;
		flex-shrink: 1 !important;
	}

	/* App layout - remove any flex grow */
	.app-layout {
		display: block !important;
		min-height: auto !important;
	}

	/* Main content - natural flow */
	.main-wrap {
		display: block !important;
		margin: 0 !important;
		padding: 10px !important;
		min-height: auto !important;
		overflow-y: auto !important;
	}

	/* Tab content - natural height */
	.tab-content.active {
		display: block !important;
		min-height: auto !important;
		height: auto !important;
		padding: 10px !important;
	}

	/* Floating button - small and at bottom */
	#mobileMenuToggle,
	.mobile-menu-toggle {
		position: fixed !important;
		bottom: 15px !important;
		left: 50% !important;
		transform: translateX(-50%) !important;
		width: auto !important;
		max-width: 180px !important;
		height: auto !important;
		padding: 8px 16px !important;
		font-size: 12px !important;
		z-index: 100 !important;
	}

	/* Hide any full-screen overlays that shouldn't be showing */
	.sidebar-overlay:not(.visible),
	#sidebarOverlay:not(.visible) {
		display: none !important;
		visibility: hidden !important;
	}
}

/* Extra small screens */
@media (max-width: 400px) {
	.stats-grid {
		grid-template-columns: 1fr 1fr !important;
		gap: 6px !important;
	}

	.stat-card {
		padding: 8px !important;
	}

	.stat-icon {
		width: 32px !important;
		height: 32px !important;
		font-size: 16px !important;
	}

	.stat-value {
		font-size: 18px !important;
	}

	.stat-label {
		font-size: 9px !important;
	}
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
	.main-wrap {
		min-height: auto !important;
		-webkit-overflow-scrolling: touch;
	}

	.tab-content.active {
		min-height: auto !important;
	}
}

/* ============================================================
   FIX MOBILE MENU TOGGLE - Prevent full-height stretch
   ============================================================ */
#mobileMenuToggle,
.mobile-menu-toggle {
	/* Reset all flex/grid properties */
	flex: none !important;
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
	flex-basis: auto !important;
	align-self: auto !important;

	/* Fixed dimensions */
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: 60px !important;
	min-width: 0 !important;
	max-width: 250px !important;

	/* Fixed positioning at bottom center */
	position: fixed !important;
	bottom: 20px !important;
	top: auto !important;
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%) !important;

	/* Small padding */
	padding: 10px 20px !important;
	margin: 0 !important;

	/* Styling */
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;

	background: var(--accent) !important;
	color: white !important;
	border: none !important;
	border-radius: 30px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	box-shadow: 0 4px 15px rgba(108, 140, 255, 0.4) !important;
	z-index: 100 !important;
	cursor: pointer !important;
}

/* Hide on desktop */
@media (min-width: 1025px) {
	#mobileMenuToggle,
	.mobile-menu-toggle {
		display: none !important;
	}
}

/* ============================================================
   Global Search - Command Palette Style
   ============================================================ */
.global-search-container {
  position: relative;
}

.global-search-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-base);
}

.global-search-trigger:hover {
  background: var(--glass-light);
  border-color: var(--accent);
  color: var(--text-primary);
}

.global-search-trigger svg {
  flex-shrink: 0;
}

.search-shortcut {
  font-size: 11px;
  padding: 2px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-mono);
}

/* Mobile: Just show icon - bigger touch target */
@media (max-width: 768px) {
  .search-shortcut {
    display: none;
  }
  .global-search-trigger {
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .global-search-trigger svg {
    width: 22px;
    height: 22px;
  }
}

/* Search Modal */
.global-search-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
}

.search-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.search-modal-content {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.search-input-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.search-input-icon {
  flex-shrink: 0;
  color: var(--text-muted);
}

.global-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 18px;
  color: var(--text-primary);
}

.global-search-input::placeholder {
  color: var(--text-muted);
}

.search-esc-hint {
  font-size: 11px;
  padding: 2px 6px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* Search Close Button - for mobile */
.search-close-btn {
  display: none;
  width: 36px;
  height: 36px;
  border: none;
  background: var(--surface-raised, #333);
  color: var(--text-muted);
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
}

.search-close-btn:hover,
.search-close-btn:active {
  background: var(--error, #ef4444);
  color: white;
}

/* Mobile search improvements */
@media (max-width: 768px) {
  .search-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .search-esc-hint {
    display: none;
  }

  .global-search-modal {
    padding-top: 5vh;
    align-items: flex-start;
  }

  .search-modal-content {
    margin: 0 8px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
  }

  .search-input-wrapper {
    padding: 12px 16px;
    gap: 10px;
  }

  .global-search-input {
    font-size: 16px; /* Prevents iOS zoom */
  }

  .global-search-results {
    flex: 1;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .search-result-item {
    padding: 14px 12px; /* Bigger touch targets */
  }
}

/* Search Results */
.global-search-results {
  max-height: 400px;
  overflow-y: auto;
  padding: 8px;
}

.search-empty-state {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-muted);
}

.search-hints {
  margin-top: 12px;
  font-size: 13px;
  opacity: 0.7;
}

.search-results-category {
  margin-bottom: 8px;
}

.search-category-title {
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition-base);
}

.search-result-item:hover,
.search-result-item.active {
  background: var(--accent);
  color: white;
}

.search-result-item:hover .result-category,
.search-result-item.active .result-category {
  color: rgba(255,255,255,0.7);
}

.result-icon {
  font-size: 18px;
  width: 28px;
  text-align: center;
}

.result-text {
  flex: 1;
}

.result-name {
  font-weight: 500;
}

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

.search-no-results {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-muted);
}

/* Autocomplete styles */
.search-autocomplete-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--surface-raised, rgba(255,255,255,0.05));
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.autocomplete-label {
  color: var(--text-muted);
}

.autocomplete-suggestion {
  color: var(--accent, #4f6ce5);
  font-weight: 500;
}

.search-highlight {
  background: rgba(79, 108, 229, 0.3);
  color: var(--accent, #4f6ce5);
  border-radius: 2px;
  padding: 0 2px;
}

.result-arrow {
  color: var(--text-muted);
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.2s;
}

.search-result-item:hover .result-arrow,
.search-result-item.active .result-arrow {
  opacity: 1;
}

.search-more-results {
  padding: 12px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  border-top: 1px solid var(--border);
}

/* Mobile autocomplete */
@media (max-width: 768px) {
  .search-autocomplete-hint {
    padding: 8px 12px;
    font-size: 12px;
  }

  .autocomplete-label {
    display: none;
  }

  .autocomplete-suggestion::before {
    content: "Tab → ";
    color: var(--text-muted);
    font-weight: normal;
  }
}

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   DESIGN SYSTEM 2.0 - Component Overhaul
   ============================================================ */

/* ==================== TYPOGRAPHY HIERARCHY ==================== */
.page-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin: 0 0 var(--space-2) 0;
  line-height: var(--leading-tight);
}

.page-subtitle {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin: 0 0 var(--space-6) 0;
}

.section-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--space-4) 0;
}

.section-subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0 0 var(--space-4) 0;
}

/* ==================== IMPROVED CARD STYLES ==================== */
.card-v2 {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: all var(--transition-base);
}

.card-v2:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
}

.card-v2-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.card-v2-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.card-v2-body {
  color: var(--text-secondary);
}

/* ==================== IMPROVED BUTTON SYSTEM ==================== */
.btn-v2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: 1;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.btn-v2:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-v2-primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.btn-v2-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: var(--shadow-glow);
}

.btn-v2-secondary {
  background: var(--surface);
  color: var(--text-primary);
  border-color: var(--border);
}

.btn-v2-secondary:hover:not(:disabled) {
  background: var(--surface-hover);
  border-color: var(--border-hover);
}

.btn-v2-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}

.btn-v2-ghost:hover:not(:disabled) {
  background: var(--glass-hover);
  color: var(--text-primary);
}

.btn-v2-danger {
  background: var(--danger);
  color: white;
  border-color: var(--danger);
}

.btn-v2-lg {
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-base);
}

.btn-v2-sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
}

/* ==================== IMPROVED FORM ELEMENTS ==================== */
.input-v2 {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all var(--transition-fast);
  outline: none;
}

.input-v2:hover {
  border-color: var(--border-hover);
}

.input-v2:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-muted);
}

.input-v2::placeholder {
  color: var(--text-muted);
}

.label-v2 {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.label-v2-required::after {
  content: ' *';
  color: var(--danger);
}

.form-group-v2 {
  margin-bottom: var(--space-5);
}

.form-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

/* ==================== IMPROVED PANELS (2-Column Layout) ==================== */
.panel-layout-v2 {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
}

.panel-left-v2 {
  flex: 0 0 400px;
  max-width: 400px;
  position: sticky;
  top: calc(var(--header-height) + var(--space-4));
}

.panel-right-v2 {
  flex: 1;
  min-width: 0;
}

@media (max-width: 1024px) {
  .panel-layout-v2 {
    flex-direction: column;
  }
  .panel-left-v2 {
    flex: none;
    width: 100%;
    max-width: 100%;
    position: static;
  }
}

/* ==================== EMPTY STATE ==================== */
.empty-state-v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-6);
  text-align: center;
  background: var(--glass);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}

.empty-state-v2-icon {
  font-size: 48px;
  margin-bottom: var(--space-4);
  opacity: 0.5;
}

.empty-state-v2-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.empty-state-v2-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  max-width: 300px;
  margin-bottom: var(--space-6);
}

/* ==================== LOADING STATE ==================== */
.loading-state-v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12);
}

.loading-spinner-v2 {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin-v2 0.8s linear infinite;
}

@keyframes spin-v2 {
  to { transform: rotate(360deg); }
}

.loading-text-v2 {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ==================== ERROR STATE ==================== */
.error-state-v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-8);
  background: var(--danger-muted);
  border: 1px solid var(--danger);
  border-radius: var(--radius-lg);
  text-align: center;
}

.error-state-v2-icon {
  font-size: 32px;
  margin-bottom: var(--space-3);
}

.error-state-v2-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--danger);
  margin-bottom: var(--space-2);
}

.error-state-v2-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* ==================== IMPROVED TABLE ==================== */
.table-v2 {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
}

.table-v2 th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.table-v2 td {
  padding: var(--space-4);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.table-v2 tr:hover td {
  background: var(--glass-hover);
}

.table-v2 tr:last-child td {
  border-bottom: none;
}

/* ==================== BADGES ==================== */
.badge-v2 {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  border-radius: var(--radius-full);
}

.badge-v2-success {
  background: var(--success-muted);
  color: var(--success);
}

.badge-v2-danger {
  background: var(--danger-muted);
  color: var(--danger);
}

.badge-v2-warning {
  background: var(--warning-muted);
  color: var(--warning);
}

.badge-v2-info {
  background: var(--info-muted);
  color: var(--info);
}

/* ==================== IMPROVED HEADER ==================== */
.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6);
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  z-index: var(--z-sticky);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* ==================== IMPROVED SIDEBAR ==================== */
@media (min-width: 1025px) {
  .tab-nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    z-index: var(--z-sticky);
  }

  .main-content {
    margin-left: var(--sidebar-width);
    padding-top: var(--header-height);
    min-height: 100vh;
  }
}

/* ==================== IMPROVED TAB CONTENT ==================== */
.tab-content.active {
  display: block;
  padding: var(--space-8);
  max-width: var(--content-max-width);
  margin: 0 auto;
  animation: fadeIn-v2 0.3s var(--ease-out);
}

@keyframes fadeIn-v2 {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==================== MOBILE IMPROVEMENTS ==================== */
@media (max-width: 1024px) {
  .app-header {
    padding: 0 var(--space-4);
  }

  .tab-content.active {
    padding: var(--space-4);
    padding-bottom: 100px;
  }

  .card-v2 {
    padding: var(--space-4);
  }

  .btn-v2 {
    min-height: 44px; /* Tap target */
  }

  .input-v2, .field {
    min-height: 44px;
    font-size: 16px; /* Prevent iOS zoom */
  }
}

@media (max-width: 640px) {
  .page-title {
    font-size: var(--text-xl);
  }

  .section-title {
    font-size: var(--text-base);
  }

  .table-v2 {
    font-size: var(--text-xs);
  }

  .table-v2 th,
  .table-v2 td {
    padding: var(--space-2) var(--space-3);
  }
}

/* ==================== FOCUS STATES (Accessibility) ==================== */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============================================================
   COMPREHENSIVE MOBILE FIXES - Final Pass
   ============================================================ */

/* Small phones (max 380px) */
@media (max-width: 380px) {
  .tab-content.active {
    padding: var(--space-3);
  }

  .panel {
    padding: var(--space-3);
  }

  .panel-title {
    font-size: var(--text-lg);
  }

  .btn {
    padding: 10px 14px;
    font-size: var(--text-sm);
  }

  .btn-lg {
    padding: 12px 18px;
  }
}

/* Medium phones (max 480px) */
@media (max-width: 480px) {
  .header-actions {
    gap: var(--space-2);
  }

  .global-search-trigger {
    padding: var(--space-2);
  }

  .brand-text .name {
    font-size: var(--text-sm);
  }

  .brand-text .sub {
    display: none;
  }

  .row {
    flex-direction: column;
    gap: var(--space-3);
  }

  .col {
    width: 100% !important;
    flex: none !important;
  }

  .actions {
    flex-direction: column;
  }

  .actions .btn {
    width: 100%;
  }

  /* Table improvements for mobile */
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    min-width: 500px;
  }
}

/* Tablet and below (max 768px) */
@media (max-width: 768px) {
  .user-display {
    display: none;
  }

  .settings-menu-btn span:not(.settings-hamburger) {
    display: none;
  }

  /* Improve touch targets */
  .tab-btn {
    min-height: 48px;
    padding: var(--space-3) var(--space-4);
  }

  .nav-category-header {
    min-height: 48px;
  }

  /* Cards grid on tablet */
  .stats-grid,
  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop small (max 1024px) - Sidebar becomes drawer */
@media (max-width: 1024px) {
  /* Improve main content area */
  .main-content {
    margin-left: 0;
    padding-bottom: 80px;
  }

  /* Better panel layout */
  .panel-left,
  .panel-right {
    width: 100%;
    max-width: 100%;
  }

  /* Single column for cards */
  .stats-grid,
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  /* Fix any overflow issues */
  .tab-content.active {
    overflow-x: hidden;
  }
}

/* ============================================================
   ADDITIONAL UI POLISH
   ============================================================ */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Better scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Selection color */
::selection {
  background: var(--accent-muted);
  color: var(--text-primary);
}

/* Improved skeleton loading */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface) 25%,
    var(--surface-hover) 50%,
    var(--surface) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: var(--radius);
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Improved alerts */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius);
  border: 1px solid transparent;
}

.alert-success {
  background: var(--success-muted);
  border-color: var(--success);
  color: var(--success);
}

.alert-danger, .alert-error {
  background: var(--danger-muted);
  border-color: var(--danger);
  color: var(--danger);
}

.alert-warning {
  background: var(--warning-muted);
  border-color: var(--warning);
  color: var(--warning);
}

.alert-info {
  background: var(--info-muted);
  border-color: var(--info);
  color: var(--info);
}

/* Better tooltips */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--text-xs);
  color: var(--text-primary);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-fast);
  z-index: var(--z-tooltip);
  pointer-events: none;
}

[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Improved code blocks */
code, pre, .code-block {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

code {
  padding: 2px 6px;
}

pre {
  padding: var(--space-4);
  overflow-x: auto;
}

/* Card hover state improvements */
.panel:hover,
.card:hover {
  border-color: var(--border-hover);
}

/* Better disabled state */
.disabled,
[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Pulse animation for notifications */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.pulse {
  animation: pulse 2s infinite;
}

/* Fade in animation */
.fade-in {
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Slide up animation */
.slide-up {
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   MOBILE RESPONSIVENESS IMPROVEMENTS
   Added Feb 2026 - Better touch targets, readability, layout
   ============================================================ */

/* Ensure minimum touch target size on mobile */
@media (max-width: 768px) {
  /* Larger touch targets */
  .btn, button, .tab-btn, a.btn, input[type="submit"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* Better form inputs on mobile */
  input, textarea, select {
    font-size: 16px !important; /* Prevents iOS zoom */
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
  }

  /* Improve modal display on mobile */
  .modal-content {
    width: 95vw !important;
    max-height: 90vh;
    margin: 5vh auto;
    overflow-y: auto;
  }

  /* Full-width buttons on mobile */
  .btn-primary, .btn-lg {
    width: 100%;
  }

  /* Better card padding */
  .card, .panel {
    padding: var(--space-4);
  }

  /* Smaller headings */
  h1, .text-h1 { font-size: 24px !important; }
  h2, .text-h2 { font-size: 20px !important; }
  h3, .text-h3 { font-size: 18px !important; }

  /* Hide non-essential elements */
  .hide-mobile, .desktop-only {
    display: none !important;
  }

  /* Horizontal scroll for tables */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Better dropdown menus */
  .dropdown-menu {
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto !important;
    width: 100%;
    max-height: 60vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    animation: slideUpMobile 0.2s ease-out;
  }

  @keyframes slideUpMobile {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
}

/* Small mobile phones */
@media (max-width: 375px) {
  .app-header {
    padding: 0 var(--space-2);
  }

  .brand-text .name {
    font-size: 14px;
  }

  .tab-content.active {
    padding: var(--space-2);
  }
}

/* Landscape mode on mobile */
@media (max-height: 500px) and (orientation: landscape) {
  .app-header {
    height: 48px;
  }

  body {
    padding-top: 48px;
  }

  .modal-content {
    max-height: 95vh;
  }
}

/* Print styles */
@media print {
  .app-header, .tab-nav, .mobile-menu-toggle, .sidebar-overlay,
  .btn, button, .no-print {
    display: none !important;
  }

  body {
    padding: 0;
    background: white;
    color: black;
  }

  .main-wrap {
    margin-left: 0 !important;
  }

  .tab-content.active {
    padding: 20px;
  }

  .card, .panel {
    border: 1px solid #ddd;
    box-shadow: none;
    page-break-inside: avoid;
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --border: rgba(255, 255, 255, 0.3);
    --text-muted: rgba(255, 255, 255, 0.8);
  }

  .btn, button {
    border-width: 2px;
  }
}

/* Focus visibility for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Skip to content link for accessibility */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--accent);
  color: white;
  padding: 8px 16px;
  z-index: 1000;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 0;
}

/* Better scrollbar for touch devices */
@media (pointer: coarse) {
  ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  /* Smoother scrolling */
  * {
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================================
   TASK MANAGER IMPROVEMENTS - TimBot 2026-02-09
   ============================================================ */

/* Improved Add Task Button */
#addTaskBtn {
	background: linear-gradient(135deg, var(--accent), var(--accent-hover)) !important;
	color: white !important;
	font-weight: 600 !important;
	padding: 10px 20px !important;
	border-radius: var(--radius-sm) !important;
	box-shadow: 0 4px 12px var(--accent-glow) !important;
	transition: all var(--transition-fast) !important;
}

#addTaskBtn:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 20px var(--accent-glow), 0 0 0 3px rgba(108, 140, 255, 0.2) !important;
}

#addTaskBtn::before {
	content: '+ ' !important;
	font-weight: 700 !important;
}

/* Status Column Headers with Colors */
.tm-column-header[data-status="backlog"],
.tm-column[data-status="backlog"] .tm-column-header {
	border-left: 4px solid #6b7394;
}

.tm-column-header[data-status="todo"],
.tm-column[data-status="todo"] .tm-column-header {
	border-left: 4px solid #3b82f6;
}

.tm-column-header[data-status="in-progress"],
.tm-column[data-status="in-progress"] .tm-column-header {
	border-left: 4px solid #f59e0b;
}

.tm-column-header[data-status="done"],
.tm-column[data-status="done"] .tm-column-header {
	border-left: 4px solid #22c55e;
}

/* Improved Empty State */
.tm-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
	text-align: center;
	background: var(--glass);
	border: 2px dashed var(--border);
	border-radius: var(--radius-lg);
	margin: 20px;
}

.tm-empty-state-icon {
	font-size: 64px;
	margin-bottom: 20px;
	opacity: 0.5;
}

.tm-empty-state-title {
	font-size: 24px;
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: 10px;
}

.tm-empty-state-desc {
	font-size: 14px;
	color: var(--text-muted);
	margin-bottom: 24px;
	max-width: 300px;
}

.tm-empty-state-btn {
	background: linear-gradient(135deg, var(--accent), var(--accent-hover));
	color: white;
	padding: 12px 28px;
	border-radius: var(--radius-sm);
	font-weight: 600;
	border: none;
	cursor: pointer;
	transition: all var(--transition-fast);
	box-shadow: 0 4px 12px var(--accent-glow);
}

.tm-empty-state-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px var(--accent-glow);
}

/* Task Card Status Indicator */
.task-card[data-priority="low"]::before {
	background: #64748b;
}

.task-card[data-priority="medium"]::before {
	background: #3b82f6;
}

.task-card[data-priority="high"]::before {
	background: #f97316;
}

.task-card[data-priority="urgent"]::before {
	background: #ef4444;
	animation: pulse-bar 1.5s ease-in-out infinite;
}

@keyframes pulse-bar {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

/* Improved Modal Styling */
#taskEditModal .modal-content {
	background: var(--surface);
	border: 1px solid var(--border-strong);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

#taskEditModal .modal-header {
	background: linear-gradient(135deg, var(--surface-elevated), var(--surface));
	border-bottom: 1px solid var(--border);
}

#taskEditModal .form-group label {
	font-weight: 600;
	color: var(--text-secondary);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 6px;
}

/* Guest Mode Banner */
.guest-mode-banner {
	background: linear-gradient(135deg, var(--warning-muted), rgba(245, 158, 11, 0.1));
	border: 1px solid rgba(245, 158, 11, 0.3);
	border-radius: var(--radius-sm);
	padding: 12px 16px;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--warning);
}

.guest-mode-banner-icon {
	font-size: 18px;
}

.guest-mode-banner a {
	color: var(--accent);
	font-weight: 600;
	text-decoration: underline;
}

/* Mobile Improvements */
@media (max-width: 768px) {
	#addTaskBtn {
		position: fixed !important;
		bottom: 20px !important;
		right: 20px !important;
		z-index: 100 !important;
		width: 56px !important;
		height: 56px !important;
		border-radius: 50% !important;
		padding: 0 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		font-size: 24px !important;
		box-shadow: 0 4px 20px var(--accent-glow), 0 8px 32px rgba(0, 0, 0, 0.3) !important;
	}

	#addTaskBtn::before {
		content: '+' !important;
		font-size: 28px !important;
	}

	#addTaskBtn span {
		display: none !important;
	}

	.task-card {
		padding: var(--space-sm);
	}

	.task-card-title {
		font-size: 13px;
	}
}

/* ============================================================
   TASK MANAGER FIX - Overflow issues (TimBot 2026-02-09)
   ============================================================ */

/* Override overflow:hidden for task manager tab */
#task-manager-tab,
#task-manager-tab.active,
.tab-content:has(#task-manager-tab),
.tab-content:has(.task-manager-container) {
	overflow: visible !important;
	overflow-x: visible !important;
}

/* Ensure task manager container doesn't clip children */
.task-manager-container {
	overflow: visible !important;
}

/* Ensure task manager layout doesn't clip */
.task-manager-layout {
	overflow: visible !important;
}

/* Fix the header to always be visible */
.task-manager-header {
	position: relative !important;
	z-index: 100 !important;
	overflow: visible !important;
}

/* Fix actions row */
.task-manager-actions {
	overflow: visible !important;
	flex-wrap: wrap !important;
}

/* Fix view toggle buttons */
.view-toggle {
	overflow: visible !important;
	flex-shrink: 0 !important;
}

/* Ensure buttons don't get cut */
.task-manager-actions .btn {
	flex-shrink: 0 !important;
	white-space: nowrap !important;
}

/* Mobile specific fixes */
@media (max-width: 768px) {
	.task-manager-header {
		padding: var(--space-md) !important;
		gap: var(--space-sm) !important;
	}

	.task-manager-actions {
		width: 100% !important;
		justify-content: flex-start !important;
		gap: var(--space-xs) !important;
	}

	.task-manager-actions .btn {
		padding: 6px 10px !important;
		font-size: 12px !important;
	}

	.view-toggle {
		order: -1 !important;
		width: 100% !important;
		justify-content: center !important;
	}

	.view-toggle-btn {
		flex: 1 !important;
		padding: 8px 12px !important;
		font-size: 12px !important;
	}
}

/* ============================================================
   GEOGRID BUSINESS SEARCH AUTOCOMPLETE
   ============================================================ */

/* Autocomplete Container */
#geoGridBusinessSuggestions,
#geoGridAddressSuggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--card-bg, #1a1a2e);
  border: 1px solid var(--border-color, rgba(255,255,255,0.1));
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.05);
  max-height: 350px;
  overflow-y: auto;
  margin-top: 4px;
  display: none;
}

/* RTL Support */
.geogrid-autocomplete-dropdown.rtl {
  direction: rtl;
  text-align: right;
}

/* Dropdown Container */
.geogrid-autocomplete-dropdown {
  padding: 6px 0;
}

/* Single Item */
.geogrid-autocomplete-item {
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.geogrid-autocomplete-item:last-child {
  border-bottom: none;
}

.geogrid-autocomplete-item:hover,
.geogrid-autocomplete-item.active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.1));
}

.geogrid-autocomplete-item.active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(139, 92, 246, 0.15));
}

.geogrid-autocomplete-item-main {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.geogrid-autocomplete-icon {
  font-size: 18px;
  flex-shrink: 0;
  opacity: 0.8;
}

.geogrid-autocomplete-name {
  font-weight: 600;
  color: var(--text-primary, #fff);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 15px;
}

.geogrid-autocomplete-type {
  font-size: 11px;
  padding: 3px 10px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.15));
  color: var(--accent, #8b5cf6);
  border-radius: 20px;
  white-space: nowrap;
  font-weight: 500;
}

.geogrid-autocomplete-secondary {
  font-size: 13px;
  color: var(--text-secondary, #888);
  padding-left: 28px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.8;
}

.geogrid-autocomplete-dropdown.rtl .geogrid-autocomplete-secondary {
  padding-left: 0;
  padding-right: 28px;
}

/* Loading State */
.geogrid-autocomplete-loading {
  padding: 20px;
  text-align: center;
  color: var(--text-secondary, #888);
  font-size: 14px;
}

/* Empty State */
.geogrid-autocomplete-empty {
  padding: 20px;
  text-align: center;
  color: var(--text-secondary, #888);
  font-size: 14px;
}

/* Success/Error States */
.field-success {
  color: #10b981 !important;
  font-size: 13px;
  margin-top: 6px;
  font-weight: 500;
}

/* Input loading state */
#geoGridBusiness.loading {
  background-image: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.1), transparent);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Form Group Position for dropdown */
.local-seo-card .form-group {
  position: relative;
}

/* Mobile Responsive */
@media (max-width: 480px) {
  #geoGridBusinessSuggestions {
    position: fixed;
    left: 12px;
    right: 12px;
    top: auto;
    bottom: 0;
    max-height: 50vh;
    border-radius: 16px 16px 0 0;
    margin-top: 0;
    border-bottom: none;
  }

  .geogrid-autocomplete-item {
    padding: 14px 16px;
  }

  .geogrid-autocomplete-name {
    font-size: 16px;
  }

  .geogrid-autocomplete-secondary {
    font-size: 14px;
  }
}

/* Scrollbar styling for dropdown */
#geoGridBusinessSuggestions::-webkit-scrollbar {
  width: 6px;
}

#geoGridBusinessSuggestions::-webkit-scrollbar-track {
  background: transparent;
}

#geoGridBusinessSuggestions::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.3);
  border-radius: 3px;
}

#geoGridBusinessSuggestions::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.5);
}

/* ============================================================
   GEOGRID SELECTED BUSINESS CARD
   ============================================================ */

.geogrid-selected-business {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.05));
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.selected-business-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(16, 185, 129, 0.2);
}

.selected-business-icon {
  font-size: 20px;
}

.selected-business-title {
  flex: 1;
  font-weight: 600;
  color: #10b981;
  font-size: 14px;
}

.selected-business-body {
  direction: rtl;
  text-align: right;
}

.selected-business-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary, #fff);
  margin-bottom: 4px;
}

.selected-business-address {
  font-size: 14px;
  color: var(--text-secondary, #888);
  margin-bottom: 10px;
}

.selected-business-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
  direction: ltr;
}

.meta-badge {
  font-size: 12px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  color: var(--text-secondary, #aaa);
}

.meta-badge.type {
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
}

.meta-badge.rating {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

.selected-business-coords {
  font-size: 12px;
  color: var(--text-muted, #666);
  font-family: monospace;
  direction: ltr;
}

/* ============================================================
   GEOGRID CONFIG INFO
   ============================================================ */

.geogrid-config-info {
  display: flex;
  gap: 16px;
  padding: 12px 16px;
  background: rgba(99, 102, 241, 0.08);
  border-radius: 8px;
  margin-bottom: 16px;
}

.config-info-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.config-label {
  color: var(--text-secondary, #888);
}

.config-value {
  font-weight: 600;
  color: var(--accent, #8b5cf6);
}

/* ============================================================
   GEOGRID VALIDATION ERROR BOX
   ============================================================ */

.geogrid-validation-error {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 12px;
  margin-bottom: 16px;
}

.validation-error-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.validation-error-text {
  color: #fca5a5;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-line;
  direction: rtl;
  text-align: right;
}

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */

.geogrid-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 14px 20px;
  background: #1a1a2e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 10000;
  animation: slideInRight 0.3s ease;
  max-width: 350px;
  direction: rtl;
}

.geogrid-toast.success {
  border-color: rgba(16, 185, 129, 0.4);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), #1a1a2e);
}

.geogrid-toast.error {
  border-color: rgba(239, 68, 68, 0.4);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), #1a1a2e);
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* RTL support for form */
#geoGridBusinessForm {
  direction: rtl;
  text-align: right;
}

#geoGridBusinessForm .field {
  text-align: right;
}

#geoGridBusinessForm .field-hint {
  text-align: right;
  direction: rtl;
}

/* Mobile responsive */
@media (max-width: 480px) {
  .geogrid-config-info {
    flex-direction: column;
    gap: 8px;
  }

  .selected-business-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .geogrid-toast {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
  }
}

/* ============================================================
   MOBILE UX IMPROVEMENTS - Comprehensive Update
   ============================================================ */

/* === MOBILE NAVIGATION === */
@media (max-width: 768px) {
  /* Better mobile sidebar */
  .tab-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 85% !important;
    max-width: 320px !important;
    background: var(--surface) !important;
    z-index: 99998 !important;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    overflow-y: auto !important;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
  }

  .tab-nav.open {
    transform: translateX(0);
  }

  /* Mobile menu header */
  .mobile-menu-close {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    color: white;
    font-weight: 600;
    font-size: 16px;
    border: none;
    cursor: pointer;
    position: sticky;
    top: 0;
    z-index: 10;
  }

  /* Tab buttons in mobile */
  .tab-nav .tab-btn {
    padding: 14px 20px !important;
    font-size: 15px !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--border);
    margin: 0 !important;
    text-align: right;
    direction: rtl;
  }

  .tab-nav .tab-btn:active {
    background: var(--accent-soft);
  }

  .tab-nav .tab-btn .tab-icon {
    font-size: 20px;
    margin-left: 12px;
    margin-right: 0;
  }

  /* Sidebar overlay */
  #sidebarOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99997;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
  }

  #sidebarOverlay.visible {
    opacity: 1;
    visibility: visible;
  }

  /* Mobile menu toggle button */
  .mobile-menu-toggle {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text);
  }

  .mobile-menu-toggle .hamburger-icon {
    font-size: 18px;
  }
}

/* === TOUCH-FRIENDLY BUTTONS === */
@media (max-width: 768px) {
  .btn {
    min-height: 44px;
    padding: 12px 16px;
    font-size: 14px;
  }

  .btn-sm {
    min-height: 36px;
    padding: 8px 12px;
    font-size: 13px;
  }

  .btn-full {
    width: 100%;
  }

  /* Better button spacing */
  .btn + .btn {
    margin-left: 8px;
  }
}

/* === FORM IMPROVEMENTS === */
@media (max-width: 768px) {
  .form-group {
    margin-bottom: 16px;
  }

  .field,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="url"],
  input[type="number"],
  select,
  textarea {
    min-height: 48px !important;
    padding: 12px 14px !important;
    font-size: 16px !important; /* Prevents iOS zoom */
    border-radius: 10px !important;
  }

  .field-label {
    font-size: 13px;
    margin-bottom: 6px;
  }

  /* Two column forms → single column */
  .form-row-2,
  .row,
  .form-row {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .form-row-2 > .form-group,
  .row > .col,
  .form-row > * {
    width: 100% !important;
    flex: none !important;
  }
}

/* === CARDS ON MOBILE === */
@media (max-width: 768px) {
  .card,
  .local-seo-card,
  .panel {
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
  }

  .card-header,
  .panel-header {
    padding: 12px 16px;
  }

  .card-body,
  .panel-body {
    padding: 16px;
  }

  /* Stack cards vertically */
  .local-seo-grid,
  .cards-grid,
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* === MODALS ON MOBILE === */
@media (max-width: 768px) {
  .modal {
    padding: 0 !important;
    align-items: flex-end !important;
  }

  .modal-content {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 90vh !important;
    border-radius: 20px 20px 0 0 !important;
    margin: 0 !important;
  }

  .modal-header {
    padding: 16px 20px;
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 10;
  }

  .modal-header h2 {
    font-size: 18px;
  }

  .modal-body {
    padding: 16px 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal-footer {
    padding: 12px 20px 20px;
    position: sticky;
    bottom: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    display: flex;
    gap: 10px;
  }

  .modal-footer .btn {
    flex: 1;
  }

  .modal-close {
    width: 44px;
    height: 44px;
    font-size: 24px;
  }
}

/* === TASK MANAGER MOBILE === */
@media (max-width: 768px) {
  .task-manager-container {
    padding: 12px !important;
  }

  .task-manager-header {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 12px !important;
  }

  .task-manager-actions {
    width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  .view-toggle {
    width: 100%;
    justify-content: center;
  }

  /* Kanban board horizontal scroll */
  .kanban-board {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .kanban-column {
    min-width: 280px;
    flex-shrink: 0;
    scroll-snap-align: start;
  }

  /* Task cards */
  .task-card {
    padding: 14px;
  }

  /* Floating Add Task button */
  .tm-mobile-fab {
    position: fixed !important;
    bottom: 80px;
    right: 16px;
    width: 56px;
    height: 56px;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover)) !important;
    color: white !important;
    font-size: 28px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
    z-index: 1000;
    border: none;
  }
}

/* === GEOGRID MOBILE === */
@media (max-width: 768px) {
  .geogrid-selected-business {
    padding: 12px;
  }

  .selected-business-name {
    font-size: 16px;
  }

  .geogrid-config-info {
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px;
  }

  /* Autocomplete dropdown on mobile */
  #geoGridBusinessSuggestions {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    max-height: 50vh !important;
    border-radius: 16px 16px 0 0 !important;
    z-index: 99999 !important;
  }

  .geogrid-autocomplete-item {
    padding: 14px 16px;
  }
}

/* === LOCAL SEO TAB MOBILE === */
@media (max-width: 768px) {
  .local-seo-page {
    padding: 12px;
  }

  .local-seo-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    gap: 6px;
  }

  .local-seo-nav-btn {
    white-space: nowrap;
    padding: 10px 14px;
    font-size: 13px;
    flex-shrink: 0;
  }
}

/* === TABLES ON MOBILE === */
@media (max-width: 768px) {
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;
    padding: 0 16px;
  }

  table {
    min-width: 600px;
  }

  th, td {
    padding: 10px 12px;
    font-size: 13px;
  }
}

/* === HEADER ON MOBILE === */
@media (max-width: 520px) {
  .app-header {
    padding: 8px 12px !important;
    gap: 8px;
  }

  .brand {
    flex: 1;
    min-width: 0;
  }

  .brand-text {
    display: none !important;
  }

  .logo {
    width: 32px;
    height: 32px;
  }

  .header-actions {
    gap: 4px;
  }

  .header-actions .btn {
    padding: 6px 8px;
    font-size: 12px;
  }

  /* Hide less important header buttons */
  .header-actions .btn:not(.btn-primary):not(#userMenuBtn) {
    display: none;
  }
}

/* === BOTTOM NAVIGATION BAR (Mobile) === */
@media (max-width: 768px) {
  /* Add padding at bottom for the version banner */
  .tab-content {
    padding-bottom: 60px !important;
  }

  /* Version banner mobile */
  #timbot-version-banner {
    font-size: 11px !important;
    padding: 6px 12px !important;
  }

  #timbot-version-banner button {
    padding: 3px 8px !important;
    font-size: 11px !important;
  }
}

/* === TOAST NOTIFICATIONS MOBILE === */
@media (max-width: 768px) {
  .toast,
  .geogrid-toast {
    left: 12px !important;
    right: 12px !important;
    bottom: 70px !important;
    max-width: none !important;
  }
}

/* === PREVENT iOS ZOOM ON INPUT FOCUS === */
@media (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* === SAFE AREA INSETS (iPhone X+) === */
@supports (padding: max(0px)) {
  @media (max-width: 768px) {
    .app-header {
      padding-top: max(8px, env(safe-area-inset-top));
    }

    .modal-content {
      padding-bottom: max(20px, env(safe-area-inset-bottom));
    }

    #timbot-version-banner {
      padding-bottom: max(8px, env(safe-area-inset-bottom));
    }
  }
}

/* === IMPROVE TAP HIGHLIGHTING === */
@media (max-width: 768px) {
  .btn,
  .tab-btn,
  .task-card,
  .kanban-card,
  .geogrid-autocomplete-item,
  .local-seo-nav-btn {
    -webkit-tap-highlight-color: rgba(99, 102, 241, 0.2);
  }
}

/* === SCROLLBAR HIDING ON MOBILE === */
@media (max-width: 768px) {
  .local-seo-nav::-webkit-scrollbar,
  .kanban-board::-webkit-scrollbar {
    display: none;
  }

  .local-seo-nav,
  .kanban-board {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

/* === MOBILE FAB VISIBILITY === */
.tm-mobile-fab {
  display: none;
}

@media (max-width: 768px) {
  /* Hide regular add task button on mobile */
  #addTaskBtn.add-task-btn {
    display: none !important;
  }

  /* Show mobile FAB */
  .tm-mobile-fab {
    display: flex !important;
  }
}

/* === MOBILE SIDEBAR IMPROVEMENTS === */
@media (max-width: 768px) {
  .tm-sidebar {
    position: fixed !important;
    left: 0;
    top: 0;
    bottom: 0;
    width: 280px;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    background: var(--surface);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
  }

  .tm-sidebar.active {
    transform: translateX(0);
  }

  .tm-mobile-menu {
    display: flex !important;
  }

  .tm-main {
    margin-left: 0 !important;
  }
}

@media (min-width: 769px) {
  .tm-mobile-menu {
    display: none !important;
  }

  .tm-mobile-fab {
    display: none !important;
  }
}

/* ============================================================
   CSS PERFORMANCE OPTIMIZATIONS
   ============================================================ */

/* Reduce paint areas with containment */
.card,
.panel,
.modal-content,
.task-card,
.kanban-column {
  contain: layout style;
}

/* Hardware acceleration for animations */
.btn,
.tab-btn,
.modal,
.toast,
.kanban-card {
  will-change: transform;
}

/* Optimize font rendering */
body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Reduce specificity issues - consolidated resets */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Smooth scrolling with reduced motion support */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --border: rgba(255, 255, 255, 0.3);
    --border-strong: rgba(255, 255, 255, 0.5);
  }

  .btn,
  .field,
  .card {
    border-width: 2px;
  }
}

/* Dark mode is default, but ensure light mode works */
@media (prefers-color-scheme: light) {
  /* Can add light mode overrides here if needed */
}

/* Print styles */
@media print {
  .tab-nav,
  .app-header,
  .modal,
  .toast,
  .btn,
  #timbot-version-banner {
    display: none !important;
  }

  .tab-content {
    display: block !important;
    padding: 0 !important;
  }

  body {
    background: white;
    color: black;
  }
}

/* ============================================================
   DOWNLOAD DESKTOP APP
   ============================================================ */

/* Download button in header */
.btn-download-app {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  border: none !important;
  color: white !important;
  gap: 6px;
  font-weight: 600;
  padding: 8px 14px;
}

.btn-download-app:hover {
  background: linear-gradient(135deg, #059669, #047857) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-download-app svg {
  stroke: white;
}

@media (max-width: 768px) {
  .btn-download-app .download-text {
    display: none;
  }
  .btn-download-app {
    padding: 8px 10px;
  }
}

/* Download Modal */
.download-modal-content {
  max-width: 500px;
}

.download-hero {
  text-align: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}

.download-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.download-hero h3 {
  font-size: 24px;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.download-hero p {
  color: var(--text-secondary);
}

.download-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.download-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
}

.download-option:hover {
  border-color: var(--accent);
  background: rgba(99, 102, 241, 0.1);
  transform: translateX(4px);
}

.download-option-icon {
  font-size: 32px;
  flex-shrink: 0;
}

.download-option-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.download-option-info strong {
  font-size: 16px;
  color: var(--text-primary);
}

.download-option-info span {
  font-size: 13px;
  color: var(--text-secondary);
}

.download-size {
  color: var(--text-muted) !important;
  font-size: 12px !important;
}

.download-btn {
  padding: 8px 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: white;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}

.download-requirements {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  padding: 16px;
}

.download-requirements h4 {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.download-requirements ul {
  margin: 0;
  padding-left: 20px;
}

.download-requirements li {
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 4px;
}