diff --git a/frontend/src/components/Transport/TransportControls.tsx b/frontend/src/components/Transport/TransportControls.tsx
index 1da5b98..aede9a3 100644
--- a/frontend/src/components/Transport/TransportControls.tsx
+++ b/frontend/src/components/Transport/TransportControls.tsx
@@ -129,7 +129,7 @@ export function TransportControls() {
 
   return (
     <div
-      className="flex flex-col gap-1.5 pt-2 pb-2 flex-shrink-0 select-none"
+      className="b2b-transport flex flex-col gap-1.5 pt-2 pb-2 flex-shrink-0 select-none"
       style={{
         borderTop: "1px solid var(--color-border)",
         background: "var(--color-surface)",
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 0fa6f45..5dc3813 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -319,3 +319,61 @@ input[type="range"]::-moz-range-progress {
 [data-theme="dark"] .sheet-dark-invert svg {
   filter: invert(1);
 }
+
+.b2b-shell {
+  height: 100vh;
+  height: 100dvh;
+  touch-action: manipulation;
+}
+
+@media (max-width: 768px) {
+  .b2b-header {
+    height: 82px !important;
+    align-items: flex-start !important;
+    padding-top: 6px;
+  }
+
+  .b2b-header > div:nth-of-type(2) {
+    top: auto !important;
+    bottom: 5px;
+    width: calc(100% - 16px);
+    justify-content: center;
+  }
+
+  .b2b-header > div:nth-of-type(2) button {
+    padding-left: 9px !important;
+    padding-right: 9px !important;
+  }
+
+  .b2b-transport {
+    padding-left: 8px !important;
+    padding-right: 8px !important;
+  }
+
+  .b2b-status {
+    display: none !important;
+  }
+
+  .t-btn {
+    min-width: 40px;
+    height: 40px;
+  }
+}
+
+@media (max-height: 520px) and (orientation: landscape) {
+  .b2b-header {
+    height: 44px !important;
+    align-items: center !important;
+    padding-top: 0;
+  }
+
+  .b2b-header > a > span {
+    display: none;
+  }
+
+  .b2b-header > div:nth-of-type(2) {
+    top: 50% !important;
+    bottom: auto;
+    width: auto;
+  }
+}
diff --git a/frontend/src/views/PracticeView.tsx b/frontend/src/views/PracticeView.tsx
index e7ec178..12b1501 100644
--- a/frontend/src/views/PracticeView.tsx
+++ b/frontend/src/views/PracticeView.tsx
@@ -137,7 +137,7 @@ export function PracticeView() {
 
   return (
     <div
-      className="flex flex-col h-screen"
+      className="b2b-shell flex flex-col h-screen"
       onDragOver={(e) => e.preventDefault()}
       onDrop={handleDrop}
     >
@@ -148,7 +148,7 @@ export function PracticeView() {
           - Right group: marginLeft:auto, pushes to far right
           This pattern is immune to left/right asymmetry that breaks grid-based centering. */}
       <header
-        className="flex-shrink-0 flex items-center"
+        className="b2b-header flex-shrink-0 flex items-center"
         style={{
           position: "relative",
           height: 44,
@@ -580,7 +580,7 @@ function StatusBar() {
 
   return (
     <div
-      className="flex items-center gap-3 border-t flex-shrink-0 min-w-0"
+      className="b2b-status flex items-center gap-3 border-t flex-shrink-0 min-w-0"
       style={{
         height: 26,
         background: "var(--color-surface)",