From 8f911e29e8f6a5c5e0e12c94cbaac508d8674d58 Mon Sep 17 00:00:00 2001
From: Matt Batchelder <matt@buzzbee.dev>
Date: Mon, 16 Mar 2026 23:04:56 -0400
Subject: [PATCH] feat: Update platform visual styles and dimensions for
 various animations

---
 theme/assets/css/main.css | 372 ++++++++++++++++++++++++++------------
 1 file changed, 258 insertions(+), 114 deletions(-)

diff --git a/theme/assets/css/main.css b/theme/assets/css/main.css
index 009080a..acc33c9 100644
--- a/theme/assets/css/main.css
+++ b/theme/assets/css/main.css
@@ -7744,14 +7744,22 @@ p:last-child { margin-bottom: 0; }
 /* ═══════════════════════════════════════════════════════════
    LOBBY & RECEPTION ANIMATION
    ═══════════════════════════════════════════════════════════ */
-.platform-visual.has-lobby { background: none; display: flex; align-items: center; justify-content: center; }
+.platform-visual.has-lobby {
+  background: none !important;
+  border: none !important;
+  border-radius: 0;
+  aspect-ratio: unset;
+  padding: 0;
+  overflow: visible;
+  box-shadow: none;
+}
 
-.lobby-stage { width: 100%; max-width: 380px; aspect-ratio: 16 / 10; position: relative; }
+.lobby-stage { width: 100%; max-width: 480px; aspect-ratio: 16 / 10; position: relative; margin: 0 auto; }
 .lobby-screen {
   width: 100%; height: 100%;
   background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
-  border-radius: 14px; overflow: hidden; position: relative;
-  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
+  border-radius: 10px; overflow: hidden; position: relative;
+  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
 }
 .lobby-hdr {
   display: flex; justify-content: space-between; align-items: center;
@@ -7802,7 +7810,6 @@ p:last-child { margin-bottom: 0; }
 }
 
 @media (max-width: 640px) {
-  .lobby-stage { max-width: 300px; }
   .lobby-welcome__msg { font-size: 22px; }
   .lobby-amen__grid { gap: 6px; }
 }
@@ -7810,18 +7817,26 @@ p:last-child { margin-bottom: 0; }
 /* ═══════════════════════════════════════════════════════════
    CONFERENCE ROOM PANEL ANIMATION
    ═══════════════════════════════════════════════════════════ */
-.platform-visual.has-conference { background: none; display: flex; align-items: center; justify-content: center; }
+.platform-visual.has-conference {
+  background: none !important;
+  border: none !important;
+  border-radius: 0;
+  aspect-ratio: unset;
+  padding: 0;
+  overflow: visible;
+  box-shadow: none;
+}
 
-.conf-stage { width: 100%; max-width: 320px; }
+.conf-stage { width: 100%; max-width: 400px; margin: 0 auto; }
 .conf-panel {
-  background: #1a1a2e; border-radius: 14px; overflow: hidden;
-  box-shadow: 0 8px 32px rgba(0,0,0,0.25); padding: 20px;
+  background: #0f1117; border: 1px solid #1e2435; border-radius: 12px; overflow: hidden;
+  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04); padding: 20px;
 }
 .conf-panel__room { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 8px; }
 .conf-panel__status { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
 .conf-status__dot {
   width: 10px; height: 10px; border-radius: 50%;
-  background: #d83302; animation: conf-dot-pulse 2s ease-in-out infinite;
+  background: var(--color-primary); animation: conf-dot-pulse 2s ease-in-out infinite;
 }
 .conf-panel__current { margin-bottom: 16px; }
 .conf-current__label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.4); }
@@ -7830,7 +7845,7 @@ p:last-child { margin-bottom: 0; }
 .conf-panel__timeline { margin-bottom: 16px; }
 .conf-tl__bar { height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; }
 .conf-tl__fill {
-  height: 100%; width: 0%; background: #d83302; border-radius: 2px;
+  height: 100%; width: 0%; background: var(--color-primary); border-radius: 2px;
   animation: conf-fill 8s linear infinite;
 }
 .conf-panel__next {
@@ -7856,7 +7871,6 @@ p:last-child { margin-bottom: 0; }
 }
 
 @media (max-width: 640px) {
-  .conf-stage { max-width: 280px; }
   .conf-panel { padding: 16px; }
   .conf-panel__room { font-size: 17px; }
 }
