update

public/assets/css/app.css

@@ -79,7 +79,7 @@ body {
   display: grid;
   grid-template-columns: 260px 1fr;
   gap: 24px;
-  padding: 24px;
+  padding: 0 24px 24px;
 }
 
 .app-sidebar {
@@ -105,10 +105,17 @@ body {
   color: var(--text);
   font-weight: 700;
 }
+.sidebar-collapse { display: none; }
 
 .sidebar-collapsed .app-shell {
   grid-template-columns: 72px 1fr;
 }
+.sidebar-collapsed .sidebar-toggle {
+  padding: 6px 8px;
+  font-size: 14px;
+}
+.sidebar-collapsed .sidebar-icon { display: none; }
+.sidebar-collapsed .sidebar-collapse { display: inline; }
 .sidebar-collapsed .app-sidebar .brand-text,
 .sidebar-collapsed .app-sidebar .nav-section,
 .sidebar-collapsed .app-sidebar .nav-link {
@@ -187,10 +194,15 @@ body {
 }
 
 .topbar {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  margin: 0;
+  width: 100%;
   background: var(--panel);
   border: 1px solid var(--line);
-  border-radius: 16px;
-  padding: 16px 20px;
+  border-radius: 0;
+  padding: 16px 24px;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -299,12 +311,12 @@ body {
 }
 
 @media (max-width: 1100px) {
-  .app-shell { grid-template-columns: 1fr; }
+  .app-shell { grid-template-columns: 1fr; padding: 0 18px 18px; }
   .app-sidebar { position: relative; top: 0; }
 }
 @media (max-width: 720px) {
   .grid { grid-template-columns: 1fr; }
-  .app-shell { padding: 18px; }
+  .topbar { flex-direction: column; align-items: flex-start; }
 }
 
 /* Minimal Tailwind-like utility support for existing templates */