/* === PDF Coder — Slate Design System === */

/* ---------- Dark theme (default) ---------- */
:root {
	--red-50: #fdf2f2;
	--red-100: #fce4e4;
	--red-200: #f9b4b4;
	--red-300: #f17a7a;
	--red-400: #e84e4e;
	--red-500: #dc3b3b;
	--red-600: #b82d2d;
	--red-700: #921f1f;
	--red-800: #6e1919;
	--red-900: #3b0e0e;

	--slate-0: #ffffff;
	--slate-50: #f8f8f9;
	--slate-100: #eeeef0;
	--slate-200: #dcdce0;
	--slate-300: #b5b5bd;
	--slate-400: #8e8e99;
	--slate-500: #6c6c78;
	--slate-600: #52525e;
	--slate-700: #3b3b45;
	--slate-800: #27272f;
	--slate-900: #18181d;
	--slate-950: #0e0e12;

	--color-primary: var(--red-400);
	--color-primary-hover: var(--red-500);
	--color-primary-subtle: var(--red-50);
	--bg-page: var(--slate-950);
	--bg-surface: var(--slate-900);
	--bg-elevated: var(--slate-800);
	--bg-input: var(--slate-800);
	--border-color: var(--slate-700);
	--border-subtle: rgba(255, 255, 255, 0.06);
	--text-primary: var(--slate-50);
	--text-secondary: var(--slate-300);
	--text-muted: var(--slate-300);
	--text-inverse: var(--slate-0);

	--color-success: #34d072;
	--color-success-dim: rgba(52, 208, 114, 0.14);
	--color-warning: #f0c030;
	--color-warning-dim: rgba(240, 192, 48, 0.14);
	--color-info: #5b9cf6;
	--color-info-dim: rgba(91, 156, 246, 0.14);
	--color-danger: var(--red-400);
	--color-danger-dim: rgba(232, 78, 78, 0.14);

	--font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-mono: 'IBM Plex Mono', 'Fira Code', monospace;
	--text-xs: 0.8125rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.3125rem;
	--text-2xl: 1.625rem;
	--text-3xl: 2.125rem;
	--text-4xl: 2.625rem;
	--text-5xl: 3.375rem;
	--line-tight: 1.2;
	--line-normal: 1.55;

	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.25rem;
	--sp-6: 1.5rem;
	--sp-8: 2rem;
	--sp-10: 2.5rem;
	--sp-12: 3rem;
	--sp-16: 4rem;
	--sp-20: 5rem;
	--sp-24: 6rem;

	--r-xs: 4px;
	--r-sm: 6px;
	--r-md: 8px;
	--r-lg: 12px;
	--r-xl: 16px;
	--r-full: 9999px;

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
	--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
	--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
	--shadow-glow: 0 0 20px rgba(232, 78, 78, 0.2);

	--transition-fast: 120ms ease;
	--transition-base: 200ms ease;
	--container-max: 1160px;
	--header-h: 56px;
	--sidebar-w: 240px;

	--header-bg: rgba(14, 14, 18, 0.85);
	--modal-bg: rgba(0, 0, 0, 0.6);

	--selection-bg: var(--red-500);
	--selection-fg: white;
}

/* ---------- Light theme ---------- */
[data-theme="light"] {
	--color-primary: var(--red-500);
	--color-primary-hover: var(--red-600);
	--color-primary-subtle: var(--red-50);

	--bg-page: var(--slate-50);
	--bg-surface: var(--slate-0);
	--bg-elevated: var(--slate-100);
	--bg-input: var(--slate-0);
	--border-color: var(--slate-200);
	--border-subtle: rgba(0, 0, 0, 0.05);
	--text-primary: var(--slate-900);
	--text-secondary: var(--slate-600);
	--text-muted: var(--slate-600);
	--text-inverse: var(--slate-0);

	--color-success: #16a34a;
	--color-success-dim: rgba(22, 163, 74, 0.1);
	--color-warning: #ca8a04;
	--color-warning-dim: rgba(202, 138, 4, 0.1);
	--color-info: #2563eb;
	--color-info-dim: rgba(37, 99, 235, 0.1);
	--color-danger: var(--red-500);
	--color-danger-dim: rgba(220, 59, 59, 0.08);

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
	--shadow-glow: 0 0 16px rgba(220, 59, 59, 0.12);

	--header-bg: rgba(255, 255, 255, 0.88);
	--modal-bg: rgba(0, 0, 0, 0.3);

	--selection-bg: var(--red-100);
	--selection-fg: var(--red-700);
}