@@ -7864,14 +7878,22 @@ p:last-child { margin-bottom: 0; }
 /* ═══════════════════════════════════════════════════════════
    DAY-PART RETAIL PROMO ANIMATION
    ═══════════════════════════════════════════════════════════ */
-.platform-visual.has-daypart { background: none; display: flex; align-items: center; justify-content: center; }
+.platform-visual.has-daypart {
+  background: none !important;
+  border: none !important;
+  border-radius: 0;
+  aspect-ratio: unset;
+  padding: 0;
+  overflow: visible;
+  box-shadow: none;
+}
 
-.daypart-stage { width: 100%; max-width: 380px; aspect-ratio: 16 / 10; }
+.daypart-stage { width: 100%; max-width: 520px; aspect-ratio: 16 / 10; margin: 0 auto; }
 .daypart-screen {
   width: 100%; height: 100%;
   background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
-  border-radius: 14px; overflow: hidden; position: relative;
-  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
+  border-radius: 10px; overflow: hidden; position: relative;
+  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
 }
 .daypart-hdr {
   display: flex; justify-content: space-between; align-items: center;
@@ -7910,19 +7932,26 @@ p:last-child { margin-bottom: 0; }
 }
 
 @media (max-width: 640px) {
-  .daypart-stage { max-width: 300px; }
   .daypart-promo__title { font-size: 20px; }
 }
 
 /* ═══════════════════════════════════════════════════════════
    IN-STORE WAYFINDING KIOSK ANIMATION
    ═══════════════════════════════════════════════════════════ */
-.platform-visual.has-wayfind { background: none; display: flex; align-items: center; justify-content: center; }
+.platform-visual.has-wayfind {
+  background: none !important;
+  border: none !important;
+  border-radius: 0;
+  aspect-ratio: unset;
+  padding: 0;
+  overflow: visible;
+  box-shadow: none;
+}
 
-.wayfind-stage { width: 100%; max-width: 340px; }
+.wayfind-stage { width: 100%; max-width: 400px; margin: 0 auto; }
 .wayfind-kiosk {
-  background: #111827; border-radius: 14px; overflow: hidden;
-  box-shadow: 0 8px 32px rgba(0,0,0,0.25); padding: 16px;
+  background: #0f1117; border: 1px solid #1e2435; border-radius: 12px; overflow: hidden;
+  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04); padding: 16px;
 }
 .wayfind-kiosk__search {
   display: flex; align-items: center; gap: 8px;
@@ -7950,7 +7979,7 @@ p:last-child { margin-bottom: 0; }
   display: flex; align-items: center; gap: 4px;
 }
 .wayfind-pin__dot {
-  width: 10px; height: 10px; border-radius: 50%; background: #d83302;
+  width: 10px; height: 10px; border-radius: 50%; background: var(--color-primary);
   animation: wayfind-pin-pulse 2s infinite;
 }
 .wayfind-pin__label { font-size: 9px; color: rgba(255,255,255,0.5); white-space: nowrap; }
@@ -7959,7 +7988,7 @@ p:last-child { margin-bottom: 0; }
   font-size: 12px; color: rgba(255,255,255,0.6); padding: 8px 10px;
   background: rgba(255,255,255,0.04); border-radius: 6px;
 }
