diff --git a/ui/src/app/title-bar/title-bar.ts b/ui/src/app/title-bar/title-bar.ts
index 3224e23..8cf5f0e 100644
--- a/ui/src/app/title-bar/title-bar.ts
+++ b/ui/src/app/title-bar/title-bar.ts
@@ -11,6 +11,13 @@ import { RpcService } from '../rpc.service';
  * Restore / Close each get their own glyph). Nothing here is styled with
  * Tailwind on purpose — the whole row comes from @layer skin.
  *
+ * `.title-bar` lives on the HOST element, not on an inner div. 7.css couples
+ * the glass treatment with a DIRECT-child selector — `.window.glass >
+ * .title-bar` — and an inner div puts <app-title-bar> in between, so the rule
+ * never matched: the title bar rendered as the opaque fallback with its own
+ * border, visibly disconnected from the frame, instead of the translucent
+ * streaked glass that fuses with it.
+ *
  * Dragging rides on electrobun's preload drag-region classes. Two things
  * electrobun does NOT provide and this component implements:
  *   - double-click to maximize (it only wires mousedown/mouseup)
@@ -19,20 +26,22 @@ import { RpcService } from '../rpc.service';
  */
 @Component({
   selector: 'app-title-bar',
+  host: {
+    class: 'title-bar electrobun-webkit-app-region-drag',
+    '(dblclick)': 'toggle()',
+  },
   template: `
-      <div class="title-bar electrobun-webkit-app-region-drag" (dblclick)="toggle()">
-        <div class="title-bar-text">{{ title() }}</div>
-        <div class="title-bar-controls electrobun-webkit-app-region-no-drag">
-          @if (resizable()) {
-            <button aria-label="Minimize" (click)="minimize()"></button>
-            <button
-              [attr.aria-label]="maximized() ? 'Restore' : 'Maximize'"
-              (click)="toggle()"
-            ></button>
-          }
-          <button aria-label="Close" (click)="closeRequested.emit()"></button>
-        </div>
-      </div>
+    <div class="title-bar-text">{{ title() }}</div>
+    <div class="title-bar-controls electrobun-webkit-app-region-no-drag">
+      @if (resizable()) {
+        <button aria-label="Minimize" (click)="minimize()"></button>
+        <button
+          [attr.aria-label]="maximized() ? 'Restore' : 'Maximize'"
+          (click)="toggle()"
+        ></button>
+      }
+      <button aria-label="Close" (click)="closeRequested.emit()"></button>
+    </div>
   `,
 })
 export class TitleBar {
diff --git a/ui/src/styles.css b/ui/src/styles.css
index 11f73ff..e66010c 100644
--- a/ui/src/styles.css
+++ b/ui/src/styles.css
@@ -641,13 +641,29 @@ body {
 
   /* ---- Window frame ----
      The native window is transparent (chromeOptions in src/bun/windows.ts), so
-     nothing but .window paints an opaque surface. The margin is the gutter the
-     drop shadow falls into — without it the shadow has no room and the frame
-     reads as square. h-screen (100vh) has to shrink by the same amount or the
-     window overflows into a scrollbar. */
+     nothing but .window paints an opaque surface. The margins are the gutter
+     the drop shadow falls into, sized to the shadow's exact extents —
+     `2px 2px 10px 1px` reaches blur+spread-offset = 9px up/left and
+     offset+blur+spread = 13px down/right. An undersized gutter hard-clips a
+     70%-black shadow into a solid dark band around the window ("way too
+     strong"); matched to the extents it falls off to nothing. h-screen (100vh)
+     shrinks by the same totals or the gutter produces a scrollbar. */
   .win7 .window {
-    margin: 6px;
-    height: calc(100vh - 12px);
+    margin: 9px 13px 13px 9px;
+    height: calc(100vh - 22px);
+  }
+
+  /* 7.css's glass layer is `backdrop-filter: blur(4px)` on .window::after —
+     but CSS cannot sample the DESKTOP behind a transparent native window
+     (there is no backdrop to read), and WebKitGTK paints the unsampleable
+     layer BLACK: every see-through part of the glass — the frame ring, the
+     area around the title-bar buttons — composited over black instead of over
+     the desktop. With it off, the real desktop shows through the glass tint,
+     which is closer to Aero than a blur we cannot have. (True blur-behind
+     needs compositor support; GNOME offers none to X11/XWayland clients.) */
+  .win7 .window.glass::after {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
   }
 
   /* Constant row geometry. 7.css gives ONLY tr.highlighted a 1px border, and