/* === Fonts === */
/* latin-ext */
@font-face {
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(https://www.pdfcoder.com/a/f/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu6-K6z9mXgjU0.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(https://www.pdfcoder.com/a/f/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K6z9mXg.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(https://www.pdfcoder.com/a/f/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu6-K6z9mXgjU0.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(https://www.pdfcoder.com/a/f/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K6z9mXg.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(https://www.pdfcoder.com/a/f/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu6-K6z9mXgjU0.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(https://www.pdfcoder.com/a/f/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K6z9mXg.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(https://www.pdfcoder.com/a/f/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu6-K6z9mXgjU0.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(https://www.pdfcoder.com/a/f/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K6z9mXg.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* === Reset === */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 16px;
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: var(--line-normal);
	color: var(--text-primary);
	background: var(--bg-page);
	-webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; border: none; background: none; }
button { cursor: pointer; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { line-height: var(--line-tight); font-weight: 600; }
table { border-collapse: collapse; width: 100%; }

::selection {
	background: var(--selection-bg);
	color: var(--selection-fg);
}

.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); border: 0;
}


/* === Layout === */

.container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--sp-6);
}

/* Header */
.header {
	position: sticky;
	top: 0;
	z-index: 100;
	height: var(--header-h);
	background: var(--header-bg);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--border-subtle);
}
.header .container {
	display: flex;
	align-items: center;
	height: 100%;
	gap: var(--sp-6);
}

.logo {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--text-base);
	font-weight: 700;
	letter-spacing: -0.01em;
	flex-shrink: 0;
}
.logo-icon {
	width: 24px;
	height: 24px;
	background: var(--color-primary);
	border-radius: var(--r-xs);
	display: flex;
	align-items: center;
	justify-content: center;
}
.logo-icon svg {
	width: 14px;
	height: 14px;
	color: white;
}

.nav {
	display: flex;
	align-items: center;
	gap: 0;
}
.nav-link {
	padding: 6px 12px;
	font-size: var(--text-sm);
	color: var(--text-secondary);
	border-radius: var(--r-sm);
	transition: all var(--transition-fast);
}
.nav-link:hover {
	color: var(--text-primary);
}

.header-right {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin-left: auto;
}

.menu-btn {
	display: none;
	width: 32px; height: 32px;
	align-items: center; justify-content: center;
}

/* Footer */
.footer {
	border-top: 1px solid var(--border-color);
	padding: var(--sp-12) 0 var(--sp-8);
}
.footer-cols {
	display: grid;
	grid-template-columns: 1.5fr repeat(3, 1fr);
	gap: var(--sp-8);
}
.footer-brand p {
	font-size: var(--text-sm);
	color: var(--text-muted);
	margin-top: var(--sp-2);
	max-width: 260px;
}
.footer-col h4 {
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: var(--sp-3);
}
.footer-col a {
	display: block;
	font-size: var(--text-sm);
	color: var(--text-muted);
	padding: 3px 0;
	transition: color var(--transition-fast);
}
.footer-col a:hover { color: var(--text-primary); }
.footer-bar {
	margin-top: var(--sp-8);
	padding-top: var(--sp-5);
	border-top: 1px solid var(--border-color);
	display: flex;
	justify-content: space-between;
	font-size: var(--text-xs);
	color: var(--text-muted);
}

/* Section */
.section {
	padding: var(--sp-20) 0;
}

/* Grid helpers */
.g2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }

/* Dashboard layout */
.app-shell {
	display: grid;
	grid-template-columns: var(--sidebar-w) 1fr;
	min-height: calc(100vh - var(--header-h));
}