-.wayfind-dir__arrow { color: #d83302; font-weight: 700; margin-right: 6px; }
+.wayfind-dir__arrow { color: var(--color-primary); font-weight: 700; margin-right: 6px; }
 
 @keyframes wayfind-glow {
   0%, 100% { border-color: rgba(255,255,255,0.06); background: rgba(255,255,255,0.05); }
@@ -7976,20 +8005,27 @@ p:last-child { margin-bottom: 0; }
 }
 
 @media (max-width: 640px) {
-  .wayfind-stage { max-width: 280px; }
   .wayfind-kiosk { padding: 12px; }
 }
 
 /* ═══════════════════════════════════════════════════════════
    STOREFRONT WINDOW DISPLAY ANIMATION
    ═══════════════════════════════════════════════════════════ */
-.platform-visual.has-storefront { background: none; display: flex; align-items: center; justify-content: center; }
+.platform-visual.has-storefront {
+  background: none !important;
+  border: none !important;
+  border-radius: 0;
+  aspect-ratio: unset;
+  padding: 0;
+  overflow: visible;
+  box-shadow: none;
+}
 
-.store-stage { width: 100%; max-width: 380px; aspect-ratio: 16 / 10; position: relative; }
+.store-stage { width: 100%; max-width: 520px; aspect-ratio: 16 / 10; position: relative; margin: 0 auto; }
 .store-window {
   width: 100%; height: 100%; position: relative;
-  border-radius: 14px; overflow: hidden;
-  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
+  border-radius: 10px; overflow: hidden;
+  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
 }
 .store-window__sun {
   position: absolute; top: -20px; right: -20px; width: 80px; height: 80px;
@@ -8015,7 +8051,7 @@ p:last-child { margin-bottom: 0; }
   color: #e2c076; margin-bottom: 8px;
 }
 .store-slide__title { font-size: 26px; font-weight: 700; color: #fff; }
-.store-slide__cta { font-size: 13px; color: #d83302; font-weight: 600; margin-top: 10px; }
+.store-slide__cta { font-size: 13px; color: var(--color-primary); font-weight: 600; margin-top: 10px; }
 .store-slide__sub { font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 4px; }
 .store-window__glare {
   position: absolute; inset: 0;
@@ -8040,19 +8076,26 @@ p:last-child { margin-bottom: 0; }
 }
 
 @media (max-width: 640px) {
-  .store-stage { max-width: 300px; }
   .store-slide__title { font-size: 20px; }
 }
 
 /* ═══════════════════════════════════════════════════════════
    CORPORATE ANNOUNCEMENT BOARD ANIMATION
    ═══════════════════════════════════════════════════════════ */
-.platform-visual.has-announcement { background: none; display: flex; align-items: center; justify-content: center; }
+.platform-visual.has-announcement {
+  background: none !important;
+  border: none !important;
+  border-radius: 0;
+  aspect-ratio: unset;
+  padding: 0;
+  overflow: visible;
+  box-shadow: none;
+}
 
-.announce-stage { width: 100%; max-width: 380px; }
+.announce-stage { width: 100%; max-width: 460px; margin: 0 auto; }
 .announce-board {
-  background: #111827; border-radius: 14px; overflow: hidden;
-  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
+  background: #0d1117; border: 1px solid #1e2435; border-radius: 10px; overflow: hidden;
+  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
 }
 .announce-hdr {
   display: flex; justify-content: space-between; align-items: center;
@@ -8103,7 +8146,6 @@ p:last-child { margin-bottom: 0; }
 }
 
 @media (max-width: 640px) {
-  .announce-stage { max-width: 300px; }
   .announce-card { padding: 10px; }
   .announce-card__title { font-size: 13px; }
 }
@@ -8111,12 +8153,20 @@ p:last-child { margin-bottom: 0; }
 /* ═══════════════════════════════════════════════════════════
    CAMPUS WAYFINDING KIOSK ANIMATION
    ═══════════════════════════════════════════════════════════ */
-.platform-visual.has-campus-wayfind { background: none; display: flex; align-items: center; justify-content: center; }
+.platform-visual.has-campus-wayfind {
+  background: none !important;
+  border: none !important;
+  border-radius: 0;
+  aspect-ratio: unset;
+  padding: 0;
+  overflow: visible;
+  box-shadow: none;
+}
 
-.campus-stage { width: 100%; max-width: 340px; }
+.campus-stage { width: 100%; max-width: 400px; margin: 0 auto; }
 .campus-kiosk {
-  background: #111827; border-radius: 14px; overflow: hidden;
-  box-shadow: 0 8px 32px rgba(0,0,0,0.25); padding: 16px;
+  background: #0f1117; border: 1px solid #1e2435; border-radius: 12px; overflow: hidden;
+  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04); padding: 16px;
 }
 .campus-kiosk__hdr { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 12px; text-align: center; }
 .campus-kiosk__search {
@@ -8164,23 +8214,30 @@ p:last-child { margin-bottom: 0; }
 }
 
 @media (max-width: 640px) {
-  .campus-stage { max-width: 280px; }
   .campus-kiosk { padding: 12px; }
 }
 
 /* ═══════════════════════════════════════════════════════════
    EMERGENCY OVERRIDE ALERT ANIMATION
    ═══════════════════════════════════════════════════════════ */
-.platform-visual.has-emergency { background: none; display: flex; align-items: center; justify-content: center; }
+.platform-visual.has-emergency {
+  background: none !important;
+  border: none !important;
+  border-radius: 0;
+  aspect-ratio: unset;
+  padding: 0;
+  overflow: visible;
+  box-shadow: none;
+}
 
-.emerg-stage { width: 100%; max-width: 380px; aspect-ratio: 16 / 10; }
+.emerg-stage { width: 100%; max-width: 480px; aspect-ratio: 16 / 10; margin: 0 auto; }
 .emerg-screen {
   width: 100%; height: 100%; position: relative;
-  border-radius: 14px; overflow: hidden;
-  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
+  border-radius: 10px; overflow: hidden;
+  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
 }
 .emerg-screen__normal {
-  position: absolute; inset: 0; background: #111827; padding: 20px;
+  position: absolute; inset: 0; background: #0d1117; padding: 20px;
   animation: emerg-normal 8s infinite;
 }
 .emerg-normal__hdr { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 12px; }
@@ -8199,7 +8256,7 @@ p:last-child { margin-bottom: 0; }
 .emerg-alert__pulse {
   position: absolute; inset: 0;
   border: 3px solid #dc2626;
-  animation: emerg-border-pulse 1.5s infinite; border-radius: 14px;
+  animation: emerg-border-pulse 1.5s infinite; border-radius: 10px;
 }
 
 @keyframes emerg-normal {
@@ -8229,16 +8286,23 @@ p:last-child { margin-bottom: 0; }
 }
 
 @media (max-width: 640px) {
-  .emerg-stage { max-width: 300px; }
   .emerg-alert__title { font-size: 15px; }
 }
 
 /* ═══════════════════════════════════════════════════════════
    OUTDOOR ENCLOSURE ANIMATION
    ═══════════════════════════════════════════════════════════ */
-.platform-visual.has-enclosure { background: none; display: flex; align-items: center; justify-content: center; }
+.platform-visual.has-enclosure {
+  background: none !important;
+  border: none !important;
+  border-radius: 0;
+  aspect-ratio: unset;
+  padding: 0;
+  overflow: visible;
+  box-shadow: none;
+}
 
-.encl-stage { width: 100%; max-width: 340px; position: relative; padding-top: 20px; }
+.encl-stage { width: 100%; max-width: 400px; position: relative; padding-top: 20px; margin: 0 auto; }
 .encl-rain { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
 .encl-rain__drop {
   position: absolute; width: 2px; background: rgba(100,160,255,0.35);
@@ -8287,15 +8351,23 @@ p:last-child { margin-bottom: 0; }
 }
 
 @media (max-width: 640px) {
-  .encl-stage { max-width: 280px; }
+  .encl-stage { padding-top: 14px; }
 }
 
 /* ═══════════════════════════════════════════════════════════
    HIGH-BRIGHTNESS COMPARISON ANIMATION
    ═══════════════════════════════════════════════════════════ */
-.platform-visual.has-brightness { background: none; display: flex; align-items: center; justify-content: center; }
+.platform-visual.has-brightness {
+  background: none !important;
+  border: none !important;
+  border-radius: 0;
+  aspect-ratio: unset;
+  padding: 0;
+  overflow: visible;
+  box-shadow: none;
+}
 
-.bright-stage { width: 100%; max-width: 380px; position: relative; padding-top: 10px; }
+.bright-stage { width: 100%; max-width: 460px; position: relative; padding-top: 10px; margin: 0 auto; }
 .bright-sun {
   position: absolute; top: -10px; right: 20px; width: 50px; height: 50px;
   border-radius: 50%; background: radial-gradient(circle, rgba(255,200,50,0.5), transparent 70%);
@@ -8337,17 +8409,24 @@ p:last-child { margin-bottom: 0; }
 }
 
 @media (max-width: 640px) {
-  .bright-stage { max-width: 300px; }
   .bright-panel__screen { padding: 18px 10px; }
 }
 
 /* ═══════════════════════════════════════════════════════════
    CELLULAR CONNECTIVITY ANIMATION
    ═══════════════════════════════════════════════════════════ */
-.platform-visual.has-cellular { background: none; display: flex; align-items: center; justify-content: center; }
+.platform-visual.has-cellular {
+  background: none !important;
+  border: none !important;
+  border-radius: 0;
+  aspect-ratio: unset;
+  padding: 0;
+  overflow: visible;
+  box-shadow: none;
+}
 
 .cell-stage {
-  width: 100%; max-width: 300px;
+  width: 100%; max-width: 380px; margin: 0 auto;
   display: flex; flex-direction: column; align-items: center; gap: 16px;
   padding: 20px 0;
 }
@@ -8400,18 +8479,26 @@ p:last-child { margin-bottom: 0; }
 }
 
 @media (max-width: 640px) {
-  .cell-stage { max-width: 240px; }
+  .cell-tower { transform: scale(0.85); }
 }
 
 /* ═══════════════════════════════════════════════════════════
    DESIGNER EDITOR CANVAS ANIMATION
    ═══════════════════════════════════════════════════════════ */
-.platform-visual.has-designer { background: none; display: flex; align-items: center; justify-content: center; }
+.platform-visual.has-designer {
+  background: none !important;
+  border: none !important;
+  border-radius: 0;
+  aspect-ratio: unset;
+  padding: 0;
+  overflow: visible;
+  box-shadow: none;
+}
 
-.designer-stage { width: 100%; max-width: 380px; }
+.designer-stage { width: 100%; max-width: 480px; margin: 0 auto; }
 .designer-editor {
-  background: #111827; border-radius: 14px; overflow: hidden;
-  box-shadow: 0 8px 32px rgba(0,0,0,0.25); display: grid;
+  background: #0d1117; border: 1px solid #1e2435; border-radius: 10px; overflow: hidden;
+  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04); display: grid;
   grid-template-columns: 1fr 90px; grid-template-rows: auto 1fr;
 }
 .designer-toolbar {
@@ -8454,7 +8541,6 @@ p:last-child { margin-bottom: 0; }
 }
 
 @media (max-width: 640px) {
-  .designer-stage { max-width: 300px; }
   .designer-editor { grid-template-columns: 1fr; }
   .designer-layers { display: none; }
 }
@@ -8462,12 +8548,20 @@ p:last-child { margin-bottom: 0; }
 /* ═══════════════════════════════════════════════════════════
    MEDIA LIBRARY GRID ANIMATION
    ═══════════════════════════════════════════════════════════ */
-.platform-visual.has-media-library { background: none; display: flex; align-items: center; justify-content: center; }
+.platform-visual.has-media-library {
+  background: none !important;
+  border: none !important;
+  border-radius: 0;
+  aspect-ratio: unset;
+  padding: 0;
+  overflow: visible;
+  box-shadow: none;
+}
 
-.medialib-stage { width: 100%; max-width: 380px; }
+.medialib-stage { width: 100%; max-width: 460px; margin: 0 auto; }
 .medialib-panel {
-  background: #111827; border-radius: 14px; overflow: hidden;
-  box-shadow: 0 8px 32px rgba(0,0,0,0.25); padding: 16px;
+  background: #0d1117; border: 1px solid #1e2435; border-radius: 10px; overflow: hidden;
+  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04); padding: 16px;
 }
 .medialib-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
 .medialib-hdr__title { font-size: 14px; font-weight: 700; color: #fff; }
@@ -8515,16 +8609,23 @@ p:last-child { margin-bottom: 0; }
 }
 
 @media (max-width: 640px) {
-  .medialib-stage { max-width: 300px; }
   .medialib-grid { grid-template-columns: repeat(2, 1fr); }
 }
 
 /* ═══════════════════════════════════════════════════════════
    PUBLISH WORKFLOW ANIMATION
    ═══════════════════════════════════════════════════════════ */
