feat(calc-01): move controls into a compact top bar

samples/calc-01/index.css

@@ -149,12 +149,32 @@ body {
   pointer-events: none;
 }
 
-.toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 14px;
+.topbar {
   margin-top: 14px;
+  display: grid;
+  grid-template-columns: minmax(120px, 148px) minmax(132px, 160px) 1fr minmax(72px, 88px) minmax(108px, 128px) minmax(72px, 88px);
+  gap: 10px;
+  align-items: stretch;
+}
+
+.topbar-cell,
+.topbar-status {
+  min-height: 70px;
+  background: rgba(6, 10, 16, 0.18);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 16px;
+  padding: 10px;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
+}
+
+.topbar-label,
+.mode-select > span {
+  display: block;
+  margin-bottom: 6px;
+  font-size: 11px;
+  color: #d9e1ec;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
 }
 
 .status {
@@ -163,6 +183,7 @@ body {
   gap: 8px;
   color: #edf2fa;
   font-size: 12px;
+  align-content: center;
 }
 
 .pill {
@@ -175,11 +196,33 @@ body {
 .mode-select {
   display: grid;
   gap: 6px;
-  min-width: 148px;
+  min-width: 0;
   font-size: 12px;
-  color: #d9e1ec;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
+}
+
+.mode-cell select {
+  width: 100%;
+}
+
+.const-buttons {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.action-cell {
+  display: flex;
+  align-items: stretch;
+}
+
+.action-cell > button,
+.const-buttons > button {
+  width: 100%;
+}
+
+.topbar-status {
+  display: flex;
+  align-items: center;
 }
 
 select,
@@ -225,17 +268,17 @@ select {
 
 .functions-grid {
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  grid-template-rows: repeat(5, 56px);
+  grid-template-rows: repeat(4, 56px);
 }
 
 .numbers-grid {
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  grid-template-rows: repeat(5, 56px);
+  grid-template-rows: repeat(4, 56px);
 }
 
 .operators-grid {
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  grid-template-rows: repeat(5, 56px);
+  grid-template-rows: repeat(4, 56px);
 }
 
 .key-spacer {
@@ -299,6 +342,12 @@ button:active {
   line-height: 1.5;
 }
 
+@media (max-width: 980px) {
+  .topbar {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
 @media (max-width: 860px) {
   .keyboard-layout {
     grid-template-columns: 1fr;
@@ -320,19 +369,14 @@ button:active {
     align-items: flex-start;
   }
 
-  .toolbar {
-    flex-direction: column;
-  }
-
-  .mode-select {
-    min-width: 0;
-    width: 100%;
+  .topbar {
+    grid-template-columns: 1fr;
   }
 
   .functions-grid,
   .numbers-grid,
   .operators-grid {
-    grid-template-rows: repeat(5, 52px);
+    grid-template-rows: repeat(4, 52px);
   }
 }