@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
	--bg-base: #f0f4f9;
	--ink: #0f172a;
	--ink-muted: #64748b;
	--ink-light: #94a3b8;
	
	/* Liquid Glass Surface Tokens */
	--glass-surface: rgba(255, 255, 255, 0.68);
	--glass-surface-hover: rgba(255, 255, 255, 0.85);
	--glass-surface-active: rgba(255, 255, 255, 0.92);
	--glass-panel: rgba(255, 255, 255, 0.72);
	--glass-subtle: rgba(255, 255, 255, 0.42);
	--glass-dark: rgba(15, 23, 42, 0.88);
	--glass-border: rgba(255, 255, 255, 0.65);
	--glass-border-subtle: rgba(255, 255, 255, 0.45);
	--glass-border-dark: rgba(15, 23, 42, 0.12);
	
	/* Liquid Accent & Gradient Tokens */
	--primary: #4f46e5;
	--primary-glow: rgba(79, 70, 229, 0.35);
	--cyan: #06b6d4;
	--cyan-glow: rgba(6, 182, 212, 0.35);
	--emerald: #10b981;
	--rose: #f43f5e;
	--amber: #f59e0b;
	--liquid-gradient: linear-gradient(135deg, #4f46e5 0%, #3b82f6 50%, #06b6d4 100%);
	--liquid-gradient-hover: linear-gradient(135deg, #4338ca 0%, #2563eb 50%, #0891b2 100%);
	--liquid-accent-soft: rgba(79, 70, 229, 0.08);
	
	/* Glass Shadows */
	--shadow-glass-sm: 0 4px 16px 0 rgba(31, 38, 135, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
	--shadow-glass-md: 0 12px 36px 0 rgba(31, 38, 135, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.85);
	--shadow-glass-lg: 0 24px 60px 0 rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
	--shadow-glow: 0 8px 24px var(--primary-glow);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
	margin: 0;
	color: var(--ink);
	background: var(--bg-base);
	font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	min-height: 100vh;
	position: relative;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

/* FULLSCREEN MAGIC FX CANVAS */
#magic-fx-canvas {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	pointer-events: none;
	z-index: 999;
}

/* AMBIENT LIQUID GLASS MESH BACKGROUND */
.ambient-canvas {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}

.glow-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	opacity: 0.65;
	animation: floatOrb 22s ease-in-out infinite alternate;
}

.orb-1 {
	width: 550px;
	height: 550px;
	background: radial-gradient(circle, rgba(99, 102, 241, 0.45) 0%, rgba(168, 85, 247, 0.2) 70%, transparent 100%);
	top: -100px;
	right: 5%;
	animation-duration: 18s;
}

.orb-2 {
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(6, 182, 212, 0.38) 0%, rgba(59, 130, 246, 0.18) 70%, transparent 100%);
	top: 30%;
	left: -120px;
	animation-duration: 24s;
	animation-delay: -5s;
}

.orb-3 {
	width: 480px;
	height: 480px;
	background: radial-gradient(circle, rgba(236, 72, 153, 0.3) 0%, rgba(244, 63, 94, 0.12) 70%, transparent 100%);
	bottom: -80px;
	right: 15%;
	animation-duration: 20s;
	animation-delay: -10s;
}

.orb-4 {
	width: 420px;
	height: 420px;
	background: radial-gradient(circle, rgba(16, 185, 129, 0.28) 0%, transparent 70%);
	top: 60%;
	right: 35%;
	animation-duration: 26s;
}

@keyframes floatOrb {
	0% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(40px, 30px) scale(1.08); }
	100% { transform: translate(-30px, 45px) scale(0.95); }
}

/* PAGE SHELL */
.page-shell {
	position: relative;
	z-index: 1;
	min-height: 100vh;
	padding: 24px clamp(20px, 5vw, 84px) 36px;
	display: flex;
	flex-direction: column;
}

/* TOPBAR */
.topbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 20px;
	border-radius: 100px;
	margin-bottom: 24px;
}

.glass-bar {
	background: var(--glass-surface);
	backdrop-filter: blur(24px) saturate(190%);
	-webkit-backdrop-filter: blur(24px) saturate(190%);
	border: 1px solid var(--glass-border);
	box-shadow: var(--shadow-glass-sm);
}

