From 599a15dfe0ccea3ac671f0c02c30c35926dea42b Mon Sep 17 00:00:00 2001
From: Wentao <jwt625@gmail.com>
Date: Sun, 15 Feb 2026 16:37:18 -0800
Subject: [PATCH 1/2] style(ui): enforce sharp corners across components

---
 src/app.css                                   | 20 +++++++++++++++++++
 src/components/code/CodeConsole.svelte        |  4 ++--
 src/components/code/ConfirmModal.svelte       |  4 ++--
 src/components/code/EditorLayout.svelte       |  8 ++++----
 src/components/code/ExampleSelector.svelte    |  4 ++--
 src/components/comments/CommentBubble.svelte  |  4 ++--
 .../comments/CommentInputModal.svelte         |  6 +++---
 src/components/comments/CommentPanel.svelte   | 16 +++++++--------
 src/components/ui/DesktopFileControls.svelte  |  4 ++--
 src/components/ui/ErrorToast.svelte           |  4 ++--
 src/components/ui/FileUpload.svelte           | 10 +++++-----
 src/components/ui/HeaderBar.svelte            | 14 ++++++-------
 src/components/ui/HelpModal.svelte            | 10 +++++-----
 src/components/ui/LayerPanel.svelte           |  8 ++++----
 src/components/ui/LoadingOverlay.svelte       |  4 ++--
 src/components/ui/Minimap.svelte              |  6 +++---
 src/components/ui/MobileControls.svelte       | 12 +++++------
 src/components/ui/ParticipantList.svelte      | 14 ++++++-------
 src/components/ui/PerformancePanel.svelte     |  2 +-
 src/components/ui/UnitSelectionDialog.svelte  |  6 +++---
 src/components/viewer/ViewerCanvas.svelte     | 10 +++++-----
 21 files changed, 95 insertions(+), 75 deletions(-)

diff --git a/src/app.css b/src/app.css
index 60d1e18..a6f9670 100644
--- a/src/app.css
+++ b/src/app.css
@@ -27,3 +27,23 @@ body {
 	height: 100vh;
 	overflow: hidden;
 }