.sidebar {
	border-right: 1px solid var(--border-color);
	padding: var(--sp-4);
	background: var(--bg-surface);
	position: sticky;
	top: var(--header-h);
	height: calc(100vh - var(--header-h));
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}
.sidebar-nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.sidebar-link {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: 7px 10px;
	font-size: var(--text-sm);
	color: var(--text-secondary);
	border-radius: var(--r-sm);
	transition: all var(--transition-fast);
}
.sidebar-link:hover {
	background: var(--bg-elevated);
	color: var(--text-primary);
}
.sidebar-link.active {
	background: var(--color-danger-dim);
	color: var(--color-primary);
}
.sidebar-link svg {
	width: 16px; height: 16px; flex-shrink: 0;
	opacity: 0.7;
}
.sidebar-link.active svg { opacity: 1; }
.sidebar-label {
	padding: var(--sp-4) 10px var(--sp-1);
	font-size: 11px;
	font-weight: 600;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.main-area {
	padding: var(--sp-6);
	overflow-y: auto;
}
.main-inner {
	max-width: 900px;
}

main {
	min-height: calc(100vh - var(--header-h));
}

/* Mobile nav open */
.nav.mobile-open {
	display: flex;
	flex-direction: column;
	position: absolute;
	top: var(--header-h);
	left: 0;
	right: 0;
	background: var(--bg-surface);
	padding: var(--sp-4);
	border-bottom: 1px solid var(--border-color);
	z-index: 99;
}


/* === Components === */

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	padding: 8px 16px;
	font-size: var(--text-sm);
	font-weight: 500;
	border-radius: var(--r-md);
	transition: all var(--transition-fast);
	white-space: nowrap;
}

.btn-primary {
	background: var(--color-primary);
	color: white;
}
.btn-primary:hover {
	background: var(--color-primary-hover);
	box-shadow: var(--shadow-glow);
}

.btn-surface {
	background: var(--bg-elevated);
	color: var(--text-primary);
	border: 1px solid var(--border-color);
}
.btn-surface:hover {
	background: var(--slate-700);
	border-color: var(--slate-600);
}

.btn-ghost {
	color: var(--text-secondary);
}
.btn-ghost:hover {
	color: var(--text-primary);
	background: var(--bg-elevated);
}

.btn-lg {
	padding: 12px 24px;
	font-size: var(--text-base);
}

.btn-sm {
	padding: 5px 12px;
	font-size: var(--text-xs);
}

.btn-icon {
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: var(--r-sm);
}

/* Cards */
.card {
	background: var(--bg-surface);
	border: 1px solid var(--border-color);
	border-radius: var(--r-lg);
	padding: var(--sp-5);
}
.card-flat {
	background: var(--bg-elevated);
	border: none;
	border-radius: var(--r-md);
	padding: var(--sp-4);
}

/* Badges */
.tag {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	font-size: 12px;
	font-weight: 600;
	border-radius: var(--r-full);
	letter-spacing: 0.02em;
}
.tag-green {
	background: var(--color-success-dim);
	color: var(--color-success);
}
.tag-blue {
	background: var(--color-info-dim);
	color: var(--color-info);
}
.tag-red {
	background: var(--color-danger-dim);
	color: var(--color-danger);
}
.tag-yellow {
	background: var(--color-warning-dim);
	color: var(--color-warning);
}
.tag-neutral {
	background: rgba(255,255,255,0.06);
	color: var(--text-secondary);
}

/* Inputs */
.input {
	width: 100%;
	padding: 9px 12px;
	font-size: var(--text-sm);
	background: var(--bg-input);
	border: 1px solid var(--border-color);
	border-radius: var(--r-md);
	color: var(--text-primary);
	transition: border-color var(--transition-fast);
}
.input:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 2px var(--color-danger-dim);
}
.input::placeholder {
	color: var(--text-muted);
}

