diff --git a/frontend/index.html b/frontend/index.html
index f399367..529d6dd 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -94,7 +94,7 @@
             box-shadow: 0 1px 0 0 var(--tab-bg);
         }
 
-        /* ── Linux Chrome ── */
+        /* ── Chrome (Linux + Mac) ── */
         /* Inactive: always inset dimensions, separator via ::before */
         .browser-chrome .tab {
             border-radius: 8px;
@@ -134,6 +134,84 @@
             box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1);
         }
 
+        /* ── Windows Chrome / Edge — rounded top only, more angular ── */
+        .os-windows.browser-chrome .tab,
+        .os-windows.browser-edge .tab {
+            border-radius: 0;
+            margin: 3px 2px;
+            padding: 3px 12px;
+            height: 30px;
+            position: relative;
+        }
+
+        .os-windows.browser-chrome .tab::before,
+        .os-windows.browser-edge .tab::before {
+            content: "";
+            position: absolute;
+            left: -2px;
+            top: 25%;
+            height: 50%;
+            width: 1px;
+            background: var(--tab-border);
+        }
+
+        .os-windows.browser-chrome .tab:hover::before,
+        .os-windows.browser-chrome .tab-active::before,
+        .os-windows.browser-chrome .tab:hover + .tab::before,
+        .os-windows.browser-chrome .tab-active + .tab::before,
+        .os-windows.browser-edge .tab:hover::before,
+        .os-windows.browser-edge .tab-active::before,
+        .os-windows.browser-edge .tab:hover + .tab::before,
+        .os-windows.browser-edge .tab-active + .tab::before {
+            background: transparent;
+        }
+
+        .os-windows.browser-chrome .tab:hover,
+        .os-windows.browser-edge .tab:hover {
+            background: var(--tab-hover);
+            border-radius: 8px 8px 0 0;
+        }
+
+        .os-windows.browser-chrome .tab-active,
+        .os-windows.browser-chrome .tab-active:hover,
+        .os-windows.browser-edge .tab-active,
+        .os-windows.browser-edge .tab-active:hover {
+            background: var(--tab-bg);
+            border-radius: 8px 8px 0 0;
+            box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1);
+        }
+
+        /* ── Safari (Mac only) ── */
+        /* Compact, flat, evenly spaced, no icons on inactive tabs */
+        .browser-safari .tab {
+            border-radius: 6px;
+            margin: 0 1px;
+            height: 28px;
+            padding: 4px 10px;
+            min-width: 80px;
+        }
+
+        .browser-safari .tab .tab-icon {
+            display: none;
+        }
+
+        .browser-safari .tab:hover {
+            background: var(--tab-hover);
+            border-radius: 6px;
+        }
+
+        /* Selected: subtle white pill, show icon */
+        .browser-safari .tab-active,
+        .browser-safari .tab-active:hover {
+            background: var(--tab-bg);
+            border-radius: 6px;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        }
+
+        .browser-safari .tab-active .tab-icon {
+            display: inline;
+        }
+
         .tab-about .tab-title {
             font-weight: 600;
         }
@@ -219,6 +297,16 @@
             border-radius: 8px;
         }
 
+        /* Safari: centered URL bar, more minimal */
+        .browser-safari .iframe-urlbar {
+            justify-content: center;
+            border-radius: 8px;
+        }
+
+        .browser-safari .iframe-urlbar .url-title {
+            display: none;
+        }
+
         .iframe-urlbar .tab-icon {
             flex-shrink: 0;
         }