Adjust classic manual selection behavior

style.css

@@ -31,6 +31,13 @@ body[data-active-tab="#tab-wall"] #clear-canvas-btn-top {
 
 #balloon-canvas { touch-action: none; }
 
+.classic-expanded-canvas {
+  height: 130vh !important;
+  min-height: 130vh;
+  overflow: auto;
+}
+
+
 .balloon-canvas {
   background: #fff;
   border-radius: 1rem;
@@ -429,7 +436,7 @@ body[data-active-tab="#tab-wall"] #clear-canvas-btn-top {
   #classic-display,
   #wall-display,
   #balloon-canvas {
-    margin-bottom: 5rem;
+    margin-bottom: 6.5rem;
   }
 
   /* Stack switching: show only the active mobile tab stack across panels */
@@ -464,6 +471,8 @@ body[data-active-tab="#tab-wall"] #clear-canvas-btn-top {
   .swatch.tiny { width: 1.8rem; height: 1.8rem; }
   .select { min-height: 44px; }
   .panel-card { padding: 0.85rem; }
+  .manual-hub { position: sticky; top: 0; z-index: 6; }
+  .manual-detail-stage { min-height: 260px; }
 }
 
 .mobile-action-bar {
@@ -607,6 +616,57 @@ body[data-active-tab="#tab-wall"] #clear-canvas-btn-top {
   box-shadow: 0 0 0 2px rgba(37,99,235,0.18), 0 6px 16px rgba(37,99,235,0.2);
 }
 
+.manual-hub {
+  background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(240,249,255,0.92));
+  border: 1px solid rgba(226,232,240,0.9);
+  border-radius: 1rem;
+  padding: 0.9rem 1rem;
+  box-shadow: 0 12px 28px rgba(15,23,42,0.08);
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+.manual-hub-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+.manual-hub-title { font-weight: 800; color: #0f172a; letter-spacing: -0.015em; }
+.manual-hub-subtitle { font-size: 0.85rem; color: #475569; line-height: 1.3; }
+.manual-hub-actions { display: flex; gap: 0.35rem; }
+.manual-hub-track {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 0.55rem;
+}
+.manual-hub-count { grid-column: 1 / -1; text-align: right; }
+.manual-range {
+  width: 100%;
+  accent-color: #2563eb;
+}
+.manual-detail {
+  display: none;
+}
+.manual-detail-stage { display: none; }
+.manual-detail-empty { display: none; }
+.manual-hub-hint { line-height: 1.4; }
+
+.chip-btn {
+  background: rgba(255,255,255,0.85);
+  border: 1px solid rgba(148,163,184,0.4);
+  border-radius: 999px;
+  padding: 0.45rem 0.75rem;
+  font-weight: 700;
+  font-size: 0.85rem;
+  color: #0f172a;
+  box-shadow: 0 6px 16px rgba(15,23,42,0.08);
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+.chip-btn:active { transform: translateY(1px); }
+.chip-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
+
 .mobile-tabbar {
   position: fixed;
   inset-inline: 0;
@@ -631,7 +691,17 @@ body[data-active-tab="#tab-wall"] #clear-canvas-btn-top {
   #classic-display,
   #wall-display,
   #balloon-canvas {
-    margin-bottom: 5.5rem;
+    margin-bottom: 0;
+    height: calc(100vh - 190px) !important; /* tie to viewport minus header/controls */
+    max-height: calc(100vh - 190px) !important;
+  }
+  /* Keep the main canvas panels above the tabbar/action bar */
+  #canvas-panel,
+  #classic-canvas-panel {
+    padding-bottom: 12vh;
+  }
+  #classic-canvas-panel {
+    padding-bottom: 14vh; /* leave space for action bar */
   }
 }
 .mobile-tabbar .mobile-tab-btn {
@@ -666,6 +736,39 @@ body[data-active-tab="#tab-wall"] #clear-canvas-btn-top {
   transform: translateY(-2px);
 }
 
+.canvas-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: .75rem;
+  padding: .6rem .85rem;
+  border-bottom: 1px solid #e5e7eb;
+  background: linear-gradient(90deg, #f8fafc, #fff);
+  position: sticky;
+  top: 0;
+  z-index: 5;
+}
+.canvas-toolbar .toolbar-left,
+.canvas-toolbar .toolbar-right {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: .5rem;
+}
+.canvas-toolbar button { white-space: nowrap; }
+
+.quad-modal{position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;pointer-events:none;}
+.quad-modal.hidden{display:none;}
+.quad-modal:not(.hidden){pointer-events:auto;}
+.quad-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,0.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
+.quad-modal-panel{position:relative;z-index:1;pointer-events:auto;background:#fff;border-radius:1rem;padding:1rem;box-shadow:0 22px 50px rgba(15,23,42,0.25);width:min(560px,90vw);}
+.quad-modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;}
+.quad-modal-title{font-weight:700;font-size:1rem;color:#0f172a;}
+.quad-modal-body{border:1px solid #e5e7eb;border-radius:.75rem;overflow:hidden;background:#f8fafc;}
+.quad-modal-display{width:100%;height:360px;max-height:70vh;position:relative;background:#fff;perspective:1200px;}
+.quad-modal-display svg{transform-style:preserve-3d;transition:transform 240ms ease, opacity 200ms ease;}
+.quad-modal-display svg{width:100%;height:100%;}
+
 
 @media (min-width: 1024px) {
   .control-sheet {
@@ -673,7 +776,7 @@ body[data-active-tab="#tab-wall"] #clear-canvas-btn-top {
     top: 7rem;
     bottom: auto;
     width: 340px;
-    max-height: calc(100vh - 8rem);
+    max-height: calc(93vh - 8rem);
     border-radius: 1.5rem;
     position: sticky;
     overflow-y: auto;