.field {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
}
.field label {
	font-size: var(--text-xs);
	font-weight: 500;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Dropzone */
.dropzone {
	border: 1.5px dashed var(--slate-600);
	border-radius: var(--r-lg);
	padding: var(--sp-10) var(--sp-6);
	text-align: center;
	cursor: pointer;
	transition: all var(--transition-fast);
	background: rgba(255, 255, 255, 0.02);
}
.dropzone:hover,
.dropzone.drag-over {
	border-color: var(--color-primary);
	background: var(--color-danger-dim);
}
.dropzone-icon {
	margin: 0 auto var(--sp-3);
	color: var(--text-muted);
}
.dropzone-text {
	font-size: var(--text-sm);
	color: var(--text-secondary);
}
.dropzone-text strong {
	color: var(--color-primary);
}

/* Progress */
.progress-bar {
	height: 4px;
	background: var(--bg-elevated);
	border-radius: var(--r-full);
	overflow: hidden;
}
.progress-bar-fill {
	height: 100%;
	background: var(--color-primary);
	border-radius: var(--r-full);
	transition: width var(--transition-base);
}

/* Toggle */
.toggle {
	position: relative;
	width: 38px;
	height: 20px;
	background: var(--slate-600);
	border-radius: var(--r-full);
	cursor: pointer;
	transition: background var(--transition-fast);
	flex-shrink: 0;
}
.toggle.active { background: var(--color-primary); }
.toggle::after {
	content: '';
	position: absolute;
	top: 2px; left: 2px;
	width: 16px; height: 16px;
	background: white;
	border-radius: 50%;
	transition: transform var(--transition-fast);
}
.toggle.active::after { transform: translateX(18px); }

/* Avatar */
.avatar {
	width: 28px; height: 28px;
	border-radius: var(--r-full);
	background: var(--red-700);
	color: var(--red-100);
	display: flex; align-items: center; justify-content: center;
	font-size: 12px; font-weight: 700;
}

/* Divider */
.hr {
	height: 1px;
	background: var(--border-color);
	border: none;
}

/* Tabs */
.tabs {
	display: flex;
	gap: var(--sp-1);
	background: var(--bg-elevated);
	padding: 3px;
	border-radius: var(--r-md);
	width: fit-content;
}
.tab {
	padding: 6px 14px;
	font-size: var(--text-xs);
	font-weight: 500;
	color: var(--text-secondary);
	border-radius: var(--r-sm);
	cursor: pointer;
	transition: all var(--transition-fast);
}
.tab:hover { color: var(--text-primary); }
.tab.active {
	background: var(--bg-surface);
	color: var(--text-primary);
	box-shadow: var(--shadow-sm);
}

/* Modal */
.modal-overlay {
	position: fixed; inset: 0;
	background: var(--modal-bg);
	backdrop-filter: blur(8px);
	display: flex; align-items: center; justify-content: center;
	z-index: 1000;
	opacity: 0; pointer-events: none;
	transition: opacity var(--transition-base);
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal {
	background: var(--bg-surface);
	border: 1px solid var(--border-color);
	border-radius: var(--r-xl);
	padding: var(--sp-8);
	max-width: 420px;
	width: 90%;
	box-shadow: var(--shadow-lg);
}

/* Keyboard shortcut label */
.kbd {
	display: inline-flex;
	align-items: center;
	padding: 1px 5px;
	font-size: 11px;
	font-family: var(--font-mono);
	background: var(--bg-elevated);
	border: 1px solid var(--border-color);
	border-radius: var(--r-xs);
	color: var(--text-muted);
}


/* === Theme Toggle === */
.theme-toggle {
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--r-md);
	cursor: pointer;
	color: var(--text-secondary);
	transition: all var(--transition-fast);
	background: none;
	border: 1px solid transparent;
}
.theme-toggle:hover {
	color: var(--text-primary);
	background: var(--bg-elevated);
	border-color: var(--border-color);
}

.theme-toggle .icon-sun { display: block; }
.theme-toggle .icon-moon { display: none; }

[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }


/* === Dashboard === */

.page-title {
	margin-bottom: var(--sp-6);
}
.page-title h1 {
	font-size: var(--text-xl);
	font-weight: 600;
	letter-spacing: -0.01em;
}
.page-title p {
	font-size: var(--text-sm);
	color: var(--text-muted);
	margin-top: var(--sp-1);
}

.stat-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sp-3);
	margin-bottom: var(--sp-6);
}
.stat-item {
	padding: var(--sp-4);
}
.stat-item-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: var(--sp-2);
}
.stat-item-val {
	font-size: var(--text-2xl);
	font-weight: 700;
	letter-spacing: -0.02em;
}
.stat-item-delta {
	font-size: 12px;
	font-weight: 500;
	margin-top: var(--sp-1);
}
.stat-item-delta.positive { color: var(--color-success); }
.stat-item-delta.neutral { color: var(--text-muted); }