.brand {
	color: var(--ink);
	text-decoration: none;
	display: flex;
	gap: 12px;
	align-items: center;
	font-size: 20px;
	letter-spacing: -0.03em;
	transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.brand:hover { transform: translateY(-1px); }

.brand-logo-wrap {
	position: relative;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.brand-logo-img {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 9px;
	filter: drop-shadow(0 2px 8px rgba(79, 70, 229, 0.25));
	transition: filter 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.brand:hover .brand-logo-wrap {
	transform: scale(1.1) rotate(4deg);
}
.brand:hover .brand-logo-img {
	filter: drop-shadow(0 4px 14px rgba(6, 182, 212, 0.45));
}

.brand-text {
	font-weight: 500;
	color: var(--ink);
}
.brand-text strong {
	font-weight: 800;
	background: var(--liquid-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.glass-pill {
	background: rgba(255, 255, 255, 0.55);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid var(--glass-border);
	padding: 6px 14px;
	border-radius: 100px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: 500 11.5px 'JetBrains Mono', monospace;
	color: var(--ink-muted);
	box-shadow: var(--shadow-glass-sm);
}

.status-pulse {
	width: 8px;
	height: 8px;
	background: var(--emerald);
	border-radius: 50%;
	box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
	animation: pulseGlow 2.5s infinite;
}

@keyframes pulseGlow {
	0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
	70% { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); }
	100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* MAIN CONTENT */
main {
	width: min(100%, 1120px);
	margin: auto;
}

.intro {
	padding: 56px 0 44px;
	max-width: 720px;
}
.home-intro { padding-bottom: 54px; }
.tool-intro { padding-bottom: 36px; }

.badge-pill {
	margin-bottom: 16px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--primary);
	border-color: rgba(99, 102, 241, 0.25);
	background: rgba(255, 255, 255, 0.7);
}
.pill-sparkle { color: var(--amber); }

h1 {
	margin: 12px 0 18px;
	font-size: clamp(46px, 6.5vw, 76px);
	line-height: 1.02;
	letter-spacing: -0.05em;
	font-weight: 800;
	color: var(--ink);
}

.gradient-text {
	background: var(--liquid-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-style: normal;
}

.intro-copy {
	color: var(--ink-muted);
	font-size: 16.5px;
	line-height: 1.6;
	max-width: 480px;
	margin: 0;
}

.back-link {
	text-decoration: none;
	margin-bottom: 24px;
	transition: all 0.2s;
	display: inline-flex;
}
.back-link:hover {
	background: var(--glass-surface-hover);
	color: var(--primary);
	transform: translateX(-3px);
}

/* TOOL SECTIONS */
.tool-section {
	margin-bottom: 60px;
}

.section-heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	border-bottom: 1px solid var(--glass-border-subtle);
	padding-bottom: 16px;
	margin-bottom: 18px;
}
.section-heading h2 {
	font-size: 27px;
	letter-spacing: -0.04em;
	margin: 4px 0 0;
	font-weight: 800;
	color: var(--ink);
}

.eyebrow, .section-kicker {
	color: var(--primary);
	font: 600 11px 'JetBrains Mono', monospace;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}
.eyebrow span, .section-kicker span {
	color: var(--ink-light);
	font-weight: 400;
	margin-left: 6px;
}
.eyebrow-dot {
	width: 6px;
	height: 6px;
	background: var(--primary);
	border-radius: 50%;
	box-shadow: 0 0 8px var(--primary-glow);
}

/* TOOL GRIDS */
.tool-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.compact-grid {
	grid-template-columns: repeat(2, 1fr);
}

/* GLASS TOOL CARDS */
.tool-card {
	min-height: 154px;
	position: relative;
	border-radius: 16px;
	text-decoration: none;
	padding: 20px 18px;
	display: flex;
	flex-direction: column;
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	overflow: hidden;
}

.glass-panel {
	background: var(--glass-panel);
	backdrop-filter: blur(24px) saturate(180%);
	-webkit-backdrop-filter: blur(24px) saturate(180%);
	border: 1px solid var(--glass-border);
	box-shadow: var(--shadow-glass-sm);
	color: var(--ink);
}
.glass-panel:hover {
	background: var(--glass-surface-hover);
	border-color: rgba(99, 102, 241, 0.4);
	transform: translateY(-4px);
	box-shadow: var(--shadow-glass-md), 0 10px 24px rgba(99, 102, 241, 0.1);
}

.featured-glass {
	background: linear-gradient(135deg, rgba(15, 23, 42, 0.92) 0%, rgba(30, 41, 59, 0.88) 100%);
	backdrop-filter: blur(28px);
	-webkit-backdrop-filter: blur(28px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #ffffff;
	box-shadow: 0 16px 36px rgba(15, 23, 42, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.featured-glass:hover {
	background: linear-gradient(135deg, rgba(15, 23, 42, 0.96) 0%, rgba(51, 65, 85, 0.9) 100%);
	border-color: rgba(99, 102, 241, 0.6);
	transform: translateY(-4px);
	box-shadow: 0 20px 44px rgba(15, 23, 42, 0.35), 0 0 20px rgba(99, 102, 241, 0.3);
}

.tool-number {
	color: var(--primary);
	font: 600 11px 'JetBrains Mono', monospace;
	letter-spacing: 0.05em;
}
.featured-glass .tool-number {
	color: var(--cyan);
}

.tool-card strong {
	font-size: 16px;
	font-weight: 700;
	margin-top: auto;
	letter-spacing: -0.02em;
}

.tool-card > span:not(.tool-number) {
	color: var(--ink-muted);
	font-size: 12px;
	line-height: 1.45;
	margin-top: 6px;
}
.featured-glass > span:not(.tool-number) {
	color: #94a3b8;
}

.card-arrow {
	position: absolute;
	top: 18px;
	right: 18px;
	font-size: 19px;
	font-weight: 400;
	color: var(--primary);
	transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.featured-glass .card-arrow {
	color: var(--cyan);
}
.tool-card:hover .card-arrow {
	transform: translate(3px, -3px);
}

.tool-card.wide {
	min-height: 136px;
}

/* UNIVERSAL GLASS WORKSPACE */
.glass-workspace {
	background: var(--glass-panel);
	backdrop-filter: blur(32px) saturate(190%);
	-webkit-backdrop-filter: blur(32px) saturate(190%);
	border: 1px solid var(--glass-border);
	border-radius: 24px;
	padding: clamp(24px, 4vw, 48px);
	box-shadow: var(--shadow-glass-lg);
}

.workspace-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 24px;
}

.workspace-head h2 {
	font-size: 26px;
	letter-spacing: -0.04em;
	margin: 4px 0 0;
	font-weight: 800;
}

.glass-tag {
	background: rgba(99, 102, 241, 0.12);
	color: var(--primary);
	border: 1px solid rgba(99, 102, 241, 0.2);
	padding: 2px 8px;
	border-radius: 6px;
	font: 600 10.5px 'JetBrains Mono', monospace;
}

.glass-text-btn {
	background: rgba(255, 255, 255, 0.6);
	border: 1px solid var(--glass-border);
	color: var(--primary);
	padding: 6px 14px;
	border-radius: 100px;
	font-size: 13px;
	font-weight: 700;
	transition: all 0.2s;
}
.glass-text-btn:hover {
	background: #ffffff;
	box-shadow: var(--shadow-glass-sm);
	transform: translateY(-1px);
}

/* OPTIONS TOOLBAR */
.glass-inner-panel {
	background: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid var(--glass-border);
	border-radius: 16px;
}

.tool-options-bar {
	padding: 16px 20px;
	margin-bottom: 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
	align-items: center;
	animation: glassFade 0.3s ease-out;
}

.option-group {
	display: flex;
	align-items: center;
	gap: 10px;
}
.option-label {
	font: 600 11.5px 'JetBrains Mono', monospace;
	color: var(--ink);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
}

.option-input, .option-select, .glass-select {
	border: 1px solid var(--glass-border);
	background: rgba(255, 255, 255, 0.85);
	color: var(--ink);
	padding: 7px 12px;
	font-size: 13px;
	border-radius: 8px;
	outline: none;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: all 0.2s;
}
.option-input:focus, .option-select:focus, .glass-select:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.option-slider-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
}
.glass-range, input[type='range'] {
	accent-color: var(--primary);
	height: 6px;
	border-radius: 4px;
	background: rgba(15, 23, 42, 0.1);
}
.option-slider-wrap output, .glass-val {
	font: 600 12px 'JetBrains Mono', monospace;
	color: var(--primary);
	min-width: 42px;
}

.option-btn-group {
	display: flex;
	gap: 5px;
}
.opt-btn {
	border: 1px solid var(--glass-border);
	background: rgba(255, 255, 255, 0.7);
	color: var(--ink);
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 600;
	border-radius: 8px;
	transition: all 0.2s;
}
.opt-btn:hover { background: #ffffff; }
.opt-btn.active {
	background: var(--primary);
	color: #ffffff;
	border-color: var(--primary);
	box-shadow: 0 2px 10px var(--primary-glow);
}

/* DROP ZONE */
.glass-dropzone {
	min-height: 190px;
	border: 2px dashed rgba(99, 102, 241, 0.35);
	background: rgba(255, 255, 255, 0.35);
	backdrop-filter: blur(12px);
	border-radius: 18px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 12px;
	padding: 28px;
	cursor: pointer;
	outline: none;
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.glass-dropzone:hover, .glass-dropzone:focus, .glass-dropzone.dragging {
	background: rgba(99, 102, 241, 0.08);
	border-color: var(--primary);
	box-shadow: 0 8px 30px rgba(99, 102, 241, 0.15);
	transform: scale(1.003);
}

#file-input { display: none; }

.upload-symbol {
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: var(--liquid-gradient);
	display: grid;
	place-items: center;
	color: #ffffff;
	font-size: 24px;
	box-shadow: 0 8px 20px var(--primary-glow);
	transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.glass-dropzone:hover .upload-symbol {
	transform: translateY(-2px) scale(1.08);
}
.upload-arrow { font-weight: bold; }

.drop-copy {
	display: flex;
	gap: 6px;
	font-size: 15px;
	flex-wrap: wrap;
	justify-content: center;
}
.drop-copy strong { font-weight: 700; color: var(--ink); }
.drop-copy span { color: var(--ink-muted); }
.browse-link { color: var(--primary); text-underline-offset: 3px; font-weight: 600; }

.format-note {
	color: var(--ink-light);
	font: 11px 'JetBrains Mono', monospace;
	letter-spacing: 0.08em;
}
.format-note i { font-style: normal; margin: 0 6px; }

/* LIVE PREVIEW */
.live-preview-container {
	margin-top: 20px;
	overflow: hidden;
	border-radius: 18px;
	border: 1px solid var(--glass-border);
}
.canvas-viewport {
	min-height: 300px;
	max-height: 500px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: radial-gradient(circle, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 1) 100%);
	overflow: auto;
}
.canvas-viewport canvas {
	max-width: 100%;
	max-height: 460px;
	border-radius: 6px;
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
	display: block;
}
.preview-meta {
	display: flex;
	justify-content: space-between;
	padding: 10px 20px;
	color: #94a3b8;
	font: 11.5px 'JetBrains Mono', monospace;
	border-radius: 0 0 18px 18px;
}

/* FILE QUEUE ROWS */
.file-list {
	display: grid;
	gap: 10px;
	margin-top: 22px;
}

.file-row {
	min-height: 72px;
	background: var(--glass-surface);
	backdrop-filter: blur(20px);
	border: 1px solid var(--glass-border);
	border-radius: 14px;
	display: flex;
	align-items: center;
	padding: 10px 16px 10px 12px;
	gap: 14px;
	box-shadow: var(--shadow-glass-sm);
	transition: all 0.2s;
	animation: glassFade 0.25s ease-out;
}
.file-row:hover {
	background: var(--glass-surface-hover);
	border-color: rgba(99, 102, 241, 0.35);
}

.thumbnail-wrap {
	width: 52px;
	height: 52px;
	background: rgba(15, 23, 42, 0.06);
	border-radius: 10px;
	overflow: hidden;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	border: 1px solid var(--glass-border);
}
.thumbnail-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pdf-icon-badge {
	font: 700 11px 'JetBrains Mono', monospace;
	color: var(--primary);
	background: rgba(99, 102, 241, 0.1);
	padding: 4px 6px;
	border-radius: 6px;
}

.file-info {
	min-width: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.file-info strong {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 14px;
	font-weight: 700;
}
.file-info span {
	color: var(--ink-muted);
	font: 11px 'JetBrains Mono', monospace;
}
.file-info i {
	font-style: normal;
	margin: 0 5px;
	color: var(--ink-light);
}

.row-actions {
	display: flex;
	align-items: center;
	gap: 6px;
}

.adjust-button {
	color: var(--primary);
	border: 1px solid rgba(99, 102, 241, 0.3);
	background: rgba(99, 102, 241, 0.08);
	padding: 7px 13px;
	font-size: 11.5px;
	font-weight: 700;
	border-radius: 8px;
	transition: all 0.2s;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.adjust-button:hover {
	background: var(--primary);
	color: #ffffff;
	border-color: var(--primary);
	box-shadow: 0 4px 12px var(--primary-glow);
	transform: translateY(-1px);
}

.icon-button, .remove-button, .glass-icon-btn {
	color: var(--ink-muted);
	width: 32px;
	height: 32px;
	border: 1px solid transparent;
	background: transparent;
	font-size: 15px;
	display: grid;
	place-items: center;
	border-radius: 8px;
	transition: all 0.15s;
}
.icon-button:hover, .glass-icon-btn:hover {
	color: var(--ink);
	background: rgba(255, 255, 255, 0.8);
	border-color: var(--glass-border);
}
.icon-button:disabled {
	opacity: 0.25;
	cursor: default;
}
.remove-button {
	font-size: 20px;
	font-weight: 300;
}
.remove-button:hover {
	color: var(--rose);
	background: rgba(244, 63, 94, 0.12);
	border-color: rgba(244, 63, 94, 0.25);
}

/* PDF PAGE VISUAL GRID */
.pdf-page-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 16px;
	margin-top: 24px;
	animation: glassFade 0.3s ease-out;
}

.pdf-page-card {
	background: var(--glass-surface);
	backdrop-filter: blur(20px);
	border: 1.5px solid var(--glass-border);
	border-radius: 14px;
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	position: relative;
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: var(--shadow-glass-sm);
	cursor: pointer;
}
.pdf-page-card:hover {
	border-color: var(--primary);
	box-shadow: var(--shadow-glass-md), 0 8px 20px var(--primary-glow);
	transform: translateY(-3px);
}

.pdf-page-card.selected {
	border-color: var(--primary);
	background: rgba(99, 102, 241, 0.12);
	box-shadow: 0 0 0 2px var(--primary), var(--shadow-glass-md);
}
.pdf-page-card.marked-remove {
	border-color: var(--rose);
	background: rgba(244, 63, 94, 0.1);
	opacity: 0.65;
}
.pdf-page-card.marked-remove::after {
	content: 'REMOVED';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-12deg);
	font: 800 12px 'JetBrains Mono', monospace;
	color: #ffffff;
	background: var(--rose);
	padding: 4px 10px;
	border-radius: 6px;
	box-shadow: 0 6px 16px rgba(244, 63, 94, 0.35);
}

.pdf-thumb-wrap {
	width: 100%;
	aspect-ratio: 1 / 1.414;
	background: rgba(15, 23, 42, 0.04);
	border-radius: 8px;
	overflow: hidden;
	display: grid;
	place-items: center;
	border: 1px solid var(--glass-border);
}
.pdf-thumb-wrap canvas {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.pdf-card-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font: 11.5px 'JetBrains Mono', monospace;
}
.pdf-page-tag {
	font-weight: 600;
	color: var(--ink);
}
.pdf-card-actions {
	display: flex;
	gap: 4px;
}
.pdf-mini-btn {
	border: 1px solid var(--glass-border);
	background: rgba(255, 255, 255, 0.9);
	padding: 3px 8px;
	font-size: 11px;
	font-weight: 600;
	border-radius: 6px;
	color: var(--ink);
	transition: all 0.15s;
}
.pdf-mini-btn:hover {
	background: var(--primary);
	color: #ffffff;
	border-color: var(--primary);
}

/* EMPTY STATE */
.empty-state {
	display: flex;
	align-items: center;
	gap: 16px;
	color: var(--ink-light);
	font: 11.5px 'JetBrains Mono', monospace;
	justify-content: center;
	padding: 40px 0 20px;
}
.empty-line {
	height: 1px;
	background: var(--glass-border);
	width: 80px;
}

/* WORKSPACE FOOTER */
.workspace-footer {
	border-top: 1px solid var(--glass-border-subtle);
	margin-top: 36px;
	padding-top: 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.glass-clear-btn {
	border: 0;
	padding: 8px 14px;
	background: transparent;
	color: var(--ink-muted);
	font-size: 13.5px;
	font-weight: 600;
	border-radius: 8px;
	transition: all 0.2s;
}
.glass-clear-btn:not(:disabled):hover {
	color: var(--rose);
	background: rgba(244, 63, 94, 0.08);
}
.glass-clear-btn:disabled {
	opacity: 0.35;
	cursor: default;
}

/* LIQUID ACTION BUTTON */
.liquid-button {
	background: var(--liquid-gradient);
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.4);
	min-width: 180px;
	padding: 14px 24px;
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
	font-size: 13.5px;
	font-weight: 700;
	border-radius: 12px;
	box-shadow: 0 8px 24px var(--primary-glow), inset 0 1px 0 rgba(255, 255, 255, 0.4);
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	gap: 14px;
}
.liquid-button:hover:not(:disabled) {
	background: var(--liquid-gradient-hover);
	transform: translateY(-2px);
	box-shadow: 0 12px 32px var(--primary-glow), 0 0 20px var(--cyan-glow);
}
.liquid-button:disabled {
	opacity: 0.35;
	cursor: default;
	box-shadow: none;
}
.liquid-arrow {
	font-size: 18px;
	color: #ffffff;
	transition: transform 0.2s;
}
.liquid-button:hover:not(:disabled) .liquid-arrow {
	transform: translate(2px, -2px);
}
.liquid-button.loading {
	pointer-events: none;
	opacity: 0.75;
}

/* TOAST */
.glass-toast {
	position: fixed;
	bottom: 28px;
	left: 50%;
	transform: translate(-50%, 20px);
	background: rgba(15, 23, 42, 0.9);
	backdrop-filter: blur(24px);
	color: #ffffff;
	padding: 13px 24px;
	font-size: 13px;
	font-weight: 600;
	opacity: 0;
	pointer-events: none;
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	border-radius: 100px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
	z-index: 1000;
}
.toast.visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* ADJUST MODAL */
.glass-dialog {
	width: min(900px, calc(100% - 32px));
	max-height: 90vh;
	border: 1px solid var(--glass-border);
	background: var(--glass-panel);
	backdrop-filter: blur(36px) saturate(200%);
	-webkit-backdrop-filter: blur(36px) saturate(200%);
	color: var(--ink);
	box-shadow: var(--shadow-glass-lg);
	border-radius: 24px;
	padding: 0;
	overflow: auto;
}
.glass-dialog::backdrop {
	background: rgba(15, 23, 42, 0.45);
	backdrop-filter: blur(6px);
}

.dialog-content {
	padding: 28px clamp(20px, 4vw, 36px);
}

.dialog-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.dialog-head h2 {
	font-size: 24px;
	letter-spacing: -0.04em;
	margin: 4px 0 0;
	font-weight: 800;
}

.dialog-file-name {
	color: var(--ink-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font: 11.5px 'JetBrains Mono', monospace;
	margin: 12px 0 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--glass-border-subtle);
}

.dialog-body-grid {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 24px;
	margin-bottom: 24px;
}

.dialog-canvas-column {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.glass-canvas-wrap {
	width: 100%;
	height: 320px;
	background: radial-gradient(circle, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 1) 100%);
	overflow: hidden;
	border-radius: 16px;
	border: 1px solid var(--glass-border);
	display: grid;
	place-items: center;
}
.glass-canvas-wrap canvas {
	display: block;
	max-width: 100%;
	max-height: 100%;
	cursor: crosshair;
	touch-action: none;
}

.quick-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.glass-tool-btn {
	border: 1px solid var(--glass-border);
	background: rgba(255, 255, 255, 0.8);
	color: var(--ink);
	padding: 6px 12px;
	font-size: 11.5px;
	font-weight: 600;
	border-radius: 8px;
	transition: all 0.15s;
}
.glass-tool-btn:hover {
	background: var(--primary);
	color: #ffffff;
	border-color: var(--primary);
}

.dialog-controls-column {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.control-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.field-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	color: var(--ink);
}
.slider-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.field-subnote {
	font-size: 11px;
	color: var(--ink-light);
}

.dialog-actions-split {
	border-top: 1px solid var(--glass-border-subtle);
	padding-top: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
}

.glass-secondary-btn {
	background: rgba(255, 255, 255, 0.85);
	color: var(--ink);
	border: 1px solid var(--glass-border);
	padding: 12px 20px;
	font-size: 13px;
	font-weight: 700;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	box-shadow: var(--shadow-glass-sm);
	transition: all 0.2s;
}
.glass-secondary-btn:hover {
	background: #ffffff;
	border-color: var(--primary);
	color: var(--primary);
	transform: translateY(-1px);
}

.dialog-main-actions {
	display: flex;
	align-items: center;
	gap: 14px;
}

/* FOOTER */
.glass-footer {
	margin-top: 40px;
	padding: 14px 24px;
	border-radius: 100px;
	color: var(--ink-muted);
	font: 11.5px 'JetBrains Mono', monospace;
	background: var(--glass-surface);
	backdrop-filter: blur(20px);
	border: 1px solid var(--glass-border);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.footer-code { color: var(--primary); font-weight: 600; }

/* =============================================================
   SPARKY THE MAGIC GLASS MASCOT ANIMATIONS & STYLING
============================================================= */
.sparky-container {
	position: fixed;
	bottom: 24px;
	right: 28px;
	z-index: 900;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	pointer-events: none;
	filter: drop-shadow(0 16px 32px rgba(15, 23, 42, 0.18));
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sparky-bubble {
	pointer-events: auto;
	max-width: 250px;
	padding: 10px 15px;
	border-radius: 16px 16px 4px 16px;
	margin-bottom: 8px;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	box-shadow: var(--shadow-glass-md);
	animation: bubblePop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
	border: 1px solid var(--glass-border);
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(24px);
}

.bubble-emoji {
	font-size: 16px;
	line-height: 1.2;
}

.bubble-text {
	font-size: 12px;
	font-weight: 600;
	color: var(--ink);
	line-height: 1.38;
}

.sparky-stage {
	pointer-events: auto;
	cursor: pointer;
	width: 120px;
	height: 137px;
	outline: none;
	position: relative;
	transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sparky-stage:hover {
	transform: scale(1.08) translateY(-4px);
}
.sparky-stage:active {
	transform: scale(0.96);
}

/* Character Idle Float Animations */
.sparky-body-group {
	animation: sparkyFloat 3.6s ease-in-out infinite alternate;
	transform-origin: center bottom;
}

.sparky-shadow {
	animation: shadowPulse 3.6s ease-in-out infinite alternate;
	transform-origin: center;
}

.sparky-wand-group {
	animation: wandIdle 3.6s ease-in-out infinite alternate;
	transform-origin: 100px 100px;
}

.wand-star {
	animation: starTwinkle 2s ease-in-out infinite alternate;
	transform-origin: 124px 60px;
}

.wand-sparkle {
	animation: sparkleDrift 2.2s infinite ease-out;
}
.sp-1 { animation-delay: 0s; }
.sp-2 { animation-delay: 0.7s; }
.sp-3 { animation-delay: 1.4s; }

.antenna-bulb {
	animation: antennaGlow 2.5s infinite alternate;
}

/* Eye Blinking */
.sparky-eyes .eye-open, .sparky-eyes .eye-sparkle, .sparky-eyes .eye-sparkle-sm {
	animation: eyeBlinkCycle 4.5s infinite;
	transform-origin: center;
}

/* STATE: DRAG OVER (Excited & Hungry for files) */
.state-dragover .sparky-body-group {
	animation: excitedBounce 0.45s ease-in-out infinite alternate;
}
.state-dragover .sparky-stage {
	transform: scale(1.18) translateY(-10px);
}
.state-dragover .left-hand {
	transform: translateY(-24px) rotate(-35deg);
	transition: transform 0.2s;
}
.state-dragover .right-hand {
	transform: translateY(-20px) rotate(25deg);
	transition: transform 0.2s;
}
.state-dragover .sparky-wand-group {
	animation: wandFastTwirl 0.8s infinite linear;
}
.state-dragover .mouth-smile { opacity: 0; }
.state-dragover .mouth-excited { opacity: 1; }

/* STATE: FILES LOADED / READY */
.state-loaded .eye-open { opacity: 0; }
.state-loaded .eye-happy { opacity: 1; }
.state-loaded .mouth-smile { opacity: 1; }
.state-loaded .left-hand {
	transform: translateY(-8px) scale(1.1);
}

/* STATE: PROCESSING (Magic Spell) */
.state-processing .sparky-wand-group {
	animation: wandSpell 0.6s infinite linear;
}
.state-processing .sparky-body-group {
	animation: spellHover 1s ease-in-out infinite alternate;
}
.state-processing .antenna-bulb {
	fill: #fbbf24;
	filter: drop-shadow(0 0 10px #f59e0b);
}

/* STATE: CELEBRATE (Success Jump) */
.state-celebrate .sparky-stage {
	animation: celebrationLeap 0.85s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.state-celebrate .mouth-smile { opacity: 0; }
.state-celebrate .mouth-joy { opacity: 1; }
.state-celebrate .eye-open { opacity: 0; }
.state-celebrate .eye-happy { opacity: 1; }

/* STATE: INTERACTIVE SPIN / WINK */
.sparky-spin {
	animation: sparkyTwirl 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* KEYFRAMES */
@keyframes sparkyFloat {
	0% { transform: translateY(0px) rotate(0deg); }
	50% { transform: translateY(-9px) rotate(1.5deg); }
	100% { transform: translateY(0px) rotate(-1.5deg); }
}

@keyframes shadowPulse {
	0% { transform: scale(1); opacity: 0.2; }
	50% { transform: scale(0.82); opacity: 0.1; }
	100% { transform: scale(1); opacity: 0.2; }
}

@keyframes wandIdle {
	0% { transform: rotate(0deg); }
	50% { transform: rotate(10deg); }
	100% { transform: rotate(-5deg); }
}

@keyframes starTwinkle {
	0% { transform: scale(1) rotate(0deg); }
	100% { transform: scale(1.3) rotate(25deg); }
}

@keyframes sparkleDrift {
	0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
	50% { opacity: 1; }
	100% { opacity: 0; transform: translate(-10px, -18px) scale(1.2); }
}

@keyframes antennaGlow {
	0% { fill: #38bdf8; filter: drop-shadow(0 0 4px #0284c7); }
	100% { fill: #c084fc; filter: drop-shadow(0 0 12px #a855f7); }
}

@keyframes eyeBlinkCycle {
	0%, 92%, 100% { transform: scaleY(1); }
	96% { transform: scaleY(0.08); }
}

@keyframes excitedBounce {
	0% { transform: translateY(0) scale(1); }
	100% { transform: translateY(-14px) scale(1.05); }
}

@keyframes wandFastTwirl {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes wandSpell {
	0% { transform: rotate(-15deg); }
	50% { transform: rotate(30deg) translateY(-8px); }
	100% { transform: rotate(-15deg); }
}

@keyframes spellHover {
	0% { transform: translateY(-4px) scale(1.02); }
	100% { transform: translateY(-12px) scale(0.98); }
}

@keyframes celebrationLeap {
	0% { transform: translateY(0) scale(1); }
	40% { transform: translateY(-32px) scale(1.15) rotate(8deg); }
	70% { transform: translateY(-12px) scale(1.05) rotate(-4deg); }
	100% { transform: translateY(0) scale(1); }
}

@keyframes sparkyTwirl {
	0% { transform: rotate(0deg) scale(1); }
	50% { transform: rotate(180deg) scale(1.2); }
	100% { transform: rotate(360deg) scale(1); }
}

@keyframes bubblePop {
	0% { opacity: 0; transform: scale(0.8) translateY(10px); }
	100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* FOOTER */
.footer {
	margin-top: 64px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 24px;
	border-radius: 100px;
	font-size: 13px;
	color: var(--ink-muted);
}

.glass-footer {
	background: var(--glass-surface);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid var(--glass-border);
	box-shadow: var(--shadow-glass-sm);
}

.footer-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 500;
}

.footer-logo-img {
	width: 22px;
	height: 22px;
	border-radius: 6px;
	display: block;
	filter: drop-shadow(0 2px 6px rgba(79, 70, 229, 0.2));
}

.footer-code {
	font: 600 11px 'JetBrains Mono', monospace;
	letter-spacing: 0.08em;
	color: var(--primary);
}

/* RESPONSIVENESS */
@media (max-width: 980px) {
	.tool-grid, .pdf-tools { grid-template-columns: repeat(2, 1fr); }
	.dialog-body-grid { grid-template-columns: 1fr; }
	.glass-canvas-wrap { height: 260px; }
	.sparky-container { bottom: 18px; right: 18px; }
	.sparky-stage { width: 95px; height: 108px; }
	.sparky-svg { width: 95px; height: 108px; }
	.sparky-bubble { max-width: 200px; font-size: 11px; }
}

@media (max-width: 640px) {
	.page-shell { padding: 16px 12px; }
	.footer { flex-direction: column; gap: 10px; text-align: center; border-radius: 20px; }
	.tool-grid, .pdf-tools, .compact-grid { grid-template-columns: 1fr; }
	.tool-options-bar { flex-direction: column; align-items: stretch; }
	.workspace-footer { flex-direction: column; gap: 16px; align-items: stretch; }
	.liquid-button { justify-content: center; }
	.dialog-actions-split { flex-direction: column; align-items: stretch; }
	.dialog-main-actions { justify-content: space-between; }
	.sparky-container { bottom: 12px; right: 12px; }
	.sparky-stage { width: 75px; height: 86px; }
	.sparky-svg { width: 75px; height: 86px; }
	.sparky-bubble { max-width: 170px; padding: 7px 10px; }
}