diff --git a/resources/css/app.css b/resources/css/app.css
index 4cab827a4a..7a03f29417 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -214,6 +214,22 @@
     box-shadow: none;
 }
 
+/* Appearance → Style → Flat (data-nav-items="flat") removes the raised edge
+   everywhere, not only in the sidebar: the depth color goes transparent (the
+   !important beats the theme overrides of the variable) and the press uses
+   the scale feedback of .icon-button instead of the lift and sink. */
+html[data-nav-items="flat"] :is(.button, .split-action-main, .split-action-caret, .toast-icon) {
+    --button-depth-color: transparent !important;
+}
+
+html[data-nav-items="flat"] :is(.button, .split-action-main, .split-action-caret):not(:disabled):hover {
+    transform: none;
+}
+
+html[data-nav-items="flat"] :is(.button, .split-action-main, .split-action-caret):not(:disabled):active {
+    transform: scale(0.97);
+}
+
 /* Focus border/ring on any form control should ease, not snap. The accent
    focus indicator is a border-color and/or box-shadow (ring) change, which the
    utilities' `transition-colors` did not fully animate. Target the elements
@@ -5806,8 +5822,8 @@ a.command-palette-item:focus-visible {
 /* Navigation items: each sidebar icon sits in a framed 30px tile with the 3D
    depth of .button, like the canvas tool rail. Only the tile reacts; the row
    has no background. Applies to both navigation styles. Appearance →
-   Navigation items → Flat sets data-nav-items="flat" on <html> and turns these
-   rules off, which brings back the plain rows. */
+   Style → Flat sets data-nav-items="flat" on <html> and turns these
+   rules off, which brings back the plain rows (see also the .button rules). */
 html:where(:not([data-nav-items="flat"])) .menu-item:not(.sidebar-toggle) {
     height: 2.25rem;
     padding-left: 0.25rem;
@@ -6602,8 +6618,9 @@ html.dark .toast-card {
 
 /* Toast icon tile: the 3D depth of the sidebar tiles, tinted with the icon color of the toast type. */
 .toast-icon {
+    --button-depth-color: color-mix(in oklab, currentColor 30%, transparent);
     border: 1px solid color-mix(in oklab, currentColor 22%, transparent);
-    box-shadow: 0 2px 0 color-mix(in oklab, currentColor 30%, transparent);
+    box-shadow: 0 2px 0 var(--button-depth-color);
 }
 
 /* Command palette: the purple brand tint of the dark shell. */
diff --git a/resources/js/canvas/deploy/styles.js b/resources/js/canvas/deploy/styles.js
index b05e1fa014..554b2935ca 100644
--- a/resources/js/canvas/deploy/styles.js
+++ b/resources/js/canvas/deploy/styles.js
@@ -95,6 +95,8 @@ const CSS = `
   .cv-item:focus-visible { outline: none; }
   .cv-item:focus-visible i { outline: 1px solid var(--color-accent, currentColor); outline-offset: 2px; }
   .cv-item:active i { transform: translateY(2px); box-shadow: none; }
+  /* Appearance → Style → Flat: no ledge, lift, or press, like app.css .button. */
+  html[data-nav-items="flat"] .cv-item i { --cv-depth: transparent; transform: none; }
   .cv-item b { display: block; font-size: 13px; font-weight: 500; }
   .cv-item small { display: block; color: var(--cv-subtle); font-size: 11.5px; }
 
diff --git a/resources/views/components/theme-controls.blade.php b/resources/views/components/theme-controls.blade.php
index 4db687012e..3bd2b1218c 100644
--- a/resources/views/components/theme-controls.blade.php
+++ b/resources/views/components/theme-controls.blade.php
@@ -163,14 +163,14 @@
     <section class="application-settings-section">
         <div class="application-settings-section-header">
             <div>
-                <h2>Navigation items</h2>
-                <p>Choose how the main sidebar shows its items.</p>
+                <h2>Style</h2>
+                <p>Choose how buttons and sidebar items look.</p>
             </div>
         </div>
         <div class="application-settings-section-body grid gap-3 sm:grid-cols-2">
             @foreach ([
-                ['value' => '3d', 'label' => '3D', 'description' => 'Each icon sits in a raised tile that lifts on hover.'],
-                ['value' => 'flat', 'label' => 'Flat', 'description' => 'Plain rows with a highlight for the current page.'],
+                ['value' => '3d', 'label' => '3D', 'description' => 'Buttons and sidebar icons sit on a raised edge that lifts on hover.'],
+                ['value' => 'flat', 'label' => 'Flat', 'description' => 'No raised edges. Sidebar items are plain rows with a highlight for the current page.'],
             ] as $option)
                 <button type="button" @click="setNavItems('{{ $option['value'] }}')"
                     class="group overflow-hidden rounded-[10px] border border-neutral-200 bg-white text-left transition-[border-color,box-shadow] hover:border-neutral-300 hover:shadow-sm dark:border-white/[0.07] dark:bg-white/[0.05] dark:hover:border-white/[0.12]"