diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index ba8d7e6..7be4a41 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -427,7 +427,7 @@ a:hover { text-decoration: underline; }
 /* ============================================================
    MAIN AREA (desktop 3-column)
    ============================================================ */
-.main {
+.app-body {
   display: grid;
   grid-template-columns: var(--leftbar-w) 1fr var(--rightbar-w);
   min-height: 0;
@@ -435,9 +435,9 @@ a:hover { text-decoration: underline; }
   overflow: hidden;
   position: relative;
 }
-.main.left-collapsed { grid-template-columns: 0 1fr var(--rightbar-w); }
-.main.right-collapsed { grid-template-columns: var(--leftbar-w) 1fr 0; }
-.main.both-collapsed { grid-template-columns: 0 1fr 0; }
+.app-body.left-collapsed { grid-template-columns: 0 1fr var(--rightbar-w); }
+.app-body.right-collapsed { grid-template-columns: var(--leftbar-w) 1fr 0; }
+.app-body.both-collapsed { grid-template-columns: 0 1fr 0; }
 
 /* ============================================================
    LEFT SIDEBAR (Desktop tool palette 2-col)
@@ -1230,7 +1230,7 @@ a:hover { text-decoration: underline; }
   .ribbon-btn span { display: none; }
 
   /* Main area: NO left/right desktop columns, canvas + right tab bar */
-  .main {
+  .app-body {
     grid-template-columns: 1fr var(--mobile-right-tab-w);
   }
   .leftbar, .rightbar { display: none; }