-.platform-visual.has-publish { background: none; display: flex; align-items: center; justify-content: center; }
+.platform-visual.has-publish {
+  background: none !important;
+  border: none !important;
+  border-radius: 0;
+  aspect-ratio: unset;
+  padding: 0;
+  overflow: visible;
+  box-shadow: none;
+}
 
-.publish-stage { width: 100%; max-width: 380px; padding: 16px 0; }
+.publish-stage { width: 100%; max-width: 460px; padding: 16px 0; margin: 0 auto; }
 .publish-flow { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 20px; }
 .publish-step { text-align: center; }
 .publish-step__badge {
@@ -8575,16 +8676,23 @@ p:last-child { margin-bottom: 0; }
 }
 
 @media (max-width: 640px) {
-  .publish-stage { max-width: 300px; }
   .publish-step__badge { padding: 6px 12px; font-size: 11px; }
 }
 
 /* ═══════════════════════════════════════════════════════════
    SCREEN GROUPS HIERARCHY ANIMATION
    ═══════════════════════════════════════════════════════════ */
-.platform-visual.has-screen-groups { background: none; display: flex; align-items: center; justify-content: center; }
+.platform-visual.has-screen-groups {
+  background: none !important;
+  border: none !important;
+  border-radius: 0;
+  aspect-ratio: unset;
+  padding: 0;
+  overflow: visible;
+  box-shadow: none;
+}
 
