Group GUI controls by camera

frigate_camera_control_bridge/static/app.css

@@ -103,10 +103,9 @@ select {
   gap: 16px;
 }
 
-.action-card {
+.camera-card {
   display: flex;
   min-width: 0;
-  min-height: 388px;
   flex-direction: column;
   overflow: hidden;
   border: 1px solid var(--line);
@@ -142,10 +141,16 @@ select {
   margin-top: 78px;
 }
 
-.visual-badge {
+.visual-stack {
   position: absolute;
   right: 12px;
   bottom: 12px;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.visual-badge {
   display: grid;
   width: 58px;
   height: 58px;
@@ -161,14 +166,17 @@ select {
   height: 38px;
 }
 
-.media-empty .visual-badge {
+.media-empty .visual-stack {
   top: 50%;
   right: auto;
   bottom: auto;
   left: 50%;
+  transform: translate(-50%, -58%);
+}
+
+.media-empty .visual-badge {
   width: 76px;
   height: 76px;
-  transform: translate(-50%, -58%);
   border-color: var(--line);
   background: rgba(255, 255, 255, 0.82);
 }
@@ -197,7 +205,7 @@ select {
   display: flex;
   flex: 1;
   flex-direction: column;
-  gap: 14px;
+  gap: 15px;
   padding: 15px;
 }
 
@@ -213,6 +221,54 @@ h2 {
   overflow-wrap: anywhere;
 }
 
+.camera-count {
+  display: inline-flex;
+  color: var(--muted);
+  font-size: 0.84rem;
+}
+
+.control-stack {
+  display: grid;
+  gap: 11px;
+}
+
+.action-control {
+  display: grid;
+  gap: 10px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 12px;
+  background: #fbfcfe;
+}
+
+.control-head {
+  display: grid;
+  grid-template-columns: 42px minmax(0, 1fr);
+  gap: 10px;
+  align-items: center;
+}
+
+.control-head .visual-badge {
+  width: 42px;
+  height: 42px;
+  border-color: var(--line);
+  background: #ffffff;
+  box-shadow: none;
+}
+
+.control-head .visual-badge svg {
+  width: 28px;
+  height: 28px;
+}
+
+h3 {
+  margin: 0;
+  font-size: 0.94rem;
+  line-height: 1.25;
+  font-weight: 700;
+  overflow-wrap: anywhere;
+}
+
 .action-id {
   display: block;
   max-width: 100%;
@@ -244,15 +300,15 @@ h2 {
 }
 
 .chip-state-on {
-  border-color: #9dd8bd;
-  background: #edfdf5;
-  color: var(--green-dark);
+  border-color: #f2b2aa;
+  background: var(--red-soft);
+  color: var(--red);
 }
 
 .chip-state-off {
-  border-color: #f0b8b4;
-  background: var(--red-soft);
-  color: var(--red);
+  border-color: #9dd8bd;
+  background: #edfdf5;
+  color: var(--green-dark);
 }
 
 .chip-state-unknown {
@@ -291,7 +347,6 @@ h2 {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
   gap: 9px;
-  margin-top: auto;
 }
 
 .command-form {
@@ -341,14 +396,64 @@ h2 {
 }
 
 .cmd-off {
-  border-color: #d7a5a1;
+  border-color: #9dd8bd;
   background: #ffffff;
-  color: var(--red);
+  color: var(--green-dark);
 }
 
 .cmd-off:hover {
-  border-color: var(--red);
-  background: var(--red-soft);
+  border-color: var(--green);
+  background: #edfdf5;
+}
+
+.global-strip {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  min-width: min(100%, 360px);
+}
+
+.global-action {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  width: min(100%, 520px);
+  border: 1px solid #c9d2df;
+  border-radius: 8px;
+  padding: 10px;
+  background: #ffffff;
+  box-shadow: 0 10px 26px rgba(17, 24, 39, 0.08);
+}
+
+.global-main {
+  display: grid;
+  grid-template-columns: 44px minmax(0, 1fr);
+  gap: 10px;
+  align-items: center;
+  min-width: 0;
+}
+
+.global-main .visual-badge {
+  width: 44px;
+  height: 44px;
+  border-color: var(--line);
+  background: #f8fafc;
+  box-shadow: none;
+}
+
+.global-main .visual-badge svg {
+  width: 30px;
+  height: 30px;
+}
+
+.global-action h2 {
+  margin-bottom: 4px;
+  font-size: 0.96rem;
+}
+
+.global-controls {
+  min-width: 120px;
 }
 
 .empty-state {
@@ -371,12 +476,21 @@ h2 {
     flex-direction: column;
   }
 
+  .global-strip,
   .toolbar,
   .language-form {
     width: 100%;
+  }
+
+  .global-strip,
+  .toolbar {
     justify-content: space-between;
   }
 
+  .global-action {
+    width: 100%;
+  }
+
   select {
     max-width: 60%;
   }