update sounds ang transtions

www/style.css

@@ -1051,6 +1051,22 @@ canvas {
   min-height: 0;
   height: 100%;
 }
+.content.content--transitions {
+  grid-template-columns: minmax(0, 1fr);
+  align-items: stretch;
+  align-content: stretch;
+  max-width: none;
+  width: 100%;
+  padding: 0;
+  overflow: hidden;
+  background: #fff;
+}
+.content.content--transitions > #pageTransitions {
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+}
 .content.content--dashboard {
   grid-template-columns: minmax(0, 1fr);
   max-width: none;
@@ -1070,8 +1086,169 @@ canvas {
   grid-template-columns: var(--leftPaneW, 460px) 10px 1fr;
 }
 
+.content.content--sounds {
+  grid-template-columns: minmax(0, 1fr);
+  align-items: stretch;
+  align-content: stretch;
+  max-width: none;
+  width: 100%;
+  padding: 0;
+  overflow: hidden;
+  background: #fff;
+}
+.content.content--sounds > #pageSounds {
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+}
+
 .missionsPage { min-width: 0; width: 100%; }
-.soundsPage { min-width: 0; width: 100%; }
+
+.soundVolumeRow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.soundVolumeRow input[type="range"] {
+  flex: 1;
+  min-width: 0;
+}
+
+.soundVolumeRow output {
+  min-width: 2.5em;
+  font-size: 14px;
+  font-weight: 600;
+  text-align: right;
+}
+
+.mapsMirFieldHint {
+  font-size: 12px;
+  color: #888;
+  line-height: 1.4;
+}
+
+.soundSystemBadge {
+  margin: -8px 0 12px;
+  padding: 4px 8px;
+  display: inline-block;
+  font-size: 12px;
+  font-weight: 600;
+  color: #555;
+  background: #f0f0f0;
+  border: 1px solid #ddd;
+}
+
+.soundListenBtn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.soundEditAudioActions {
+  flex-wrap: wrap;
+}
+
+body.auth-readonly-sounds #soundCreateBtn { display: none !important; }
+
+body.auth-readonly-sounds .soundsMirRow .soundEditBtn { pointer-events: none; opacity: 0.55; }
+
+#pageSounds {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+#soundsListView {
+  flex: 1;
+  min-height: 0;
+}
+
+.soundsMirListWrap {
+  width: 100%;
+  align-self: stretch;
+  border: 1px solid #ddd;
+  background: #fff;
+  box-sizing: border-box;
+}
+
+.soundsMirList {
+  display: flex;
+  flex-direction: column;
+}
+
+.soundsMirRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 12px 16px;
+  border-top: 1px solid #f0f0f0;
+  min-height: 56px;
+  box-sizing: border-box;
+}
+
+.soundsMirRow:first-child {
+  border-top: none;
+}
+
+.soundsMirRow:hover {
+  background: #f9fbff;
+}
+
+.soundsMirRowMain {
+  min-width: 0;
+  flex: 1;
+}
+
+.soundsMirRowTitle {
+  display: block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  font: inherit;
+  font-size: 15px;
+  font-weight: 700;
+  color: #222;
+  text-align: left;
+  cursor: pointer;
+}
+
+.soundsMirRowTitle:hover:not(:disabled) {
+  color: var(--mir-blue, #337ab7);
+  text-decoration: underline;
+}
+
+.soundsMirRowTitle:disabled {
+  cursor: default;
+  color: #222;
+  text-decoration: none;
+}
+
+.soundsMirRowMeta {
+  margin-top: 4px;
+  font-size: 13px;
+  color: #777;
+  line-height: 1.35;
+}
+
+.soundsMirRowActions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.soundsMirRowActions .mapsMirBtn--outline {
+  min-width: 72px;
+  padding: 6px 14px;
+  font-size: 13px;
+}
+
 .missionList { display: grid; gap: 10px; }
 .missionListItem {
   display: grid;
@@ -2951,6 +3128,19 @@ body.auth-readonly-integrations .integrationToolbar .btn.primary { pointer-event
   overflow: hidden;
 }
 
+#pageTransitions {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+#transitionsListView {
+  flex: 1;
+  min-height: 0;
+}
+
 #mapsListView[hidden],
 #mapsCreateView[hidden],
 #mapEditorView[hidden] {
@@ -3268,6 +3458,13 @@ body.auth-readonly-integrations .integrationToolbar .btn.primary { pointer-event
 
 .mapsMirBtn--green:hover { background: var(--mir-green-hover, #4cae4c); }
 
+.mapsMirBtn--primary {
+  background: var(--mir-green, #5cb85c);
+  color: #fff;
+}
+
+.mapsMirBtn--primary:hover { background: var(--mir-green-hover, #4cae4c); }
+
 .mapsMirBtn--outline {
   background: #fff;
   color: #555;
@@ -3387,6 +3584,28 @@ body.auth-readonly-integrations .integrationToolbar .btn.primary { pointer-event
 .mapsMirTable thead th:nth-child(2) { width: 22%; }
 .mapsMirThFunctions { width: 148px; text-align: right !important; }
 
+.mapsMirTable--transitions thead th.transMirThIcon { width: 52px; }
+.mapsMirTable--transitions thead th:nth-child(2) { width: 20%; }
+.mapsMirTable--transitions thead th:nth-child(3) { width: 20%; }
+.mapsMirTable--transitions thead th:nth-child(4) { width: 22%; }
+.mapsMirTable--transitions thead th:nth-child(5) { width: 16%; }
+
+.transMirIcon {
+  color: var(--mir-green, #5cb85c);
+  display: block;
+}
+
+.transMirCellIcon {
+  width: 52px;
+  text-align: center;
+  padding-left: 12px !important;
+  padding-right: 8px !important;
+}
+
+.transMirNameLink {
+  font-weight: 600;
+}
+
 .mapsMirSiteRow td {
   padding: 12px 16px 8px;
   font-weight: 700;
@@ -4912,14 +5131,11 @@ body.auth-readonly-maps-page #mapsImportSiteBtn { display: none !important; }
 }
 
 /* Setup → Sounds: MiR-style square corners */
-#pageSounds .card,
-#pageSounds .missionListItem,
-#pageSounds .btn,
-#pageSounds button,
-#pageSounds input,
-#pageSounds textarea,
-#pageSounds #soundEditDialog.mapsMirDialog,
+#pageSounds .soundsMirRow,
+#pageSounds .soundsMirListWrap,
 #pageSounds .mapsMirBtn,
+#pageSounds .mapsMirIconBtn,
+#pageSounds #soundEditDialog.mapsMirDialog,
 #pageSounds .mapsMirField input,
 #pageSounds .mapsMirField textarea {
   border-radius: 0;