.action-strip {
	display: flex;
	gap: var(--sp-2);
	margin-bottom: var(--sp-6);
	flex-wrap: wrap;
}
.action-chip {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	padding: 8px 14px;
	font-size: var(--text-xs);
	font-weight: 500;
	color: var(--text-secondary);
	background: var(--bg-elevated);
	border: 1px solid var(--border-color);
	border-radius: var(--r-md);
	cursor: pointer;
	transition: all var(--transition-fast);
}
.action-chip:hover {
	border-color: var(--slate-600);
	color: var(--text-primary);
	background: var(--slate-700);
}
.action-chip svg {
	width: 14px;
	height: 14px;
	opacity: 0.6;
}

.chart-section {
	margin-bottom: var(--sp-6);
}
.chart-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--sp-3);
}
.chart-head h2 {
	font-size: var(--text-sm);
	font-weight: 600;
}
.spark-chart {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 120px;
	padding: var(--sp-4) 0 var(--sp-2);
}
.spark-bar {
	flex: 1;
	background: var(--red-800);
	border-radius: 2px 2px 0 0;
	min-height: 4px;
	transition: background var(--transition-fast);
}
.spark-bar:hover {
	background: var(--color-primary);
}
.spark-labels {
	display: flex;
	gap: 3px;
}
.spark-labels span {
	flex: 1;
	text-align: center;
	font-size: 10px;
	color: var(--text-muted);
}

.table-wrap {
	margin-bottom: var(--sp-6);
}
.table-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--sp-3) var(--sp-4);
	border-bottom: 1px solid var(--border-color);
}
.table-head h2 {
	font-size: var(--text-sm);
	font-weight: 600;
}
.dtable {
	width: 100%;
}
.dtable th {
	text-align: left;
	padding: var(--sp-2) var(--sp-4);
	font-size: 11px;
	font-weight: 600;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-bottom: 1px solid var(--border-color);
}
.dtable td {
	padding: var(--sp-3) var(--sp-4);
	font-size: var(--text-sm);
	border-bottom: 1px solid var(--border-subtle);
}
.dtable tr:last-child td { border-bottom: none; }
.dtable tr:hover td { background: rgba(255,255,255,0.02); }

.file-cell {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	font-weight: 500;
}
.file-badge {
	width: 28px; height: 28px;
	border-radius: var(--r-xs);
	background: var(--color-danger-dim);
	color: var(--color-primary);
	display: flex; align-items: center; justify-content: center;
	font-size: 10px; font-weight: 700;
	flex-shrink: 0;
}

.plan-card {
	margin-bottom: var(--sp-5);
}
.plan-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--sp-3);
}
.plan-card-head h3 {
	font-size: var(--text-sm);
	font-weight: 600;
}
.plan-row {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	margin-bottom: var(--sp-3);
}
.plan-row .plan-label {
	font-size: var(--text-xl);
	font-weight: 700;
}
.plan-row .plan-desc {
	font-size: var(--text-xs);
	color: var(--text-muted);
}
.usage-label {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	color: var(--text-muted);
	margin-bottom: var(--sp-1);
}

.settings-group {
	margin-bottom: var(--sp-6);
}
.settings-group h2 {
	font-size: var(--text-base);
	font-weight: 600;
	margin-bottom: var(--sp-4);
}
.setting-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--sp-3) 0;
	border-bottom: 1px solid var(--border-subtle);
}
.setting-item:last-child { border-bottom: none; }
.setting-item-text h3 {
	font-size: var(--text-sm);
	font-weight: 500;
}
.setting-item-text p {
	font-size: var(--text-xs);
	color: var(--text-muted);
	margin-top: 1px;
}

.danger-card {
	border-color: var(--red-800);
}
.danger-card h2 {
	color: var(--color-primary);
	font-size: var(--text-base);
	font-weight: 600;
	margin-bottom: var(--sp-1);
}
.danger-card p {
	font-size: var(--text-xs);
	color: var(--text-muted);
	margin-bottom: var(--sp-3);
}


/* === Navigation & Dropdowns === */

.nav-links {
	display: flex;
	align-items: center;
	gap: 0;
}
.nav-links > li {
	position: relative;
}

.nav-links > li:has(> .dropdown-menu)::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 12px;
}

