diff --git a/src/webview/components/ClusterCard.tsx b/src/webview/components/ClusterCard.tsx
index 03b06c7..144ca79 100644
--- a/src/webview/components/ClusterCard.tsx
+++ b/src/webview/components/ClusterCard.tsx
@@ -113,6 +113,20 @@ export const ClusterCard: React.FC<ClusterCardProps> = ({ title, noteIndices, no
 					if (!note) return null;
 					return (
 						<div key={note.noteId} className="note-item" onClick={() => handleNoteClick(note.noteId)}>
+							<svg
+								width="13"
+								height="13"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								strokeWidth="2"
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								style={{ opacity: 0.6, flexShrink: 0 }}
+							>
+								<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+								<polyline points="14 2 14 8 20 8" />
+							</svg>
 							<span className="note-title">{note.title || 'Untitled'}</span>
 						</div>
 					);
diff --git a/src/webview/components/EmptyState.tsx b/src/webview/components/EmptyState.tsx
index e7004fd..bafae78 100644
--- a/src/webview/components/EmptyState.tsx
+++ b/src/webview/components/EmptyState.tsx
@@ -3,6 +3,20 @@ import * as React from 'react';
 export const EmptyState: React.FC = () => {
 	return (
 		<div className="empty-state">
+			<svg
+				className="empty-illustration"
+				width="48"
+				height="48"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				strokeWidth="1.2"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			>
+				<rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+				<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+			</svg>
 			<div className="empty-title">No categories yet</div>
 			<div className="empty-subtitle">Click Run to categorize your notes using on-device AI.</div>
 		</div>
diff --git a/src/webview/components/Header.tsx b/src/webview/components/Header.tsx
index de88e6c..0a55644 100644
--- a/src/webview/components/Header.tsx
+++ b/src/webview/components/Header.tsx
@@ -8,9 +8,36 @@ interface HeaderProps {
 export const Header: React.FC<HeaderProps> = ({ isRunning, onRun }) => {
 	return (
 		<div className="panel-header">
-			<div className="panel-header-title">Note Categorizer</div>
+			<div className="panel-header-title">
+				<svg
+					width="14"
+					height="14"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					strokeWidth="2"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+				>
+					<path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z" />
+					<line x1="7" y1="7" x2="7.01" y2="7" strokeWidth="2.5" />
+				</svg>
+				Note Categorizer
+			</div>
 			<button id="btn-run" className="btn-run" onClick={onRun} disabled={isRunning}>
-				Run
+				<svg
+					width="11"
+					height="11"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					strokeWidth="2"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+				>
+					<polygon points="5 3 19 12 5 21 5 3" />
+				</svg>
+				{isRunning ? 'Running...' : 'Run'}
 			</button>
 		</div>
 	);
diff --git a/src/webview/pages/HistoryPage.tsx b/src/webview/pages/HistoryPage.tsx
index 12f8bb7..47b6a73 100644
--- a/src/webview/pages/HistoryPage.tsx
+++ b/src/webview/pages/HistoryPage.tsx
@@ -26,9 +26,7 @@ export const HistoryPage: React.FC = () => {
 	}
 
 	return (
-		<div className="empty-state">
-			<div className="empty-title">Change Log / History</div>
-
+		<div className="page-history">
 			{hasChangeLog && logDetails ? (
 				<div className="undo-history-card">
 					<div className="undo-history-title">Active Categorization State</div>
@@ -37,7 +35,12 @@ export const HistoryPage: React.FC = () => {
 							<strong>Applied At:</strong> {new Date(logDetails.timestamp).toLocaleString()}
 						</div>
 						<div>
-							<strong>Method Used:</strong> {logDetails.method}
+							<strong>Method Used:</strong>{' '}
+							{logDetails.method === 'both'
+								? 'Notebooks & Tags'
+								: logDetails.method === 'notebooks'
+									? 'Notebooks Only'
+									: 'Tags Only'}
 						</div>
 						<div>
 							<strong>Modified Items:</strong> {logDetails.notes?.length || 0} notes
@@ -82,22 +85,43 @@ export const HistoryPage: React.FC = () => {
 					{cleanupError && <div className="status-banner-apply error">Error: {cleanupError}</div>}
 				</div>
 			) : (
-				<>
+				<div className="empty-state">
+					<svg
+						className="empty-illustration"
+						width="64"
+						height="64"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						strokeWidth="1.5"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					>
+						<circle cx="12" cy="12" r="10" />
+						<polyline points="12 6 12 12 16 14" />
+					</svg>
+					<div className="empty-title">No history found</div>
 					<div className="empty-subtitle">
 						No active categorization state in the change log. Run the categorization pipeline and apply
 						changes to see history here.
 					</div>
 					{undoSuccess && (
-						<div className="status-banner-apply success" style={{ marginTop: '16px' }}>
+						<div
+							className="status-banner-apply success"
+							style={{ marginTop: '16px', width: '100%', maxWidth: '320px' }}
+						>
 							Reverted changes successfully!
 						</div>
 					)}
 					{cleanupSuccess && (
-						<div className="status-banner-apply success" style={{ marginTop: '16px' }}>
+						<div
+							className="status-banner-apply success"
+							style={{ marginTop: '16px', width: '100%', maxWidth: '320px' }}
+						>
 							{cleanupSuccess}
 						</div>
 					)}
-				</>
+				</div>
 			)}
 		</div>
 	);
diff --git a/src/webview/panel.css b/src/webview/panel.css
index dacdb90..c4a217a 100644
--- a/src/webview/panel.css
+++ b/src/webview/panel.css
@@ -1,38 +1,90 @@
-:root {
-	--accent: #4a90d9;
-}
+/* RESET & BASE */
 
-* {
+*, *::before, *::after {
 	box-sizing: border-box;
 	margin: 0;
 	padding: 0;
 }
 
-html,
-body,
-#root {
-	height: 100vh;
-}
-
 body {
-	font-family: var(--joplin-font-family);
-	font-size: var(--joplin-font-size);
+	font-family: var(--joplin-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
+	font-size: var(--joplin-font-size, 13px);
 	color: var(--joplin-color);
 	background-color: var(--joplin-background-color);
 	line-height: 1.5;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
 	overflow: hidden;
 }
 
+/* LAYOUT SHELL */
+
+.panel-container {
+	display: flex;
+	flex-direction: column;
+	height: 100vh;
+	overflow: hidden;
+}
+
+.panel-main {
+	flex: 1;
+	overflow-y: auto;
+	min-height: 0;
+	padding: 16px;
+}
+
+.page-empty-state,
+.page-dashboard,
+.page-history {
+	display: flex;
+	flex-direction: column;
+}
+
+/* NAVIGATION TABS */
+
+.panel-navigation {
+	display: flex;
+	gap: 0;
+	background: var(--joplin-background-color);
+	border-bottom: 1px solid var(--joplin-divider-color);
+	padding: 0 16px;
+}
+
+.nav-tab {
+	position: relative;
+	padding: 10px 14px;
+	background: transparent;
+	border: none;
+	border-bottom: 2px solid transparent;
+	color: var(--joplin-color);
+	opacity: 0.5;
+	font-family: inherit;
+	font-size: 0.85em;
+	font-weight: 500;
+	cursor: pointer;
+	transition: opacity 150ms ease, border-color 150ms ease;
+	letter-spacing: 0.01em;
+}
+
+.nav-tab:hover {
+	opacity: 0.8;
+}
+
+.nav-tab.active {
+	opacity: 1;
+	font-weight: 600;
+	border-bottom-color: var(--joplin-color);
+}
+
+/* HEADER */
+
 .panel-header {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	padding: 12px 14px;
+	padding-bottom: 16px;
+	margin-bottom: 16px;
 	border-bottom: 1px solid var(--joplin-divider-color);
-	background: var(--joplin-background-color);
-	position: sticky;
-	top: 0;
-	z-index: 10;
 }
 
 .panel-header-title {
@@ -40,43 +92,105 @@ body {
 	align-items: center;
 	gap: 8px;
 	font-weight: 600;
-	font-size: 1.05em;
+	font-size: 1em;
+	letter-spacing: -0.01em;
+}
+
+.panel-header-title svg {
+	opacity: 0.5;
 }
 
-.btn-run {
+/* BUTTONS — Secondary (ghost) */
+
+.btn-run,
+.btn-undo,
+.btn-cleanup {
 	display: inline-flex;
 	align-items: center;
+	justify-content: center;
 	gap: 5px;
 	padding: 6px 14px;
-	border: none;
+	border: 1px solid var(--joplin-divider-color);
+	border-radius: 6px;
+	background: transparent;
+	color: var(--joplin-color);
+	font-size: 0.82em;
+	font-weight: 500;
+	font-family: inherit;
+	cursor: pointer;
+	transition: background 150ms ease, border-color 150ms ease;
+	white-space: nowrap;
+}
+
+.btn-run:hover,
+.btn-undo:hover,
+.btn-cleanup:hover {
+	background: color-mix(in srgb, var(--joplin-color) 5%, var(--joplin-background-color));
+	border-color: color-mix(in srgb, var(--joplin-color) 18%, var(--joplin-divider-color));
+}
+
+.btn-run:active,
+.btn-undo:active,
+.btn-cleanup:active {
+	background: color-mix(in srgb, var(--joplin-color) 8%, var(--joplin-background-color));
+}
+
+.btn-run:disabled,
+.btn-undo:disabled,
+.btn-cleanup:disabled {
+	opacity: 0.35;
+	cursor: not-allowed;
+	pointer-events: none;
+}
+
+.btn-run svg,
+.btn-undo svg,
+.btn-cleanup svg {
+	opacity: 0.6;
+}
+
+/* BUTTONS — Primary (solid) */
+
+.btn-apply-primary {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	padding: 8px 16px;
+	border: 1px solid transparent;
 	border-radius: 6px;
-	background: var(--accent);
-	color: #fff;
+	background: var(--joplin-color);
+	color: var(--joplin-background-color);
 	font-size: 0.85em;
 	font-weight: 600;
 	font-family: inherit;
 	cursor: pointer;
-	transition: opacity 0.2s, transform 0.15s;
+	transition: opacity 150ms ease;
+	letter-spacing: 0.01em;
 }
 
-.btn-run:hover {
-	opacity: 0.88;
-	transform: translateY(-1px);
+.btn-apply-primary:hover:not(:disabled) {
+	opacity: 0.85;
 }
 
-.btn-run:active {
-	transform: translateY(0);
+.btn-apply-primary:active:not(:disabled) {
+	opacity: 0.75;
 }
 
-.btn-run:disabled {
-	opacity: 0.5;
+.btn-apply-primary:disabled {
+	opacity: 0.25;
 	cursor: not-allowed;
-	transform: none;
+	pointer-events: none;
 }
 
+/* PROGRESS BAR */
+
 .status-bar {
-	padding: 10px 14px;
-	border-bottom: 1px solid var(--joplin-divider-color);
+	padding: 14px;
+	background: color-mix(in srgb, var(--joplin-color) 3%, var(--joplin-background-color));
+	border: 1px solid var(--joplin-divider-color);
+	border-radius: 8px;
+	margin-bottom: 16px;
 	display: none;
 }
 
@@ -85,38 +199,43 @@ body {
 }
 
 .status-text {
-	font-size: 0.85em;
-	opacity: 0.75;
-	margin-bottom: 6px;
+	font-size: 0.82em;
+	font-weight: 500;
+	margin-bottom: 10px;
+	opacity: 0.8;
 }
 
 .progress-container {
 	width: 100%;
-	height: 6px;
+	height: 3px;
 	background: var(--joplin-divider-color);
-	border-radius: 3px;
+	border-radius: 4px;
 	overflow: hidden;
-	margin-bottom: 6px;
+	margin-bottom: 8px;
 }
 
 .progress-fill {
 	height: 100%;
-	background: var(--accent);
-	border-radius: 3px;
+	background: var(--joplin-color);
+	opacity: 0.7;
 	width: 0%;
-	transition: width 0.35s ease;
+	border-radius: 4px;
+	transition: width 300ms ease;
 }
 
 .progress-label {
-	font-size: 0.8em;
-	opacity: 0.6;
+	font-size: 0.75em;
+	opacity: 0.45;
 	display: flex;
 	justify-content: space-between;
 }
 
+/* STRATEGY SECTION */
+
 .strategy-section {
-	padding: 10px 14px;
+	padding: 14px 0;
 	border-bottom: 1px solid var(--joplin-divider-color);
+	margin-bottom: 12px;
 	display: none;
 }
 
@@ -127,44 +246,44 @@ body {
 .strategy-selector-row {
 	display: flex;
 	align-items: center;
-	gap: 8px;
+	gap: 10px;
 	margin-bottom: 8px;
 }
 
 .strategy-selector-label {
 	font-size: 0.82em;
 	font-weight: 600;
+	opacity: 0.7;
 	white-space: nowrap;
 }
 
 .strategy-select {
 	flex: 1;
-	padding: 4px 8px;
+	padding: 5px 8px;
 	border: 1px solid var(--joplin-divider-color);
-	border-radius: 5px;
+	border-radius: 6px;
 	background: var(--joplin-background-color);
 	color: var(--joplin-color);
 	font-size: 0.82em;
 	font-family: inherit;
 	cursor: pointer;
-	transition: border-color 0.2s;
+	outline: none;
+	transition: border-color 150ms ease;
 }
 
-.strategy-select:hover,
 .strategy-select:focus {
-	outline: none;
-	border-color: var(--accent);
+	border-color: color-mix(in srgb, var(--joplin-color) 30%, var(--joplin-divider-color));
 }
 
 .strategy-score {
-	font-size: 0.82em;
-	opacity: 0.7;
-	margin-bottom: 6px;
+	font-size: 0.78em;
+	opacity: 0.5;
+	margin-bottom: 10px;
 }
 
 .strategy-score strong {
-	color: var(--accent);
 	opacity: 1;
+	font-weight: 600;
 }
 
 .strategy-pills {
@@ -175,46 +294,78 @@ body {
 
 .strategy-pill {
 	display: inline-block;
-	padding: 2px 8px;
-	border-radius: 10px;
-	font-size: 0.75em;
-	background: var(--joplin-divider-color);
-	opacity: 0.8;
+	padding: 3px 10px;
+	border-radius: 100px;
+	font-size: 0.72em;
+	font-weight: 500;
+	background: color-mix(in srgb, var(--joplin-color) 4%, var(--joplin-background-color));
+	border: 1px solid var(--joplin-divider-color);
+	color: var(--joplin-color);
+	opacity: 0.55;
 	white-space: nowrap;
+	transition: opacity 150ms ease, border-color 150ms ease;
+	cursor: default;
 }
 
 .strategy-pill.active {
-	background: var(--accent);
-	color: #fff;
 	opacity: 1;
 	font-weight: 600;
+	border-color: color-mix(in srgb, var(--joplin-color) 25%, var(--joplin-divider-color));
+	background: color-mix(in srgb, var(--joplin-color) 8%, var(--joplin-background-color));
 }
 
+/* CLUSTER LIST */
+
 .cluster-list {
-	padding: 6px 0;
 	display: none;
+	flex-direction: column;
+	gap: 0;
+	margin-bottom: 8px;
 }
 
 .cluster-list.visible {
-	display: block;
+	display: flex;
 }
 
+/* INDIVIDUAL CLUSTER CARD */
+
 .cluster-card {
-	border-bottom: 1px solid var(--joplin-divider-color);
+	border: 1px solid var(--joplin-divider-color);
+	border-radius: 8px;
+	margin-bottom: 8px;
+	overflow: hidden;
+	transition: border-color 150ms ease;
 }
 
+.cluster-card:hover {
+	border-color: color-mix(in srgb, var(--joplin-color) 12%, var(--joplin-divider-color));
+}
+
+.cluster-card.noise {
+	opacity: 0.6;
+}
+
+/* CLUSTER HEADER ROW */
+
 .cluster-header {
 	display: flex;
-	align-items: center;
+	align-items: flex-start;
 	justify-content: space-between;
-	padding: 10px 14px;
+	padding: 12px 14px;
 	cursor: pointer;
-	transition: background-color 0.15s;
 	user-select: none;
+	transition: background 150ms ease;
+	height: 64px;
+	box-sizing: border-box;
+}
+
+.cluster-card.expanded .cluster-header {
+	height: auto;
+	min-height: 64px;
 }
 
 .cluster-header:hover {
-	background: var(--joplin-background-color-hover);
+	background: color-mix(in srgb, var(--joplin-color) 3%, var(--joplin-background-color));
 }
 
 .cluster-header-left {
@@ -226,122 +377,194 @@ body {
 	flex: 1;
 }
 
-.cluster-tags {
+.cluster-title-container {
 	display: flex;
-	flex-wrap: wrap;
+	align-items: center;
 	gap: 6px;
-	margin-top: 4px;
+	min-width: 0;
+	width: 100%;
 }
 
-.cluster-tag {
-	font-size: 0.8em;
+.cluster-title {
+	font-size: 0.88em;
 	font-weight: 600;
-	background: rgba(74, 144, 217, 0.14); /* fallback for older Chromium */
-	background: color-mix(in srgb, var(--accent) 14%, transparent);
-	color: var(--accent);
-	padding: 2px 8px;
-	border-radius: 6px;
 	white-space: nowrap;
-	letter-spacing: 0.2px;
-	transition: all 0.15s ease;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	letter-spacing: -0.01em;
+}
+
+.cluster-edit-btn {
+	background: transparent;
+	border: none;
+	padding: 2px;
+	cursor: pointer;
+	color: var(--joplin-color);
+	opacity: 0;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	transition: opacity 150ms ease;
 }
 
-.cluster-tag:hover {
-	background: rgba(74, 144, 217, 0.22); /* fallback for older Chromium */
-	background: color-mix(in srgb, var(--accent) 22%, transparent);
+.cluster-header:hover .cluster-edit-btn {
+	opacity: 0.35;
 }
 
-.cluster-title {
-	font-size: 0.9em;
+.cluster-edit-btn:hover {
+	opacity: 0.7 !important;
+}
+
+.cluster-title-input {
+	font-size: 0.88em;
 	font-weight: 600;
-	white-space: nowrap;
+	font-family: inherit;
+	padding: 2px 6px;
+	border: 1px solid color-mix(in srgb, var(--joplin-color) 20%, var(--joplin-divider-color));
+	border-radius: 4px;
+	background: var(--joplin-background-color);
+	color: var(--joplin-color);
+	outline: none;
+	width: 140px;
+}
+
+/* TAGS */
+
+.cluster-tags {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 4px;
+	margin-left: 0;
+	max-height: 20px;
 	overflow: hidden;
-	text-overflow: ellipsis;
+	width: 100%;
+}
+
+.cluster-card.expanded .cluster-tags {
+	max-height: none;
+	overflow: visible;
+}
+
+.cluster-tag {
+	font-size: 0.7em;
+	font-weight: 500;
+	color: var(--joplin-color);
+	opacity: 0.5;
+	background: color-mix(in srgb, var(--joplin-color) 4%, var(--joplin-background-color));
+	padding: 1px 7px;
+	border: 1px solid color-mix(in srgb, var(--joplin-divider-color) 60%, transparent);
+	border-radius: 100px;
+	white-space: nowrap;
 }
 
+/* COUNT & CHEVRON */
+
 .cluster-count {
-	font-size: 0.78em;
-	opacity: 0.55;
+	font-size: 0.75em;
+	opacity: 0.4;
 	white-space: nowrap;
 	flex-shrink: 0;
+	margin-left: 8px;
+	margin-top: 2px;
+	font-weight: 500;
 }
 
 .cluster-chevron {
-	width: 0;
-	height: 0;
-	border-top: 4px solid transparent;
-	border-bottom: 4px solid transparent;
-	border-left: 5px solid currentColor;
-	opacity: 0.5;
-	transition: transform 0.2s ease;
+	width: 7px;
+	height: 7px;
+	border-right: 1.5px solid currentColor;
+	border-bottom: 1.5px solid currentColor;
+	transform: rotate(-45deg);
+	transition: transform 200ms ease;
+	opacity: 0.3;
 	flex-shrink: 0;
-	margin-left: 4px;
+	margin-left: 8px;
+	margin-right: 2px;
+	margin-top: 5px;
 }
 
 .cluster-card.expanded .cluster-chevron {
-	transform: rotate(90deg);
+	transform: rotate(45deg);
 }
 
+/* EXPANDED NOTE LIST */
+
 .cluster-notes {
 	max-height: 0;
 	overflow: hidden;
-	transition: max-height 0.3s ease;
+	transition: max-height 250ms ease-out;
 }
 
 .cluster-card.expanded .cluster-notes {
-	max-height: 5000px;
+	max-height: 2000px;
+	border-top: 1px solid var(--joplin-divider-color);
 }
 
 .note-item {
 	display: flex;
 	align-items: center;
-	padding: 6px 14px 6px 28px;
+	gap: 8px;
+	padding: 7px 14px 7px 28px;
 	cursor: pointer;
-	transition: background-color 0.12s;
-	font-size: 0.84em;
+	font-size: 0.82em;
+	transition: background 100ms ease;
 }
 
 .note-item:hover {
-	background: var(--joplin-background-color-hover);
+	background: color-mix(in srgb, var(--joplin-color) 3%, var(--joplin-background-color));
+}
+
+.note-item:last-child {
+	border-radius: 0 0 7px 7px;
 }
 
 .note-title {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
+	opacity: 0.8;
 }
 
-.cluster-card.noise .cluster-title {
-	opacity: 0.7;
-}
+/* EMPTY STATES */
 
 .empty-state {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	padding: 48px 24px;
+	padding: 48px 16px;
 	text-align: center;
 }
 
+.empty-illustration {
+	color: var(--joplin-color);
+	opacity: 0.2;
+	margin-bottom: 16px;
+}
+
 .empty-title {
-	font-size: 1em;
+	font-size: 0.95em;
 	font-weight: 600;
 	margin-bottom: 6px;
+	letter-spacing: -0.01em;
 }
 
 .empty-subtitle {
-	font-size: 0.84em;
-	opacity: 0.55;
+	font-size: 0.8em;
+	opacity: 0.45;
 	line-height: 1.5;
-	max-width: 280px;
+	max-width: 240px;
 }
 
+/* ERROR BANNER */
+
 .error-banner {
-	padding: 10px 14px;
-	background: var(--joplin-color-error);
-	color: #fff;
-	font-size: 0.84em;
+	padding: 10px 16px;
+	background: color-mix(in srgb, #dc2626 10%, var(--joplin-background-color));
+	color: #dc2626;
+	border-bottom: 1px solid color-mix(in srgb, #dc2626 20%, var(--joplin-divider-color));
+	font-size: 0.82em;
+	font-weight: 500;
 	display: none;
 }
 
@@ -349,326 +572,227 @@ body {
 	display: block;
 }
 
-/* --- Container & Navigation Layout --- */
+/* APPLY SECTION */
 
-.panel-container {
+.apply-section {
+	padding: 16px 0 0 0;
+	border-top: 1px solid var(--joplin-divider-color);
 	display: flex;
 	flex-direction: column;
-	height: 100vh;
-	overflow: hidden;
-}
-
-.panel-main {
-	flex: 1;
-	overflow-y: auto;
-	min-height: 0;
+	gap: 12px;
+	margin-top: 8px;
 }
 
-.panel-navigation {
+.apply-header {
 	display: flex;
-	background: var(--joplin-background-color);
-	border-bottom: 1px solid var(--joplin-divider-color);
-	width: 100%;
+	flex-direction: column;
+	gap: 4px;
 }
 
-.nav-tab {
-	flex: 1;
-	padding: 10px 14px;
-	background: transparent;
-	border: none;
-	border-bottom: 2px solid transparent;
-	color: var(--joplin-color);
-	opacity: 0.65;
-	font-family: inherit;
-	font-size: 0.85em;
-	font-weight: 500;
-	cursor: pointer;
-	transition: all 0.15s ease;
-	text-align: center;
+.apply-title {
+	font-size: 0.88em;
+	font-weight: 600;
+	letter-spacing: -0.01em;
 }
 
-.nav-tab:hover {
-	opacity: 0.9;
-	background: var(--joplin-background-color-hover);
+.apply-subtitle {
+	font-size: 0.78em;
+	opacity: 0.45;
+	line-height: 1.45;
 }
 
-.nav-tab.active {
-	color: var(--accent);
-	border-bottom-color: var(--accent);
-	font-weight: 600;
+.apply-action-row {
+	display: flex;
 }
 
-/* --- Scrollbar Customization --- */
+/* STATUS BANNERS */
 
-::-webkit-scrollbar {
-	width: 6px;
-	height: 6px;
+.status-banner-apply {
+	padding: 8px 12px;
+	border-radius: 6px;
+	font-size: 0.8em;
+	font-weight: 500;
+	margin-top: 8px;
+	border: 1px solid var(--joplin-divider-color);
 }
 
-::-webkit-scrollbar-track {
-	background: transparent;
+.status-banner-apply.info {
+	background: color-mix(in srgb, var(--joplin-color) 3%, var(--joplin-background-color));
+	color: var(--joplin-color);
+	opacity: 0.75;
 }
 
-::-webkit-scrollbar-thumb {
-	background: var(--joplin-divider-color);
-	border-radius: 3px;
-	transition: background-color 0.2s ease;
+.status-banner-apply.success {
+	background: color-mix(in srgb, #16a34a 6%, var(--joplin-background-color));
+	color: #16a34a;
+	border-color: color-mix(in srgb, #16a34a 15%, var(--joplin-divider-color));
 }
 
-::-webkit-scrollbar-thumb:hover {
-	background: var(--accent);
+.status-banner-apply.error {
+	background: color-mix(in srgb, #dc2626 6%, var(--joplin-background-color));
+	color: #dc2626;
+	border-color: color-mix(in srgb, #dc2626 15%, var(--joplin-divider-color));
 }
 
-/* --- Config Card (Settings Page) --- */
+/* HISTORY PAGE */
 
-.config-card {
-	text-align: left;
-	font-size: 0.82em;
-	opacity: 0.7;
+.undo-history-card {
 	border: 1px solid var(--joplin-divider-color);
-	border-radius: 6px;
-	padding: 12px;
+	border-radius: 8px;
+	padding: 16px;
 	width: 100%;
-	max-width: 300px;
-	background: var(--joplin-background-color-hover);
+	max-width: 320px;
+	margin: 8px auto 0 auto;
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	text-align: left;
 }
 
-.config-card-header {
+.undo-history-title {
 	font-weight: 600;
-	margin-bottom: 6px;
+	font-size: 0.88em;
+	padding-bottom: 8px;
 	border-bottom: 1px solid var(--joplin-divider-color);
-	padding-bottom: 4px;
+	letter-spacing: -0.01em;
 }
 
-.config-card-item {
-	margin: 4px 0;
+.undo-history-detail {
+	font-size: 0.8em;
+	line-height: 1.5;
+	opacity: 0.75;
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
 }
 
-/* --- Cluster Title Editing --- */
-
-.cluster-title-container {
-	display: inline-flex;
-	align-items: center;
-	gap: 6px;
-	max-width: 100%;
+.undo-history-detail strong {
+	opacity: 1;
+	font-weight: 600;
 }
 
-.cluster-edit-btn {
-	background: transparent;
-	border: none;
-	padding: 2px 4px;
-	border-radius: 4px;
-	cursor: pointer;
-	color: var(--joplin-color);
+.cleanup-note {
+	font-size: 0.75em;
 	opacity: 0.4;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	transition: opacity 0.15s, background-color 0.15s;
+	line-height: 1.4;
+	margin-top: 4px;
+	border-top: 1px solid var(--joplin-divider-color);
+	padding-top: 8px;
 }
 
-.cluster-edit-btn:hover {
-	opacity: 0.9;
-	background-color: var(--joplin-divider-color);
-}
+/* SETTINGS PAGE */
 
-.cluster-title-input {
-	font-size: 0.9em;
-	font-weight: 600;
-	font-family: inherit;
-	padding: 2px 6px;
-	border: 1px solid var(--accent);
-	border-radius: 4px;
-	background: var(--joplin-background-color);
-	color: var(--joplin-color);
-	outline: none;
-	min-width: 120px;
-	max-width: 200px;
+.settings-container {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
 	width: 100%;
+	text-align: left;
 }
 
-/* --- Apply & Revert Changes UI --- */
-
-.apply-section {
-	padding: 16px;
-	background: var(--joplin-background-color);
-	border-top: 1px solid var(--joplin-divider-color);
+.settings-group {
 	display: flex;
 	flex-direction: column;
-	gap: 12px;
-	margin-top: 8px;
+	gap: 6px;
+	padding-bottom: 14px;
+	border-bottom: 1px solid var(--joplin-divider-color);
 }
 
-.apply-header {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
+.settings-group:last-child {
+	border-bottom: none;
 }
 
-.apply-title {
-	font-size: 0.92em;
+.settings-label {
+	font-size: 0.85em;
 	font-weight: 600;
+	letter-spacing: -0.01em;
 }
 
-.apply-subtitle {
+.settings-desc {
 	font-size: 0.78em;
-	opacity: 0.6;
-	line-height: 1.4;
+	opacity: 0.45;
+	line-height: 1.45;
 }
 
-.apply-action-row {
+.settings-input-row {
 	display: flex;
-	width: 100%;
-}
-
-.btn-apply-primary {
-	width: 100%;
-	display: inline-flex;
 	align-items: center;
-	justify-content: center;
-	padding: 8px 16px;
-	border: none;
-	border-radius: 6px;
-	background: var(--accent);
-	color: #fff;
-	font-size: 0.85em;
-	font-weight: 600;
-	font-family: inherit;
-	cursor: pointer;
-	transition: opacity 0.2s, transform 0.1s;
-	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
-	height: 34px;
-}
-
-.btn-apply-primary:hover {
-	opacity: 0.9;
-}
-
-.btn-apply-primary:active {
-	transform: scale(0.99);
-}
-.btn-apply-primary:disabled {
-	opacity: 0.55;
-	cursor: not-allowed;
-	box-shadow: none;
-	transform: none;
+	gap: 8px;
+	margin-top: 2px;
 }
 
-.status-banner-apply {
-	padding: 8px 12px;
+.settings-input-row select,
+.settings-input-row input[type="text"] {
+	flex: 1;
+	padding: 5px 8px;
+	border: 1px solid var(--joplin-divider-color);
 	border-radius: 6px;
-	font-size: 0.8em;
-	font-weight: 500;
-	margin-top: 4px;
-}
-
-.status-banner-apply.error {
-	background: rgba(235, 87, 87, 0.15);
-	color: #eb5757;
-	border: 1px solid rgba(235, 87, 87, 0.3);
-}
-
-.status-banner-apply.success {
-	background: rgba(39, 174, 96, 0.15);
-	color: #27ae60;
-	border: 1px solid rgba(39, 174, 96, 0.3);
+	background: var(--joplin-background-color);
+	color: var(--joplin-color);
+	font-size: 0.82em;
+	font-family: inherit;
+	outline: none;
+	transition: border-color 150ms ease;
 }
 
-.status-banner-apply.info {
-	background: rgba(74, 144, 217, 0.15);
-	color: var(--accent);
-	border: 1px solid rgba(74, 144, 217, 0.3);
+.settings-input-row select:focus,
+.settings-input-row input[type="text"]:focus {
+	border-color: color-mix(in srgb, var(--joplin-color) 30%, var(--joplin-divider-color));
 }
 
-.undo-history-card {
-	background: var(--joplin-background-color-hover);
+.config-card {
+	font-size: 0.78em;
+	opacity: 0.6;
 	border: 1px solid var(--joplin-divider-color);
 	border-radius: 8px;
-	padding: 16px;
-	width: 100%;
-	max-width: 400px;
-	margin: 0 auto;
-	display: flex;
-	flex-direction: column;
-	gap: 12px;
-	text-align: left;
+	padding: 12px 14px;
+	background: color-mix(in srgb, var(--joplin-color) 2%, var(--joplin-background-color));
+	line-height: 1.55;
 }
 
-.undo-history-title {
+.config-card-header {
 	font-weight: 600;
-	font-size: 0.95em;
-	border-bottom: 1px solid var(--joplin-divider-color);
-	padding-bottom: 6px;
+	opacity: 1;
+	margin-bottom: 6px;
 }
 
-.undo-history-detail {
-	font-size: 0.82em;
-	line-height: 1.6;
-	opacity: 0.8;
+.config-card-item {
+	margin: 3px 0;
 }
 
-.btn-undo {
-	width: 100%;
-	padding: 8px 14px;
-	border: 1px solid #eb5757;
-	border-radius: 6px;
-	background: transparent;
-	color: #eb5757;
-	font-size: 0.85em;
+.config-card-item strong {
 	font-weight: 600;
-	cursor: pointer;
-	transition: background-color 0.2s, color 0.2s;
+	opacity: 1;
 }
 
-.btn-undo:hover {
-	background: #eb5757;
-	color: #fff;
-}
+/* SCROLLBAR */
 
-.btn-undo:disabled {
-	opacity: 0.5;
-	cursor: not-allowed;
+::-webkit-scrollbar {
+	width: 5px;
+	height: 5px;
 }
 
-.btn-cleanup {
-	width: 100%;
-	padding: 8px 14px;
-	border: 1px solid var(--accent);
-	border-radius: 6px;
+::-webkit-scrollbar-track {
 	background: transparent;
-	color: var(--accent);
-	font-size: 0.85em;
-	font-weight: 600;
-	cursor: pointer;
-	transition: background-color 0.2s, color 0.2s;
 }
 
-.btn-cleanup:hover {
-	background: var(--accent);
-	color: #fff;
-}
-
-.btn-cleanup:disabled {
-	opacity: 0.5;
-	cursor: not-allowed;
+::-webkit-scrollbar-thumb {
+	background: color-mix(in srgb, var(--joplin-color) 10%, transparent);
+	border-radius: 100px;
 }
 
-.cleanup-note {
-	font-size: 0.78em;
-	opacity: 0.65;
-	line-height: 1.4;
-	margin-top: 10px;
-	border-top: 1px dashed var(--joplin-divider-color);
-	padding-top: 10px;
+::-webkit-scrollbar-thumb:hover {
+	background: color-mix(in srgb, var(--joplin-color) 20%, transparent);
 }
 
-/* --- Focus-visible for keyboard accessibility --- */
+/* FOCUS RINGS */
 
 .btn-run:focus-visible,
 .btn-apply-primary:focus-visible,
 .btn-undo:focus-visible,
-.btn-cleanup:focus-visible {
-	outline: 2px solid var(--accent);
+.btn-cleanup:focus-visible,
+.strategy-select:focus-visible,
+.nav-tab:focus-visible {
+	outline: 2px solid color-mix(in srgb, var(--joplin-color) 40%, transparent);
 	outline-offset: 2px;
 }
-