-.groups-stage { width: 100%; max-width: 340px; padding: 10px 0; }
+.groups-stage { width: 100%; max-width: 400px; padding: 10px 0; margin: 0 auto; }
 .groups-tree { margin-bottom: 16px; }
 .groups-node {
   display: flex; align-items: center; gap: 8px; padding: 8px 12px;
@@ -8592,7 +8700,7 @@ p:last-child { margin-bottom: 0; }
   background: rgba(255,255,255,0.04);
 }
 .groups-node__icon { font-size: 8px; }
-.groups-node--root .groups-node__icon { color: #d83302; }
+.groups-node--root .groups-node__icon { color: var(--color-primary); }
 .groups-node--region .groups-node__icon { color: #3b82f6; }
 .groups-node--site .groups-node__icon { color: #22c55e; }
 .groups-node__name { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.8); flex: 1; }
@@ -8612,7 +8720,7 @@ p:last-child { margin-bottom: 0; }
   border: 2px solid rgba(216,51,2,0.3);
   animation: groups-ripple 3s ease-out infinite;
 }
-.groups-push__label { font-size: 12px; font-weight: 600; color: #d83302; }
+.groups-push__label { font-size: 12px; font-weight: 600; color: var(--color-primary); }
 
 @keyframes groups-ripple {
   0%   { opacity: 1; transform: scale(0.95); }
@@ -8624,19 +8732,26 @@ p:last-child { margin-bottom: 0; }
 }
 
 @media (max-width: 640px) {
-  .groups-stage { max-width: 280px; }
   .groups-branch { padding-left: 14px; margin-left: 12px; }
 }
 
 /* ═══════════════════════════════════════════════════════════
    MONITORING DASHBOARD ANIMATION
    ═══════════════════════════════════════════════════════════ */
-.platform-visual.has-monitoring { background: none; display: flex; align-items: center; justify-content: center; }
+.platform-visual.has-monitoring {
+  background: none !important;
+  border: none !important;
+  border-radius: 0;
+  aspect-ratio: unset;
+  padding: 0;
+  overflow: visible;
+  box-shadow: none;
+}
 
-.monitor-stage { width: 100%; max-width: 380px; }
+.monitor-stage { width: 100%; max-width: 460px; margin: 0 auto; }
 .monitor-dash {
-  background: #111827; border-radius: 14px; overflow: hidden;
-  box-shadow: 0 8px 32px rgba(0,0,0,0.25); padding: 16px;
+  background: #0d1117; border: 1px solid #1e2435; border-radius: 10px; overflow: hidden;
+  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04); padding: 16px;
 }
 .monitor-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
 .monitor-hdr__title { font-size: 14px; font-weight: 700; color: #fff; }
@@ -8677,19 +8792,26 @@ p:last-child { margin-bottom: 0; }
 }
 
 @media (max-width: 640px) {
-  .monitor-stage { max-width: 300px; }
   .monitor-grid { grid-template-columns: repeat(2, 1fr); }
 }
 
 /* ═══════════════════════════════════════════════════════════
    PATIENT WAYFINDING KIOSK ANIMATION
    ═══════════════════════════════════════════════════════════ */
-.platform-visual.has-patient-wayfind { background: none; display: flex; align-items: center; justify-content: center; }
+.platform-visual.has-patient-wayfind {
+  background: none !important;
+  border: none !important;
+  border-radius: 0;
+  aspect-ratio: unset;
+  padding: 0;
+  overflow: visible;
+  box-shadow: none;
+}
 
-.pwayfind-stage { width: 100%; max-width: 340px; }
+.pwayfind-stage { width: 100%; max-width: 400px; margin: 0 auto; }
 .pwayfind-kiosk {
-  background: #111827; border-radius: 14px; overflow: hidden;
-  box-shadow: 0 8px 32px rgba(0,0,0,0.25); padding: 16px;
+  background: #0f1117; border: 1px solid #1e2435; border-radius: 12px; overflow: hidden;
+  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04); padding: 16px;
 }
 .pwayfind-hdr {
   display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;
@@ -8747,22 +8869,30 @@ p:last-child { margin-bottom: 0; }
 }
 
 @media (max-width: 640px) {
-  .pwayfind-stage { max-width: 280px; }
   .pwayfind-kiosk { padding: 12px; }
 }
 
 /* ═══════════════════════════════════════════════════════════
    WAITING ROOM INFORMATION DISPLAY ANIMATION
    ═══════════════════════════════════════════════════════════ */