.nav-links > li > a {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 6px 12px;
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--text-secondary);
	border-radius: var(--r-sm);
	transition: all var(--transition-fast);
	white-space: nowrap;
}
.nav-links > li > a:hover {
	color: var(--text-primary);
	background: var(--bg-elevated);
}

.nav-links > li:has(> .dropdown-menu) > a::after {
	content: '';
	width: 0; height: 0;
	border-left: 3.5px solid transparent;
	border-right: 3.5px solid transparent;
	border-top: 4px solid currentColor;
	opacity: 0.45;
	margin-left: 2px;
	transition: transform var(--transition-fast);
}
.nav-links > li:hover:has(> .dropdown-menu) > a::after {
	transform: rotate(180deg);
}

.dropdown-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(6px);
	background: var(--bg-surface);
	border: 1px solid var(--border-color);
	border-radius: var(--r-lg);
	padding: 0.375rem;
	min-width: 420px;
	z-index: 1001;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--transition-base) 300ms, transform var(--transition-base) 300ms, visibility 0s 500ms;
}
.nav-links > li:hover > .dropdown-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
	transition: opacity var(--transition-base), transform var(--transition-base), visibility 0s;
}

.dropdown-menu li { margin: 0; }

.dropdown-menu a {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	font-size: var(--text-xs);
	font-weight: 450;
	color: var(--text-secondary);
	border-radius: var(--r-sm);
	transition: background var(--transition-fast), color var(--transition-fast);
	white-space: nowrap;
}
.dropdown-menu a:hover {
	background: var(--bg-elevated);
	color: var(--text-primary);
}
.dropdown-menu a i {
	width: 1rem;
	text-align: center;
	color: var(--color-primary);
	font-size: var(--text-xs);
	flex-shrink: 0;
}

.dropdown-section-header {
	grid-column: span 2;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.6875rem;
	color: var(--text-muted);
	padding: 0.625rem 0.75rem 0.25rem;
	margin-top: 0.25rem;
	letter-spacing: 0.06em;
}
.dropdown-section-header:first-child { margin-top: 0; }

/* Auth links in nav */
.auth-links { align-items: center; }
.nav-login {
	color: var(--text-secondary) !important;
}
.nav-login:hover {
	color: var(--text-primary) !important;
	background: var(--bg-elevated) !important;
}
.nav-register {
	background: var(--color-primary) !important;
	color: #fff !important;
	border-radius: var(--r-full) !important;
	padding: 0.4375rem 1.125rem !important;
	font-size: var(--text-sm) !important;
}
.nav-register:hover {
	background: var(--color-primary-hover) !important;
	box-shadow: var(--shadow-glow) !important;
}

/* User menu */
.user-menu > a {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}
.user-menu > a i { color: var(--color-primary); }
.user-dropdown {
	min-width: 200px !important;
	grid-template-columns: 1fr !important;
	left: auto !important;
	right: 0 !important;
	transform: translateX(0) translateY(6px) !important;
}
.nav-links > li:hover > .user-dropdown {
	transform: translateX(0) translateY(0) !important;
}

/* Mobile menu button */
.mobile-menu-btn {
	display: none;
	background: none;
	border: none;
	color: var(--text-primary);
	font-size: 1.25rem;
	cursor: pointer;
	padding: 0.5rem;
	border-radius: var(--r-md);
	transition: background var(--transition-fast);
}
.mobile-menu-btn:hover { background: var(--bg-elevated); }


/* === Light theme overrides === */
[data-theme="light"] .hero-pill {
	background: var(--color-danger-dim);
	border-color: rgba(220, 59, 59, 0.15);
	color: var(--red-600);
}
[data-theme="light"] .hero-window-dot {
	background: var(--slate-300);
}
[data-theme="light"] .spark-bar {
	background: var(--red-200);
}
[data-theme="light"] .spark-bar:hover {
	background: var(--color-primary);
}
[data-theme="light"] .dropzone {
	border-color: var(--slate-300);
	background: rgba(0, 0, 0, 0.01);
}
[data-theme="light"] .toggle {
	background: var(--slate-300);
}
[data-theme="light"] .toggle.active {
	background: var(--color-primary);
}
[data-theme="light"] .action-chip:hover {
	background: var(--slate-200);
	border-color: var(--slate-300);
}
[data-theme="light"] .dtable tr:hover td {
	background: rgba(0, 0, 0, 0.02);
}
[data-theme="light"] .btn-surface:hover {
	background: var(--slate-200);
	border-color: var(--slate-300);
}
[data-theme="light"] .tag-neutral {
	background: rgba(0,0,0,0.05);
}
[data-theme="light"] .tool-tile:hover {
	background: var(--slate-100);
	border-color: var(--slate-300);
}