+
+/* Sharp-corner visual language across UI */
+button,
+input,
+textarea,
+select,
+[role="button"],
+[class*="panel"],
+[class*="modal"],
+[class*="container"],
+[class*="toast"],
+[class*="card"] {
+	border-radius: 0;
+}
+
+/* Remove rounded corners from icon rectangles as well */
+svg rect {
+	rx: 0 !important;
+	ry: 0 !important;
+}
diff --git a/src/components/code/CodeConsole.svelte b/src/components/code/CodeConsole.svelte
index 953cb87..86e0100 100644
--- a/src/components/code/CodeConsole.svelte
+++ b/src/components/code/CodeConsole.svelte
@@ -131,7 +131,7 @@ const formattedTime = $derived(
 	background: #3e3e42;
 	color: #cccccc;
 	border: none;
-	border-radius: 3px;
+	border-radius: 0;
 	cursor: pointer;
 	font-size: 11px;
 	transition: background 0.1s;
@@ -153,7 +153,7 @@ const formattedTime = $derived(
 	padding: 8px 12px;
 	border-left: 3px solid #f48771;
 	margin-bottom: 12px;
-	border-radius: 3px;
+	border-radius: 0;
 }
 
 .stdout pre,
diff --git a/src/components/code/ConfirmModal.svelte b/src/components/code/ConfirmModal.svelte
index 5e614ce..0e91d30 100644
--- a/src/components/code/ConfirmModal.svelte
+++ b/src/components/code/ConfirmModal.svelte
@@ -73,7 +73,7 @@ function handleKeydown(event: KeyboardEvent) {
 .modal-content {
 	background: #252526;
 	border: 1px solid #3e3e42;
-	border-radius: 4px;
+	border-radius: 0;
 	padding: 24px;
 	min-width: 300px;
 	max-width: 500px;
@@ -97,7 +97,7 @@ function handleKeydown(event: KeyboardEvent) {
 .confirm-button {
 	padding: 8px 16px;
 	border: none;
-	border-radius: 3px;
+	border-radius: 0;
 	font-size: 13px;
 	cursor: pointer;
 	transition: background-color 0.1s;
diff --git a/src/components/code/EditorLayout.svelte b/src/components/code/EditorLayout.svelte
index 3e606e7..154a072 100644
--- a/src/components/code/EditorLayout.svelte
+++ b/src/components/code/EditorLayout.svelte
@@ -522,7 +522,7 @@ const executeButtonLabel = $derived(
 	padding: 6px 10px;
 	background: transparent;
 	border: 1px solid #3e3e42;
-	border-radius: 3px;
+	border-radius: 0;
 	font-size: 16px;
 	cursor: pointer;
 	transition: background-color 0.1s;
@@ -548,7 +548,7 @@ const executeButtonLabel = $derived(
 	background: #0e639c;
 	color: white;
 	border: none;
-	border-radius: 3px;
+	border-radius: 0;
 	cursor: pointer;
 	font-size: 13px;
 	font-weight: 500;
@@ -570,7 +570,7 @@ const executeButtonLabel = $derived(
 	background: #3e3e42;
 	color: #cccccc;
 	border: none;
-	border-radius: 3px;
+	border-radius: 0;
 	cursor: pointer;
 	font-size: 16px;
 	line-height: 1;
@@ -639,7 +639,7 @@ const executeButtonLabel = $derived(
 	background: transparent;
 	color: #cccccc;
 	border: none;
-	border-radius: 3px;
+	border-radius: 0;
 	cursor: pointer;
 	font-size: 13px;
 	transition: background 0.1s;
diff --git a/src/components/code/ExampleSelector.svelte b/src/components/code/ExampleSelector.svelte
index a190157..7d91f81 100644
--- a/src/components/code/ExampleSelector.svelte
+++ b/src/components/code/ExampleSelector.svelte
@@ -91,7 +91,7 @@ $effect(() => {
 	padding: 4px 8px;
 	background: transparent;
 	border: 1px solid #3e3e42;
-	border-radius: 3px;
+	border-radius: 0;
 	color: #d4d4d4;
 	font-size: 13px;
 	cursor: pointer;
@@ -123,7 +123,7 @@ $effect(() => {
 	max-width: 500px;
 	background: #252526;
 	border: 1px solid #3e3e42;
-	border-radius: 3px;
+	border-radius: 0;
 	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
 	z-index: 1000;
 	max-height: 400px;
diff --git a/src/components/comments/CommentBubble.svelte b/src/components/comments/CommentBubble.svelte
index fa2b101..c644f0b 100644
--- a/src/components/comments/CommentBubble.svelte
+++ b/src/components/comments/CommentBubble.svelte
@@ -89,7 +89,7 @@ function handleTimestampClick(event: MouseEvent | KeyboardEvent): void {
 	/* Dark theme styling - match other panels */
 	background: rgba(0, 0, 0, 0.9);
 	border: 1px solid #444;
-	border-radius: 4px;
+	border-radius: 0;
 
 	/* NO ANIMATIONS */
 	transition: none;
@@ -101,7 +101,7 @@ function handleTimestampClick(event: MouseEvent | KeyboardEvent): void {
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	border-radius: 50%;
+	border-radius: 0;
 }
 
 .comment-bubble.preview,
diff --git a/src/components/comments/CommentInputModal.svelte b/src/components/comments/CommentInputModal.svelte
index 7e28fa0..7a1a92f 100644
--- a/src/components/comments/CommentInputModal.svelte
+++ b/src/components/comments/CommentInputModal.svelte
@@ -157,7 +157,7 @@ $effect(() => {
 	.modal-content {
 		background: rgba(0, 0, 0, 0.95);
 		border: 1px solid #444;
-		border-radius: 4px;
+		border-radius: 0;
 		padding: 20px;
 		min-width: 400px;
 		max-width: 600px;
@@ -184,7 +184,7 @@ $effect(() => {
 		padding: 10px;
 		background: rgba(255, 255, 255, 0.05);
 		border: 1px solid #555;
-		border-radius: 4px;
+		border-radius: 0;
 		color: #fff;
 		font-family: monospace;
 		font-size: 14px;
@@ -226,7 +226,7 @@ $effect(() => {
 	button {
 		padding: 8px 16px;
 		border: 1px solid #555;
-		border-radius: 4px;
+		border-radius: 0;
 		background: rgba(255, 255, 255, 0.05);
 		color: #ccc;
 		font-family: monospace;
diff --git a/src/components/comments/CommentPanel.svelte b/src/components/comments/CommentPanel.svelte
index b592ac9..b77fedb 100644
--- a/src/components/comments/CommentPanel.svelte
+++ b/src/components/comments/CommentPanel.svelte
@@ -493,10 +493,10 @@ onDestroy(() => {
 						>
 							<svg class="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 								{#if permissions.viewersCanComment}
-									<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
+									<rect x="3" y="11" width="18" height="11" rx="0" ry="0"></rect>
 									<path d="M7 11V7a5 5 0 0 1 9.9-1"></path>
 								{:else}
-									<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
+									<rect x="3" y="11" width="18" height="11" rx="0" ry="0"></rect>
 									<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
 								{/if}
 							</svg>
@@ -633,7 +633,7 @@ onDestroy(() => {
 	max-height: 600px;
 	background: rgba(0, 0, 0, 0.9);
 	border: 1px solid #444;
-	border-radius: 4px;
+	border-radius: 0;
 	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
 	overflow: hidden;
 	user-select: none;
@@ -698,7 +698,7 @@ onDestroy(() => {
 	padding: 8px 12px;
 	background: rgba(40, 40, 40, 0.8);
 	border: 1px solid #555;
-	border-radius: 4px;
+	border-radius: 0;
 	color: #ccc;
 	font-size: 11px;
 	cursor: pointer;
@@ -745,7 +745,7 @@ onDestroy(() => {
 	padding: 10px;
 	background: rgba(20, 20, 20, 0.6);
 	border: 1px solid #333;
-	border-radius: 4px;
+	border-radius: 0;
 }
 
 .comment-item:hover {
@@ -773,7 +773,7 @@ onDestroy(() => {
 	padding: 0;
 	background: rgba(50, 50, 50, 0.9);
 	border: 1px solid #555;
-	border-radius: 2px;
+	border-radius: 0;
 	color: #ccc;
 	font-size: 11px;
 	cursor: pointer;
@@ -827,7 +827,7 @@ onDestroy(() => {
 	padding: 4px 8px;
 	background: rgba(40, 40, 40, 0.6);
 	border: 1px solid #444;
-	border-radius: 3px;
+	border-radius: 0;
 	color: #aaa;
 	font-size: 10px;
 	cursor: pointer;
@@ -870,7 +870,7 @@ onDestroy(() => {
 	min-height: 56px;
 	background: rgba(10, 10, 10, 0.9);
 	border: 1px solid #444;
-	border-radius: 3px;
+	border-radius: 0;
 	color: #ccc;
 	font-family: monospace;
 	font-size: 11px;
diff --git a/src/components/ui/DesktopFileControls.svelte b/src/components/ui/DesktopFileControls.svelte
index 934db4e..096e42d 100644
--- a/src/components/ui/DesktopFileControls.svelte
+++ b/src/components/ui/DesktopFileControls.svelte
@@ -181,7 +181,7 @@ $effect(() => {
 		padding: 0.5rem 0.75rem;
 		background-color: #2a2a2a;
 		border: 1px solid #444;
-		border-radius: 0.375rem;
+		border-radius: 0;
 		color: #e5e7eb;
 		font-size: 0.875rem;
 		cursor: pointer;
@@ -210,7 +210,7 @@ $effect(() => {
 		padding: 0.5rem 0.75rem;
 		background-color: #1e293b;
 		border: 1px solid #475569;
-		border-radius: 0.375rem;
+		border-radius: 0;
 		color: #94a3b8;
 		font-size: 0.875rem;
 		font-style: italic;
diff --git a/src/components/ui/ErrorToast.svelte b/src/components/ui/ErrorToast.svelte
index cc4b881..16f3b91 100644
--- a/src/components/ui/ErrorToast.svelte
+++ b/src/components/ui/ErrorToast.svelte
@@ -26,7 +26,7 @@ const { message, onDismiss }: Props = $props();
 	.error-content {
 		background-color: #3a1a1a;
 		border: 1px solid #ff4444;
-		border-radius: 8px;
+		border-radius: 0;
 		padding: 1rem 1.5rem;
 		max-width: 500px;
 		max-height: 80vh;
@@ -53,7 +53,7 @@ const { message, onDismiss }: Props = $props();
 		background-color: #ff4444;
 		color: #fff;
 		border: none;
-		border-radius: 4px;
+		border-radius: 0;
 		padding: 0.5rem 1rem;
 		font-size: 0.875rem;
 		cursor: pointer;
diff --git a/src/components/ui/FileUpload.svelte b/src/components/ui/FileUpload.svelte
index be6e83b..461b59c 100644
--- a/src/components/ui/FileUpload.svelte
+++ b/src/components/ui/FileUpload.svelte
@@ -263,12 +263,12 @@ function triggerFileInput() {
 											</svg>
 										{:else if example.category === 'digital'}
 											<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
-												<rect x="4" y="4" width="16" height="16" rx="2" stroke-width="2"/>
+												<rect x="4" y="4" width="16" height="16" rx="0" stroke-width="2"/>
 												<path stroke-width="2" d="M9 9h6M9 12h6M9 15h4"/>
 											</svg>
 										{:else}
 											<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
-												<rect x="3" y="3" width="18" height="18" rx="2" stroke-width="2"/>
+												<rect x="3" y="3" width="18" height="18" rx="0" stroke-width="2"/>
 												<path stroke-width="2" d="M3 9h18M9 21V9"/>
 											</svg>
 										{/if}
@@ -306,7 +306,7 @@ function triggerFileInput() {
 <style>
 	.file-upload {
 		border: 2px dashed #444;
-		border-radius: 8px;
+		border-radius: 0;
 		padding: 2rem;
 		text-align: center;
 		cursor: pointer;
@@ -440,7 +440,7 @@ function triggerFileInput() {
 		padding: 0;
 		background: #1a1a1a;
 		border: 1px solid #333;
-		border-radius: 8px;
+		border-radius: 0;
 		cursor: pointer;
 		text-align: left;
 		position: relative;
@@ -545,7 +545,7 @@ function triggerFileInput() {
 		height: 24px;
 		border: 2px solid #333;
 		border-top-color: #4a9eff;
-		border-radius: 50%;
+		border-radius: 0;
 		animation: spin 0.8s linear infinite;
 	}
 
diff --git a/src/components/ui/HeaderBar.svelte b/src/components/ui/HeaderBar.svelte
index f6a9999..2095422 100644
--- a/src/components/ui/HeaderBar.svelte
+++ b/src/components/ui/HeaderBar.svelte
@@ -362,7 +362,7 @@ async function handleFileInput(event: Event) {
 		padding: 0.5rem 1rem;
 		background-color: #1a1a1a;
 		border: 1px solid #333;
-		border-radius: 6px;
+		border-radius: 0;
 	}
 
 	.session-label {
@@ -388,7 +388,7 @@ async function handleFileInput(event: Event) {
 		font-size: 0.75rem;
 		font-weight: 600;
 		padding: 0.25rem 0.5rem;
-		border-radius: 4px;
+		border-radius: 0;
 		background-color: #333;
 		color: #888;
 		text-transform: uppercase;
@@ -405,7 +405,7 @@ async function handleFileInput(event: Event) {
 		font-size: 0.875rem;
 		font-weight: 500;
 		border: none;
-		border-radius: 6px;
+		border-radius: 0;
 		cursor: pointer;
 		transition: all 0.2s;
 		white-space: nowrap;
@@ -488,7 +488,7 @@ async function handleFileInput(event: Event) {
 		padding: 1.5rem;
 		background: rgba(0, 0, 0, 0.95);
 		border: 1px solid #444;
-		border-radius: 8px;
+		border-radius: 0;
 		z-index: 1000;
 		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
 		backdrop-filter: blur(4px);
@@ -526,7 +526,7 @@ async function handleFileInput(event: Event) {
 		height: auto;
 		aspect-ratio: 1;
 		border: 4px solid #fff;
-		border-radius: 8px;
+		border-radius: 0;
 		background-color: #fff;
 	}
 
@@ -587,7 +587,7 @@ async function handleFileInput(event: Event) {
 		padding: 1.5rem;
 		background: #1a1a1a;
 		border: 1px solid #444;
-		border-radius: 8px;
+		border-radius: 0;
 		z-index: 1001;
 		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
 		min-width: 320px;
@@ -633,7 +633,7 @@ async function handleFileInput(event: Event) {
 		font-size: 0.875rem;
 		background: #2a2a2a;
 		border: 1px solid #444;
-		border-radius: 4px;
+		border-radius: 0;
 		color: #fff;
 		cursor: pointer;
 	}
diff --git a/src/components/ui/HelpModal.svelte b/src/components/ui/HelpModal.svelte
index bd79d9b..000ac23 100644
--- a/src/components/ui/HelpModal.svelte
+++ b/src/components/ui/HelpModal.svelte
@@ -242,7 +242,7 @@ $effect(() => {
 
 	.modal-content {
 		background-color: #2a2a2a;
-		border-radius: 8px;
+		border-radius: 0;
 		max-width: 700px;
 		max-height: 90vh;
 		width: 100%;
@@ -319,7 +319,7 @@ $effect(() => {
 		user-select: none;
 		padding: 0.5rem;
 		margin: 0 -0.5rem 0.5rem -0.5rem;
-		border-radius: 4px;
+		border-radius: 0;
 		transition: background-color 0.2s;
 	}
 
@@ -360,13 +360,13 @@ $effect(() => {
 		gap: 0.75rem;
 		padding: 0.5rem;
 		background-color: #1a1a1a;
-		border-radius: 4px;
+		border-radius: 0;
 	}
 
 	.shortcut-item kbd {
 		background-color: #3a3a3a;
 		border: 1px solid #4a4a4a;
-		border-radius: 4px;
+		border-radius: 0;
 		padding: 0.25rem 0.5rem;
 		font-family: monospace;
 		font-size: 0.85rem;
@@ -392,7 +392,7 @@ $effect(() => {
 		color: #e0e0e0;
 		border: 1px solid #666;
 		padding: 0.75rem 2rem;
-		border-radius: 4px;
+		border-radius: 0;
 		font-size: 1rem;
 		font-weight: 600;
 		cursor: pointer;
diff --git a/src/components/ui/LayerPanel.svelte b/src/components/ui/LayerPanel.svelte
index 39c2f38..47b8f92 100644
--- a/src/components/ui/LayerPanel.svelte
+++ b/src/components/ui/LayerPanel.svelte
@@ -343,7 +343,7 @@ function getLayerColor(layer: number, datatype: number): string {
 		max-height: 80vh;
 		background: rgba(0, 0, 0, 0.9);
 		color: #ccc;
-		border-radius: 4px;
+		border-radius: 0;
 		font-family: monospace;
 		font-size: 12px;
 		display: flex;
@@ -410,7 +410,7 @@ function getLayerColor(layer: number, datatype: number): string {
 		background: #333;
 		color: #ccc;
 		border: 1px solid #555;
-		border-radius: 3px;
+		border-radius: 0;
 		cursor: pointer;
 		font-size: 11px;
 	}
@@ -431,7 +431,7 @@ function getLayerColor(layer: number, datatype: number): string {
 		gap: 8px;
 		padding: 4px;
 		margin: 2px 0;
-		border-radius: 3px;
+		border-radius: 0;
 		cursor: pointer;
 	}
 
@@ -440,7 +440,7 @@ function getLayerColor(layer: number, datatype: number): string {
 	.layer-color {
 		width: 16px;
 		height: 16px;
-		border-radius: 2px;
+		border-radius: 0;
 		border: 1px solid #666;
 		flex-shrink: 0;
 	}
diff --git a/src/components/ui/LoadingOverlay.svelte b/src/components/ui/LoadingOverlay.svelte
index fdda5b8..6207230 100644
--- a/src/components/ui/LoadingOverlay.svelte
+++ b/src/components/ui/LoadingOverlay.svelte
@@ -39,7 +39,7 @@ const { message, progress }: Props = $props();
 		height: 48px;
 		border: 4px solid #333;
 		border-top-color: #4a9eff;
-		border-radius: 50%;
+		border-radius: 0;
 		animation: spin 1s linear infinite;
 		margin: 0 auto 1rem;
 	}
@@ -60,7 +60,7 @@ const { message, progress }: Props = $props();
 		width: 100%;
 		height: 8px;
 		background-color: #333;
-		border-radius: 4px;
+		border-radius: 0;
 		overflow: hidden;
 		margin-bottom: 0.5rem;
 	}
diff --git a/src/components/ui/Minimap.svelte b/src/components/ui/Minimap.svelte
index a217617..62466ba 100644
--- a/src/components/ui/Minimap.svelte
+++ b/src/components/ui/Minimap.svelte
@@ -406,7 +406,7 @@ onDestroy(() => {
 	.minimap-panel {
 		position: fixed;
 		background: rgba(0, 0, 0, 0.9);
-		border-radius: 4px;
+		border-radius: 0;
 		font-family: monospace;
 		font-size: 12px;
 		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
@@ -449,7 +449,7 @@ onDestroy(() => {
 
 	.minimap-content canvas {
 		display: block;
-		border-radius: 0 0 4px 4px;
+		border-radius: 0;
 	}
 
 	.resize-handle {
@@ -460,7 +460,7 @@ onDestroy(() => {
 		height: 16px;
 		cursor: se-resize;
 		background: linear-gradient(135deg, transparent 50%, rgba(255, 255, 255, 0.3) 50%);
-		border-radius: 0 0 4px 0;
+		border-radius: 0;
 	}
 
 	.minimap-panel.collapsed {
diff --git a/src/components/ui/MobileControls.svelte b/src/components/ui/MobileControls.svelte
index f911539..3f4525f 100644
--- a/src/components/ui/MobileControls.svelte
+++ b/src/components/ui/MobileControls.svelte
@@ -176,7 +176,7 @@ function handleClearMeasurements() {
 			<!-- Fill/Outline Toggle -->
 			<button class="menu-item" onclick={handleToggleFill} title="Toggle Fill/Outline (O)">
 				<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-					<rect x="3" y="3" width="18" height="18" rx="2"/>
+					<rect x="3" y="3" width="18" height="18" rx="0"/>
 					<path d="M9 9h6v6H9z"/>
 				</svg>
 				<span>Fill/Outline</span>
@@ -204,8 +204,8 @@ function handleClearMeasurements() {
 			<!-- Minimap Toggle -->
 			<button class="menu-item" onclick={handleToggleMinimap} class:active={minimapVisible} title="Toggle Minimap (M)">
 				<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-					<rect x="3" y="3" width="18" height="18" rx="2"/>
-					<rect x="13" y="13" width="6" height="6" rx="1"/>
+					<rect x="3" y="3" width="18" height="18" rx="0"/>
+					<rect x="13" y="13" width="6" height="6" rx="0"/>
 				</svg>
 				<span>Minimap</span>
 			</button>
@@ -403,7 +403,7 @@ function handleClearMeasurements() {
 		padding: 12px 16px;
 		background: rgba(30, 30, 30, 0.95);
 		border: 1px solid rgba(255, 255, 255, 0.1);
-		border-radius: 8px;
+		border-radius: 0;
 		color: #ffffff;
 		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 		font-size: 14px;
@@ -462,7 +462,7 @@ function handleClearMeasurements() {
 		padding: 10px 14px;
 		background: rgba(20, 20, 20, 0.95);
 		border: 1px solid rgba(255, 255, 255, 0.08);
-		border-radius: 6px;
+		border-radius: 0;
 		color: rgba(255, 255, 255, 0.9);
 		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 		font-size: 13px;
@@ -498,7 +498,7 @@ function handleClearMeasurements() {
 	.fab {
 		width: 56px;
 		height: 56px;
-		border-radius: 50%;
+		border-radius: 0;
 		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 		border: none;
 		color: white;
diff --git a/src/components/ui/ParticipantList.svelte b/src/components/ui/ParticipantList.svelte
index ee11c6b..fa7f1b7 100644
--- a/src/components/ui/ParticipantList.svelte
+++ b/src/components/ui/ParticipantList.svelte
@@ -254,7 +254,7 @@ function cancelTransfer() {
 		max-height: 300px;
 		background: rgba(0, 0, 0, 0.9);
 		color: #ccc;
-		border-radius: 4px;
+		border-radius: 0;
 		font-family: monospace;
 		font-size: 12px;
 		/* z-index set via inline style from panelZIndexStore */
@@ -327,7 +327,7 @@ function cancelTransfer() {
 		align-items: center;
 		gap: 8px;
 		padding: 6px 4px;
-		border-radius: 3px;
+		border-radius: 0;
 	}
 
 	.participant-item:hover {
@@ -337,7 +337,7 @@ function cancelTransfer() {
 	.color-indicator {
 		width: 12px;
 		height: 12px;
-		border-radius: 50%;
+		border-radius: 0;
 		flex-shrink: 0;
 		border: 1px solid rgba(255, 255, 255, 0.2);
 	}
@@ -361,7 +361,7 @@ function cancelTransfer() {
 		font-size: 10px;
 		font-weight: 600;
 		padding: 2px 6px;
-		border-radius: 3px;
+		border-radius: 0;
 		background-color: #4a9eff;
 		color: #fff;
 		text-transform: uppercase;
@@ -370,7 +370,7 @@ function cancelTransfer() {
 	.make-host-btn {
 		font-size: 10px;
 		padding: 2px 6px;
-		border-radius: 3px;
+		border-radius: 0;
 		background: #333;
 		color: #aaa;
 		border: 1px solid #555;
@@ -438,7 +438,7 @@ function cancelTransfer() {
 	.dialog-panel {
 		background: #1a1a1a;
 		border: 1px solid #444;
-		border-radius: 8px;
+		border-radius: 0;
 		padding: 1.5rem;
 		max-width: 400px;
 		width: 90%;
@@ -472,7 +472,7 @@ function cancelTransfer() {
 		font-size: 0.875rem;
 		font-weight: 500;
 		border: none;
-		border-radius: 6px;
+		border-radius: 0;
 		cursor: pointer;
 		transition: all 0.2s;
 	}
diff --git a/src/components/ui/PerformancePanel.svelte b/src/components/ui/PerformancePanel.svelte
index 162ee0e..7cae1d2 100644
--- a/src/components/ui/PerformancePanel.svelte
+++ b/src/components/ui/PerformancePanel.svelte
@@ -416,7 +416,7 @@ function formatDimension(um: number): string {
 		position: fixed;
 		background: rgba(0, 0, 0, 0.85);
 		border: 1px solid #444;
-		border-radius: 4px;
+		border-radius: 0;
 		padding: 12px;
 		font-family: monospace;
 		font-size: 11px;
diff --git a/src/components/ui/UnitSelectionDialog.svelte b/src/components/ui/UnitSelectionDialog.svelte
index 8a589ec..e5f3ab5 100644
--- a/src/components/ui/UnitSelectionDialog.svelte
+++ b/src/components/ui/UnitSelectionDialog.svelte
@@ -89,7 +89,7 @@ function handleKeydown(e: KeyboardEvent) {
 	.dialog-content {
 		background: #1e1e1e;
 		border: 1px solid #3a3a3a;
-		border-radius: 8px;
+		border-radius: 0;
 		padding: 24px;
 		max-width: 500px;
 		width: 90%;
@@ -123,7 +123,7 @@ function handleKeydown(e: KeyboardEvent) {
 		padding: 12px;
 		background: #2a2a2a;
 		border: 1px solid #3a3a3a;
-		border-radius: 4px;
+		border-radius: 0;
 		cursor: pointer;
 		transition: all 0.2s;
 	}
@@ -151,7 +151,7 @@ function handleKeydown(e: KeyboardEvent) {
 	.btn {
 		padding: 10px 20px;
 		border: none;
-		border-radius: 4px;
+		border-radius: 0;
 		font-size: 14px;
 		font-weight: 500;
 		cursor: pointer;
diff --git a/src/components/viewer/ViewerCanvas.svelte b/src/components/viewer/ViewerCanvas.svelte
index 41a697c..ae42638 100644
--- a/src/components/viewer/ViewerCanvas.svelte
+++ b/src/components/viewer/ViewerCanvas.svelte
@@ -980,7 +980,7 @@ function toggleMinimap() {
 		padding: 12px 20px;
 		background: rgba(78, 205, 196, 0.95);
 		border: 1px solid rgba(255, 255, 255, 0.3);
-		border-radius: 24px;
+		border-radius: 0;
 		color: #ffffff;
 		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 		font-size: 14px;
@@ -1015,7 +1015,7 @@ function toggleMinimap() {
 		padding: 8px 12px;
 		background: rgba(74, 158, 255, 0.9);
 		color: white;
-		border-radius: 6px;
+		border-radius: 0;
 		font-family: system-ui, -apple-system, sans-serif;
 		font-size: 13px;
 		font-weight: 500;
@@ -1069,7 +1069,7 @@ function toggleMinimap() {
 		padding: 8px 12px;
 		background: rgba(0, 188, 212, 0.9);
 		color: white;
-		border-radius: 6px;
+		border-radius: 0;
 		font-family: system-ui, -apple-system, sans-serif;
 		font-size: 13px;
 		font-weight: 500;
@@ -1091,7 +1091,7 @@ function toggleMinimap() {
 		padding: 8px 12px;
 		background: rgba(255, 152, 0, 0.9);
 		color: white;
-		border-radius: 6px;
+		border-radius: 0;
 		font-family: system-ui, -apple-system, sans-serif;
 		font-size: 13px;
 		font-weight: 500;
@@ -1113,7 +1113,7 @@ function toggleMinimap() {
 		padding: 8px 12px;
 		background: rgba(0, 188, 212, 0.9);
 		color: white;
-		border-radius: 6px;
+		border-radius: 0;
 		font-family: system-ui, -apple-system, sans-serif;
 		font-size: 13px;
 		font-weight: 500;

From 88f06483c3e1d1d4c978bd578f12c60f377da95d Mon Sep 17 00:00:00 2001
From: Wentao <jwt625@gmail.com>
Date: Sun, 15 Feb 2026 16:51:31 -0800
Subject: [PATCH 2/2] fix(ui): restore circular loading spinners

---
 src/components/ui/FileUpload.svelte     | 2 +-
 src/components/ui/LoadingOverlay.svelte | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/ui/FileUpload.svelte b/src/components/ui/FileUpload.svelte
index 461b59c..7ad9d8d 100644
--- a/src/components/ui/FileUpload.svelte
+++ b/src/components/ui/FileUpload.svelte
@@ -545,7 +545,7 @@ function triggerFileInput() {
 		height: 24px;
 		border: 2px solid #333;
 		border-top-color: #4a9eff;
-		border-radius: 0;
+		border-radius: 50%;
 		animation: spin 0.8s linear infinite;
 	}
 
diff --git a/src/components/ui/LoadingOverlay.svelte b/src/components/ui/LoadingOverlay.svelte
index 6207230..2d2dbd6 100644
--- a/src/components/ui/LoadingOverlay.svelte
+++ b/src/components/ui/LoadingOverlay.svelte
@@ -39,7 +39,7 @@ const { message, progress }: Props = $props();
 		height: 48px;
 		border: 4px solid #333;
 		border-top-color: #4a9eff;
-		border-radius: 0;
+		border-radius: 50%;
 		animation: spin 1s linear infinite;
 		margin: 0 auto 1rem;
 	}
@@ -77,4 +77,3 @@ const { message, progress }: Props = $props();
 		color: #888;
 	}
 </style>
-