diff --git a/src/app.css b/src/app.css
index 356f8ed..9f5830c 100644
--- a/src/app.css
+++ b/src/app.css
@@ -6475,6 +6475,7 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
   display: grid;
   place-items: center;
   min-width: 0;
+  overflow: hidden;
   color: var(--color-primary);
   background: var(--color-surface-dim);
 }
@@ -6496,7 +6497,7 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
   border: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
   border-radius: 50%;
   background: var(--color-surface-solid);
-  box-shadow: 0 0 0 4px var(--color-surface-dim);
+  box-shadow: 0 0 0 2px var(--color-surface-dim);
 }
 .status-lane-head {
   display: flex;
diff --git a/src/lib/components/RepoLoadingOverlay.svelte b/src/lib/components/RepoLoadingOverlay.svelte
index b64d6bc..0f7972d 100644
--- a/src/lib/components/RepoLoadingOverlay.svelte
+++ b/src/lib/components/RepoLoadingOverlay.svelte
@@ -41,17 +41,24 @@
     display: grid;
     place-items: center;
     overflow: hidden;
-    background: linear-gradient(135deg, #070a10 0%, #0c111a 48%, #090e16 100%);
+    background:
+      radial-gradient(
+        circle at 50% 42%,
+        color-mix(in srgb, var(--color-accent) 13%, transparent),
+        transparent 38%
+      ),
+      var(--app-dialog-backdrop);
+    backdrop-filter: blur(5px);
     animation: overlay-in 180ms ease;
   }
 
   .repo-loading-grid {
     position: absolute;
     inset: 0;
-    opacity: 0.28;
+    opacity: 0.34;
     background-image:
-      linear-gradient(rgba(111, 140, 255, 0.09) 1px, transparent 1px),
-      linear-gradient(90deg, rgba(77, 182, 214, 0.07) 1px, transparent 1px);
+      linear-gradient(color-mix(in srgb, var(--color-primary) 9%, transparent) 1px, transparent 1px),
+      linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 8%, transparent) 1px, transparent 1px);
     background-size: 42px 42px;
     mask-image: radial-gradient(circle at center, black 0%, transparent 68%);
     animation: grid-drift 10s linear infinite;
@@ -62,23 +69,21 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 18px;
-    width: min(420px, calc(100vw - 42px));
-    padding: 30px 34px 28px;
-    border: 1px solid rgba(90, 111, 154, 0.28);
-    border-radius: 16px;
+    gap: 14px;
+    width: min(360px, calc(100vw - 32px));
+    padding: 26px 30px 24px;
+    border: 1px solid var(--color-border-input);
+    border-radius: 14px;
     background:
-      linear-gradient(180deg, rgba(23, 29, 43, 0.92), rgba(12, 17, 27, 0.94)),
-      var(--color-surface-raised);
-    box-shadow:
-      0 26px 78px rgba(0, 0, 0, 0.54),
-      inset 0 1px 0 rgba(255, 255, 255, 0.05);
+      var(--app-panel-highlight),
+      var(--app-dialog-bg);
+    box-shadow: var(--app-dialog-shadow);
   }
 
   .repo-loading-mark {
     position: relative;
-    width: 168px;
-    height: 168px;
+    width: 116px;
+    height: 116px;
     display: grid;
     place-items: center;
     isolation: isolate;
@@ -86,25 +91,25 @@
 
   .repo-loading-halo {
     position: absolute;
-    inset: 10px;
-    border: 1px solid rgba(111, 140, 255, 0.22);
-    border-radius: 34px;
+    inset: 8px;
+    border: 1px solid color-mix(in srgb, var(--color-primary) 34%, transparent);
+    border-radius: 24px;
     transform: rotate(45deg);
   }
   .repo-loading-halo.halo-one {
     animation: halo-breathe 2.4s ease-in-out infinite;
   }
   .repo-loading-halo.halo-two {
-    inset: 24px;
-    border-color: rgba(77, 182, 214, 0.24);
+    inset: 18px;
+    border-color: color-mix(in srgb, var(--color-accent) 38%, transparent);
     animation: halo-breathe 2.4s ease-in-out infinite reverse;
   }
 
   .repo-loading-traces {
     position: absolute;
-    inset: -18px;
-    width: 204px;
-    height: 204px;
+    inset: -14px;
+    width: 144px;
+    height: 144px;
     overflow: visible;
     z-index: 0;
   }
@@ -114,18 +119,18 @@
     stroke-linecap: round;
     stroke-dasharray: 165;
     stroke-dashoffset: 165;
-    filter: drop-shadow(0 0 8px rgba(77, 182, 214, 0.32));
+    filter: drop-shadow(0 0 7px color-mix(in srgb, var(--color-accent) 38%, transparent));
     animation: trace-draw 2.6s ease-in-out infinite;
   }
   .repo-loading-traces .trace-main {
-    stroke: #6f8cff;
+    stroke: var(--color-primary);
   }
   .repo-loading-traces .trace-branch {
-    stroke: #4db6d6;
+    stroke: var(--color-accent);
     animation-delay: 0.28s;
   }
   .repo-loading-traces .trace-cut {
-    stroke: rgba(177, 186, 208, 0.42);
+    stroke: color-mix(in srgb, var(--color-ink-muted) 52%, transparent);
     stroke-dasharray: 128;
     stroke-dashoffset: 128;
     animation-delay: 0.55s;
@@ -134,12 +139,12 @@
   .repo-loading-icon {
     position: relative;
     z-index: 1;
-    width: 132px;
-    height: 132px;
+    width: 82px;
+    height: 82px;
     object-fit: contain;
     filter:
-      drop-shadow(0 18px 24px rgba(0, 0, 0, 0.55))
-      drop-shadow(0 0 18px rgba(77, 182, 214, 0.2));
+      drop-shadow(0 10px 16px color-mix(in srgb, var(--color-ink) 24%, transparent))
+      drop-shadow(0 0 14px color-mix(in srgb, var(--color-accent) 24%, transparent));
     animation: icon-float 2.4s ease-in-out infinite;
   }
 
@@ -153,16 +158,16 @@
 
   .repo-loading-label {
     color: var(--color-ink);
-    font-size: 15px;
-    font-weight: 800;
+    font-size: 14px;
+    font-weight: 750;
   }
 
   .repo-loading-name {
-    max-width: 260px;
+    max-width: 250px;
     overflow: hidden;
     color: var(--color-ink-faint);
     font-family: var(--font-mono);
-    font-size: 12.5px;
+    font-size: 12px;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -172,60 +177,20 @@
     width: min(230px, 100%);
     height: 4px;
     overflow: hidden;
+    border: 1px solid var(--color-border-subtle);
     border-radius: 999px;
-    background: rgba(111, 140, 255, 0.14);
+    background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface-dim));
   }
   .repo-loading-bar span {
     position: absolute;
     inset: 0;
     width: 46%;
     border-radius: inherit;
-    background: linear-gradient(90deg, transparent, #6f8cff 40%, #4db6d6 74%, transparent);
-    box-shadow: 0 0 16px rgba(77, 182, 214, 0.26);
+    background: linear-gradient(90deg, transparent, var(--color-primary) 40%, var(--color-accent) 74%, transparent);
+    box-shadow: 0 0 14px color-mix(in srgb, var(--color-accent) 32%, transparent);
     animation: bar-slide 1.35s ease-in-out infinite;
   }
 
-  :global(:root[data-theme="light"]) .repo-loading {
-    background:
-      radial-gradient(circle at 50% 42%, rgba(49, 95, 214, 0.12), transparent 34%),
-      linear-gradient(135deg, #f7f9fd 0%, #eef3f9 48%, #f8fafc 100%);
-  }
-
-  :global(:root[data-theme="light"]) .repo-loading-grid {
-    opacity: 0.38;
-    background-image:
-      linear-gradient(rgba(49, 95, 214, 0.1) 1px, transparent 1px),
-      linear-gradient(90deg, rgba(15, 143, 181, 0.08) 1px, transparent 1px);
-  }
-
-  :global(:root[data-theme="light"]) .repo-loading-card {
-    border-color: rgba(61, 89, 142, 0.2);
-    background:
-      linear-gradient(180deg, rgba(255,255,255,0.96), rgba(244,247,252,0.94)),
-      var(--color-surface-raised);
-    box-shadow:
-      0 26px 72px rgba(28,44,74,0.18),
-      inset 0 1px 0 rgba(255,255,255,0.9);
-  }
-
-  :global(:root[data-theme="light"]) .repo-loading-traces .trace {
-    filter: drop-shadow(0 0 8px rgba(49,95,214,0.22));
-  }
-
-  :global(:root[data-theme="light"]) .repo-loading-traces .trace-cut {
-    stroke: rgba(49,95,214,0.34);
-  }
-
-  :global(:root[data-theme="light"]) .repo-loading-icon {
-    filter:
-      drop-shadow(0 18px 24px rgba(28,44,74,0.2))
-      drop-shadow(0 0 18px rgba(49,95,214,0.18));
-  }
-
-  :global(:root[data-theme="light"]) .repo-loading-bar {
-    background: rgba(49,95,214,0.12);
-  }
-
   @keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
   @keyframes grid-drift { to { transform: translate3d(42px, 42px, 0); } }
   @keyframes icon-float {
@@ -254,4 +219,11 @@
     .repo-loading-bar span { animation: none; }
     .repo-loading-traces .trace { stroke-dashoffset: 0; opacity: 0.72; }
   }
+
+  @media (max-width: 520px) {
+    .repo-loading-card {
+      width: calc(100vw - 20px);
+      padding: 22px 20px 20px;
+    }
+  }
 </style>