-.platform-visual.has-waiting-room { background: none; display: flex; align-items: center; justify-content: center; }
-
-.waitroom-stage { width: 100%; max-width: 380px; aspect-ratio: 16 / 10; }
-.waitroom-tv { width: 100%; }
-.waitroom-tv__body {
-  background: #1a1a2e; border-radius: 14px 14px 0 0; overflow: hidden;
-  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
+.platform-visual.has-waiting-room {
+  background: none !important;
+  border: none !important;
+  border-radius: 0;
+  aspect-ratio: unset;
+  padding: 0;
+  overflow: visible;
+  box-shadow: none;
 }
-.waitroom-tv__screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
+
+.waitroom-stage { width: 100%; max-width: 520px; margin: 0 auto; }
+.waitroom-tv { display: flex; flex-direction: column; align-items: center; width: 100%; }
+.waitroom-tv__body {
+  width: 100%; background: #111; border: 5px solid #1a1a1a;
+  border-radius: 8px 8px 4px 4px; outline: 2px solid #000; padding: 4px;
+  box-shadow: 0 14px 48px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
+}
+.waitroom-tv__screen { width: 100%; aspect-ratio: 16 / 9; background: #0a0a0a; border-radius: 2px; overflow: hidden; position: relative; }
 .waitroom-slides { position: relative; width: 100%; height: 100%; }
 .waitroom-slide {
   position: absolute; inset: 0; display: flex; flex-direction: column;
@@ -8779,8 +8909,8 @@ p:last-child { margin-bottom: 0; }
 .waitroom-wait__queue { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 4px; }
 .waitroom-info__title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.4); margin-bottom: 8px; }
 .waitroom-info__text { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.5; }
-.waitroom-tv__feet { display: flex; justify-content: center; gap: 60px; }
-.waitroom-tv__foot { width: 40px; height: 4px; background: #374151; border-radius: 0 0 4px 4px; }
+.waitroom-tv__feet { display: flex; justify-content: space-between; width: 60%; max-width: 300px; }
+.waitroom-tv__foot { width: 12px; height: 8px; background: #111; border: 1px solid #000; border-radius: 0 0 4px 4px; }
 
 @keyframes waitroom-cycle {
   0%, 5%   { opacity: 0; transform: translateY(8px); }
@@ -8794,22 +8924,30 @@ p:last-child { margin-bottom: 0; }
 }
 
 @media (max-width: 640px) {
-  .waitroom-stage { max-width: 300px; }
   .waitroom-wait__value { font-size: 26px; }
 }
 
 /* ═══════════════════════════════════════════════════════════
    MULTI-ZONE LAYOUT ANIMATION
    ═══════════════════════════════════════════════════════════ */
-.platform-visual.has-multi-zone { background: none; display: flex; align-items: center; justify-content: center; }
-
-.mzone-stage { width: 100%; max-width: 380px; }
-.mzone-tv { width: 100%; }
-.mzone-tv__body {
-  background: #1a1a2e; border-radius: 14px 14px 0 0; overflow: hidden;
-  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
+.platform-visual.has-multi-zone {
+  background: none !important;
+  border: none !important;
+  border-radius: 0;
+  aspect-ratio: unset;
+  padding: 0;
+  overflow: visible;
+  box-shadow: none;
 }
-.mzone-tv__screen { aspect-ratio: 16 / 9; overflow: hidden; }
+
+.mzone-stage { width: 100%; max-width: 520px; margin: 0 auto; }
+.mzone-tv { display: flex; flex-direction: column; align-items: center; width: 100%; }
+.mzone-tv__body {
+  width: 100%; background: #111; border: 5px solid #1a1a1a;
+  border-radius: 8px 8px 4px 4px; outline: 2px solid #000; padding: 4px;
+  box-shadow: 0 14px 48px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
+}
+.mzone-tv__screen { width: 100%; aspect-ratio: 16 / 9; background: #0a0a0a; border-radius: 2px; overflow: hidden; }
 .mzone-layout {
   width: 100%; height: 100%;
   display: grid; grid-template-columns: 1fr 120px; grid-template-rows: 1fr 28px;
@@ -8825,15 +8963,15 @@ p:last-child { margin-bottom: 0; }
   border-bottom: 1px solid rgba(255,255,255,0.06);
   overflow: hidden;
 }
-.mzone-side__title { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #d83302; margin-bottom: 6px; }
+.mzone-side__title { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--color-primary); margin-bottom: 6px; }
 .mzone-side__item { font-size: 10px; color: rgba(255,255,255,0.5); padding: 3px 0; }
 .mzone-ticker {
   grid-column: 1 / -1; background: rgba(216,51,2,0.08); padding: 6px 12px;
   font-size: 10px; color: rgba(255,255,255,0.5); white-space: nowrap;
   overflow: hidden; animation: mzone-scroll 20s linear infinite;
 }
-.mzone-tv__feet { display: flex; justify-content: center; gap: 60px; }
-.mzone-tv__foot { width: 40px; height: 4px; background: #374151; border-radius: 0 0 4px 4px; }
+.mzone-tv__feet { display: flex; justify-content: space-between; width: 60%; max-width: 300px; }
+.mzone-tv__foot { width: 12px; height: 8px; background: #111; border: 1px solid #000; border-radius: 0 0 4px 4px; }
 
 @keyframes mzone-scroll {
   from { text-indent: 100%; }
@@ -8845,20 +8983,27 @@ p:last-child { margin-bottom: 0; }
 }
 
 @media (max-width: 640px) {
-  .mzone-stage { max-width: 300px; }
   .mzone-layout { grid-template-columns: 1fr 90px; }
 }
 
 /* ═══════════════════════════════════════════════════════════
    MEMBERSHIP PROMO CYCLING ANIMATION
    ═══════════════════════════════════════════════════════════ */
-.platform-visual.has-membership { background: none; display: flex; align-items: center; justify-content: center; }
+.platform-visual.has-membership {
+  background: none !important;
+  border: none !important;
+  border-radius: 0;
+  aspect-ratio: unset;
+  padding: 0;
+  overflow: visible;
+  box-shadow: none;
+}
 
-.member-stage { width: 100%; max-width: 380px; aspect-ratio: 16 / 10; }
+.member-stage { width: 100%; max-width: 520px; aspect-ratio: 16 / 10; margin: 0 auto; }
 .member-screen {
   width: 100%; height: 100%;
-  border-radius: 14px; overflow: hidden;
-  box-shadow: 0 8px 32px rgba(0,0,0,0.25); position: relative;
+  border-radius: 10px; overflow: hidden;
+  box-shadow: 0 20px 60px rgba(0,0,0,0.5); position: relative;
 }
 .member-slides { position: relative; width: 100%; height: 100%; }
 .member-slide {
@@ -8880,13 +9025,13 @@ p:last-child { margin-bottom: 0; }
 }
 .member-slide__tag {
   font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px;
-  color: #d83302; margin-bottom: 6px;
+  color: var(--color-primary); margin-bottom: 6px;
 }
 .member-slide__title { font-size: 24px; font-weight: 700; color: #fff; margin-bottom: 6px; }
 .member-slide__price { font-size: 14px; color: rgba(255,255,255,0.6); margin-bottom: 12px; }
 .member-slide__cta {
   font-size: 12px; font-weight: 600; color: #fff;
-  background: #d83302; padding: 6px 18px; border-radius: 20px;
+  background: var(--color-primary); padding: 6px 18px; border-radius: 20px;
   display: inline-block;
 }
 
@@ -8902,6 +9047,5 @@ p:last-child { margin-bottom: 0; }
 }
 
 @media (max-width: 640px) {
-  .member-stage { max-width: 300px; }
   .member-slide__title { font-size: 20px; }
 }