/* === Responsive === */
@media (max-width: 1024px) {
	.g4 { grid-template-columns: repeat(2, 1fr); }
	.stat-row { grid-template-columns: repeat(2, 1fr); }
	.footer-cols { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
	.container { padding: 0 var(--sp-4); }
	.g2, .g3, .g4 { grid-template-columns: 1fr; }
	.footer-cols { grid-template-columns: 1fr; gap: var(--sp-6); }
	.footer-bar { flex-direction: column; gap: var(--sp-2); text-align: center; }
	.section { padding: var(--sp-12) 0; }
	.menu-btn { display: flex; }

	/* Mobile nav */
	.nav-links {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--bg-surface);
		flex-direction: column;
		padding: 0.5rem 0;
		border-bottom: 1px solid var(--border-color);
		box-shadow: var(--shadow-lg);
		z-index: 1001;
		max-height: calc(100vh - var(--header-h));
		overflow-y: auto;
	}
	.nav-links.active { display: flex; }

	.nav-links > li > a {
		padding: 0.875rem 1.5rem;
		font-size: var(--text-base);
		border-radius: 0;
	}

	.nav-links > li:has(> .dropdown-menu) > a::after {
		border-top: 5px solid currentColor;
		border-left: 4px solid transparent;
		border-right: 4px solid transparent;
		margin-left: auto;
	}
	.nav-links > li.active:has(> .dropdown-menu) > a::after {
		transform: rotate(180deg);
	}

	.dropdown-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none !important;
		box-shadow: none;
		border: none;
		border-radius: 0;
		padding: 0;
		background: var(--bg-elevated);
		grid-template-columns: 1fr;
		min-width: auto;
		display: none;
		pointer-events: auto;
	}
	.nav-links li.active .dropdown-menu { display: block; }
	.nav-links > li:hover > .dropdown-menu { display: none; }
	.nav-links li.active:hover > .dropdown-menu,
	.nav-links li.active > .dropdown-menu { display: block; }

	.dropdown-menu a {
		padding: 0.625rem 1.5rem 0.625rem 2.5rem;
		font-size: var(--text-sm);
	}
	.dropdown-section-header {
		grid-column: span 1;
		padding: 0.625rem 1.5rem 0.25rem;
	}

	.mobile-menu-btn {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.header .container { position: relative; }

	.user-dropdown { transform: none !important; }
	.nav-links > li:hover > .user-dropdown { transform: none !important; }

	/* Dashboard */
	.app-shell { grid-template-columns: 1fr; }
	.sidebar { display: none; }
	.main-area { padding: var(--sp-4); }
	.stat-row { grid-template-columns: 1fr; }
	.dtable th:nth-child(n+3),
	.dtable td:nth-child(n+3) { display: none; }

	/* Landing */
	.hero { padding: var(--sp-16) 0 var(--sp-10); }
	.hero h1 { font-size: var(--text-3xl); }
	.pricing-cols { grid-template-columns: 1fr; max-width: 360px; }
}


/* static pages formattincg */
.prose { max-width: 720px; margin: 0 auto; }
.prose h1 {
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-2);
}
.prose .subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--sp-10);
}
.prose h2 {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-top: var(--sp-10);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border-color);
}
.prose h3 {
  font-size: var(--text-base);
  font-weight: 600;
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-2);
}
.prose p {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: var(--sp-4);
}
.prose ul, .prose ol {
  margin-bottom: var(--sp-4);
  padding-left: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.prose li {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--text-secondary);
  list-style: disc;
}
.prose ol li { list-style: decimal; }
.prose li strong { color: var(--text-primary); }
.prose a { color: var(--color-primary); }
.prose a:hover { text-decoration: underline; }