diff --git a/src/samples/mediaco/components/AppShell/AppShell.scss b/src/samples/mediaco/components/AppShell/AppShell.scss
new file mode 100644
index 00000000..a4c9304c
--- /dev/null
+++ b/src/samples/mediaco/components/AppShell/AppShell.scss
@@ -0,0 +1,6 @@
+.mc-app-shell {
+  display: flex;
+  width: 100%;
+  min-height: 100vh;
+  background-color: #fff;
+}
diff --git a/src/samples/mediaco/components/AppShell/AppShell.tsx b/src/samples/mediaco/components/AppShell/AppShell.tsx
index 27889952..7420b5d6 100644
--- a/src/samples/mediaco/components/AppShell/AppShell.tsx
+++ b/src/samples/mediaco/components/AppShell/AppShell.tsx
@@ -4,6 +4,7 @@ import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { TodoPortalProvider } from '../../utils/TodoPortalContext';
 import WssNavBar from '../WssNavBar';
 import '../../mediaCoStyles.scss';
+import './AppShell.scss';
 
 interface IPage {
   pxPageViewIcon: string;
diff --git a/src/samples/mediaco/components/Banner/Banner.scss b/src/samples/mediaco/components/Banner/Banner.scss
new file mode 100644
index 00000000..28be5b7a
--- /dev/null
+++ b/src/samples/mediaco/components/Banner/Banner.scss
@@ -0,0 +1,185 @@
+.mc-banner-root {
+  width: 100%;
+  background-color: #fff;
+}
+
+.mc-banner-header {
+  position: sticky;
+  top: 64px;
+  background-color: #fff;
+  z-index: 10;
+  padding-bottom: 2rem;
+  width: 100%;
+}
+
+.mc-banner-header-inner {
+  width: 100%;
+  text-align: center;
+}
+
+.mc-banner-header-stack {
+  display: flex;
+  flex-direction: column;
+  padding-top: 5rem;
+  gap: 0.5rem;
+}
+
+.mc-banner-header-content {
+  justify-content: center;
+  display: inline-grid;
+}
+
+.mc-banner-title {
+  margin: 0;
+  font-size: 36px;
+  color: #46185a;
+  font-weight: 700;
+}
+
+.mc-banner-message {
+  font-size: 14px;
+  margin-top: 16px;
+  color: #49454f;
+}
+
+.mc-banner-survey-wrap {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  padding: 1rem 0;
+}
+
+.mc-banner-survey-card {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  background: linear-gradient(135deg, rgb(103, 80, 164) 0%, rgb(248, 20, 227) 50%, rgb(0, 201, 255) 100%);
+  background-size: 200% 200%;
+  border-radius: 24px;
+  padding: 24px 32px;
+  width: 670px;
+  max-width: 100%;
+  color: #fff;
+  box-shadow: 0 8px 20px rgba(94, 75, 159, 0.25);
+  font-family: 'Roboto', sans-serif;
+  text-align: left;
+}
+
+.mc-banner-survey-icon-wrap {
+  flex-shrink: 0;
+}
+
+.mc-banner-survey-icon-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 72px;
+  height: 72px;
+  border-radius: 16px;
+  background-color: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(4px);
+}
+
+.mc-banner-survey-icon-image {
+  height: 35px;
+  filter: brightness(0) saturate(100%) invert(100%);
+}
+
+.mc-banner-survey-text {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.mc-banner-survey-title {
+  margin: 0 0 6px;
+  font-size: 22px;
+  font-weight: 400;
+}
+
+.mc-banner-survey-message {
+  margin: 0;
+  font-size: 15px;
+  opacity: 0.9;
+  font-weight: 400;
+  line-height: 1.4;
+}
+
+.mc-banner-survey-action {
+  flex-shrink: 0;
+}
+
+.mc-banner-survey-button {
+  background-color: #fff;
+  color: #5c4498;
+  border: none;
+  padding: 12px 28px;
+  border-radius: 50px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  letter-spacing: 0.1px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  text-transform: none;
+}
+
+.mc-banner-survey-button:hover {
+  background-color: #f0f0f0;
+}
+
+.mc-banner-survey-button-icon {
+  font-size: 20px;
+}
+
+.mc-banner-content {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  column-gap: 1rem;
+  gap: 1.5rem;
+  align-items: start;
+  background: #fff;
+  padding: 40px 44px 16px;
+  border-top-left-radius: 28px;
+  grid-template-columns: 1fr;
+}
+
+.mc-banner-content--two-column,
+.mc-banner-content--wide-narrow,
+.mc-banner-content--narrow-wide {
+  grid-template-columns: 1fr;
+}
+
+.mc-banner-region {
+  min-width: 0;
+}
+
+@media (min-width: 1200px) {
+  .mc-banner-content--two-column {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .mc-banner-content--wide-narrow {
+    grid-template-columns: 7fr 3fr;
+  }
+
+  .mc-banner-content--narrow-wide {
+    grid-template-columns: 3fr 7fr;
+  }
+}
+
+@media (max-width: 768px) {
+  .mc-banner-survey-card {
+    flex-direction: column;
+    text-align: center;
+    padding: 32px 24px;
+  }
+
+  .mc-banner-survey-text {
+    align-items: center;
+  }
+}
diff --git a/src/samples/mediaco/components/Banner/Banner.tsx b/src/samples/mediaco/components/Banner/Banner.tsx
index 92f65032..0bbe27ae 100644
--- a/src/samples/mediaco/components/Banner/Banner.tsx
+++ b/src/samples/mediaco/components/Banner/Banner.tsx
@@ -5,6 +5,7 @@ import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import Banner from '@pega/react-sdk-components/lib/components/designSystemExtension/Banner';
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { useTodoPortal } from '../../utils/TodoPortalContext';
+import './Banner.scss';
 
 /**
  * Banner is called by BannerPage/DefaultPage via getComponentFromMap('Banner').
diff --git a/src/samples/mediaco/components/Carousel/Carousel.scss b/src/samples/mediaco/components/Carousel/Carousel.scss
new file mode 100644
index 00000000..be438a62
--- /dev/null
+++ b/src/samples/mediaco/components/Carousel/Carousel.scss
@@ -0,0 +1,89 @@
+.mc-carousel-root {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.mc-carousel-track {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-behavior: auto;
+  border-radius: 12px;
+  scrollbar-width: none;
+}
+
+.mc-carousel-track::-webkit-scrollbar {
+  display: none;
+}
+
+.mc-carousel-item,
+.mc-carousel-skeleton-item {
+  flex: 0 0 200px;
+  height: 350px;
+  margin: 0 10px;
+  border-radius: 8px;
+}
+
+.mc-carousel-item {
+  transition:
+    flex-basis 0.1s linear,
+    min-width 0.1s linear;
+  will-change: flex-basis, min-width;
+  min-width: 0;
+}
+
+.mc-carousel-skeleton-item {
+  background: linear-gradient(90deg, #e0e0e0 25%, #ececec 50%, #e0e0e0 75%);
+  background-size: 200% 100%;
+  animation: mc-carousel-shimmer 1.5s infinite;
+}
+
+@keyframes mc-carousel-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+.mc-carousel-card {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  overflow: hidden;
+  position: relative;
+  background: #000;
+  border-radius: 8px;
+}
+
+.mc-carousel-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.mc-carousel-overlay {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  padding: 16px;
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
+  color: #fff;
+}
+
+.mc-carousel-title {
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
diff --git a/src/samples/mediaco/components/Carousel/Carousel.tsx b/src/samples/mediaco/components/Carousel/Carousel.tsx
index fcff0ef7..1db60250 100644
--- a/src/samples/mediaco/components/Carousel/Carousel.tsx
+++ b/src/samples/mediaco/components/Carousel/Carousel.tsx
@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 import Box from '@mui/material/Box';
 import Card from '@mui/material/Card';
 import Typography from '@mui/material/Typography';
+import './Carousel.scss';
 
 interface CarouselItem {
   Carouselheading?: string;
diff --git a/src/samples/mediaco/components/Footer/Footer.scss b/src/samples/mediaco/components/Footer/Footer.scss
new file mode 100644
index 00000000..ae73b010
--- /dev/null
+++ b/src/samples/mediaco/components/Footer/Footer.scss
@@ -0,0 +1,120 @@
+.mc-footer {
+  background-color: #f7f2fa;
+  color: #333;
+  padding: 30px 0;
+}
+
+.mc-footer-container {
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.mc-footer-top {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 2rem;
+  margin-bottom: 2rem;
+}
+
+.mc-footer-column {
+  flex: 1;
+  min-width: 220px;
+  margin-bottom: 20px;
+  padding-left: 10px;
+}
+
+.mc-footer-column-title {
+  font-weight: 700;
+  margin-bottom: 15px;
+  font-size: 18px;
+}
+
+.mc-footer-about {
+  line-height: 1.6;
+  margin-bottom: 20px;
+  padding-top: 4px;
+}
+
+.mc-footer-social-row {
+  display: flex;
+}
+
+.mc-footer-social-button {
+  width: 40px;
+  height: 40px;
+  margin-right: 10px;
+  background-color: #edeaf2;
+}
+
+.mc-footer-social-button:hover {
+  background-color: #6750a4;
+}
+
+.mc-footer-social-button:hover .mc-footer-social-icon {
+  color: #fff;
+}
+
+.mc-footer-link-item {
+  padding: 4px 0;
+}
+
+.mc-footer-link-item:hover {
+  background-color: transparent;
+  transform: translateX(4px);
+  transition: transform 0.3s ease;
+}
+
+.mc-footer-link-text {
+  color: #49454f;
+  font-size: 0.9rem;
+}
+
+.mc-footer-link-item:hover .mc-footer-link-text {
+  color: #6750a4;
+}
+
+.mc-footer-contact-list {
+  padding-top: 1rem;
+}
+
+.mc-footer-contact-icon {
+  color: #6750a4;
+  margin-right: 10px;
+}
+
+.mc-footer-contact-item {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 15px;
+  font-size: 14px;
+}
+
+.mc-footer-bottom {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 20px;
+  font-size: 14px;
+}
+
+.mc-footer-copyright {
+  color: #555;
+}
+
+.mc-footer-bottom-links {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.mc-footer-bottom-link {
+  color: #555;
+  text-decoration: none;
+  margin-left: 20px;
+  cursor: pointer;
+}
+
+.mc-footer-bottom-link:hover {
+  color: #6750a4;
+}
diff --git a/src/samples/mediaco/components/Footer/Footer.tsx b/src/samples/mediaco/components/Footer/Footer.tsx
index 0080edc3..01c88a51 100644
--- a/src/samples/mediaco/components/Footer/Footer.tsx
+++ b/src/samples/mediaco/components/Footer/Footer.tsx
@@ -12,6 +12,7 @@ import FacebookIcon from '@mui/icons-material/Facebook';
 import TwitterIcon from '@mui/icons-material/Twitter';
 import InstagramIcon from '@mui/icons-material/Instagram';
 import YouTubeIcon from '@mui/icons-material/YouTube';
+import './Footer.scss';
 
 export default function Footer() {
   return (
diff --git a/src/samples/mediaco/components/GalleryGrid/GalleryGrid.scss b/src/samples/mediaco/components/GalleryGrid/GalleryGrid.scss
new file mode 100644
index 00000000..31331b6d
--- /dev/null
+++ b/src/samples/mediaco/components/GalleryGrid/GalleryGrid.scss
@@ -0,0 +1,199 @@
+.mc-gallery-dialog-paper {
+  width: 100%;
+  max-width: 1400px;
+  max-height: 90vh;
+  background: #f8f2fb;
+}
+
+.mc-gallery-dialog {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.mc-gallery-dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.5rem 2rem;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.mc-gallery-close-button {
+  color: #49454f;
+}
+
+.mc-gallery-dialog-title {
+  font-size: 45px;
+  font-weight: 400;
+  line-height: 52px;
+  margin: 0;
+}
+
+.mc-gallery-dialog-subtitle {
+  color: #6b7280;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+}
+
+.mc-gallery-carousel-grid {
+  flex: 1;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+  gap: 20px;
+  padding: 24px;
+  overflow-y: auto;
+}
+
+.mc-gallery-carousel-item {
+  position: relative;
+  border: 1px solid #e0e0e0;
+  border-radius: 1.5rem;
+  transition: transform 0.2s;
+  aspect-ratio: 4 / 3;
+  overflow: hidden;
+}
+
+.mc-gallery-carousel-item:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+}
+
+.mc-gallery-carousel-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.mc-gallery-carousel-label {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  margin: 0;
+  padding: 16px;
+  font-weight: 500;
+  color: #fff;
+  font-size: 16px;
+}
+
+.mc-gallery-table-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 22px;
+  padding: 1.5rem 2rem;
+  overflow-y: auto;
+}
+
+@media (min-width: 900px) {
+  .mc-gallery-table-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.mc-gallery-table-card {
+  border: 1px solid #e0e0e0;
+  border-radius: 20px;
+  box-shadow:
+    0 1px 2px #0000004d,
+    0 2px 6px #00000026;
+  padding: 18px;
+  transition: transform 0.1s;
+  background: #f3edf7;
+}
+
+.mc-gallery-table-card:hover {
+  transform: scale(1.01);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+}
+
+.mc-gallery-table-card-content {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.mc-gallery-table-icon-box {
+  min-width: 64px;
+  min-height: 64px;
+  border-radius: 12px;
+  display: grid;
+  place-items: center;
+}
+
+.mc-gallery-table-icon-box-0 {
+  background-color: #ede9fe;
+}
+
+.mc-gallery-table-icon-box-1 {
+  background-color: #fce7f3;
+}
+
+.mc-gallery-table-icon-box-2 {
+  background-color: #e0f2fe;
+}
+
+.mc-gallery-table-icon-box-3 {
+  background-color: #ffedd5;
+}
+
+.mc-gallery-table-icon-box-4 {
+  background-color: #f3e8ff;
+}
+
+.mc-gallery-table-icon-box-5 {
+  background-color: #d1fae5;
+}
+
+.mc-gallery-table-icon-image {
+  display: block;
+  border-radius: 8px;
+  width: 24px;
+  height: 24px;
+}
+
+.mc-gallery-table-icon-filter-0 {
+  filter: brightness(0) saturate(100%) invert(20%) sepia(80%) hue-rotate(250deg) saturate(500%);
+}
+
+.mc-gallery-table-icon-filter-1 {
+  filter: brightness(0) saturate(100%) invert(20%) sepia(80%) hue-rotate(320deg) saturate(500%);
+}
+
+.mc-gallery-table-icon-filter-2 {
+  filter: brightness(0) saturate(100%) invert(20%) sepia(80%) hue-rotate(190deg) saturate(500%);
+}
+
+.mc-gallery-table-icon-filter-3 {
+  filter: brightness(0) saturate(100%) invert(20%) sepia(80%) hue-rotate(25deg) saturate(500%);
+}
+
+.mc-gallery-table-icon-filter-4 {
+  filter: brightness(0) saturate(100%) invert(20%) sepia(80%) hue-rotate(120deg) saturate(500%);
+}
+
+.mc-gallery-table-icon-filter-5 {
+  filter: brightness(0) saturate(100%) invert(20%) sepia(80%) hue-rotate(90deg) saturate(500%);
+}
+
+.mc-gallery-table-text {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.mc-gallery-table-title {
+  font-size: 22px;
+  font-weight: 400;
+  line-height: 28px;
+  color: #1d1b20;
+}
+
+.mc-gallery-table-description {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: 0.25px;
+}
diff --git a/src/samples/mediaco/components/GalleryGrid/GalleryGrid.tsx b/src/samples/mediaco/components/GalleryGrid/GalleryGrid.tsx
index 0338cb3d..0be77756 100644
--- a/src/samples/mediaco/components/GalleryGrid/GalleryGrid.tsx
+++ b/src/samples/mediaco/components/GalleryGrid/GalleryGrid.tsx
@@ -3,6 +3,7 @@ import Typography from '@mui/material/Typography';
 import IconButton from '@mui/material/IconButton';
 import Dialog from '@mui/material/Dialog';
 import CloseIcon from '@mui/icons-material/Close';
+import './GalleryGrid.scss';
 
 interface GalleryGridProps {
   open: boolean;
diff --git a/src/samples/mediaco/components/ListView/ListView.scss b/src/samples/mediaco/components/ListView/ListView.scss
new file mode 100644
index 00000000..8972c53f
--- /dev/null
+++ b/src/samples/mediaco/components/ListView/ListView.scss
@@ -0,0 +1,235 @@
+.mc-list-view-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  margin-bottom: 28px;
+}
+
+.mc-list-view-header-title-wrap {
+  display: flex;
+  padding: 0 4px;
+}
+
+.mc-list-view-header-title-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.mc-list-view-title {
+  font-size: 22px;
+  font-weight: 400;
+  color: #2c2c2c;
+  margin: 0 0 4px;
+}
+
+.mc-list-view-title-underline {
+  height: 4px;
+  background-color: #9c27b0;
+  width: 100%;
+  border-radius: 2px;
+}
+
+.mc-list-view-arrow-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mc-list-view-arrow-icon {
+  color: #6750a4;
+}
+
+.mc-list-view-table {
+  background-color: #fff;
+  border-radius: 12px;
+  box-shadow:
+    0 1px 2px rgba(0, 0, 0, 0.3),
+    0 1px 3px rgba(0, 0, 0, 0.15);
+  position: relative;
+  overflow: hidden;
+}
+
+.mc-list-view-row {
+  display: flex;
+  align-items: flex-start;
+  padding: 20px 25px;
+  position: relative;
+  background-color: #fff;
+  transition: background-color 0.3s ease;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.mc-list-view-row-last {
+  border-bottom: none;
+}
+
+.mc-list-view-row:hover {
+  background-color: #f6f5f5;
+}
+
+.mc-list-view-icon-box {
+  width: 48px;
+  height: 48px;
+  border-radius: 17px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  flex-shrink: 0;
+  transition: transform 0.3s ease;
+}
+
+.mc-list-view-row:hover .mc-list-view-icon-box {
+  transform: scale(1.05);
+}
+
+.mc-list-view-icon-box-0 {
+  background-color: #ede9fe;
+}
+
+.mc-list-view-icon-box-1 {
+  background-color: #fce7f3;
+}
+
+.mc-list-view-icon-box-2 {
+  background-color: #e0f2fe;
+}
+
+.mc-list-view-icon-box-3 {
+  background-color: #ffedd5;
+}
+
+.mc-list-view-icon-box-4 {
+  background-color: #f3e8ff;
+}
+
+.mc-list-view-icon-box-5 {
+  background-color: #d1fae5;
+}
+
+.mc-list-view-icon-image {
+  width: 24px;
+  height: 24px;
+  object-fit: contain;
+}
+
+.mc-list-view-icon-index {
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.mc-list-view-icon-filter-0 {
+  filter: brightness(0) saturate(100%) invert(20%) sepia(80%) hue-rotate(250deg) saturate(500%);
+}
+
+.mc-list-view-icon-filter-1 {
+  filter: brightness(0) saturate(100%) invert(20%) sepia(80%) hue-rotate(320deg) saturate(500%);
+}
+
+.mc-list-view-icon-filter-2 {
+  filter: brightness(0) saturate(100%) invert(20%) sepia(80%) hue-rotate(190deg) saturate(500%);
+}
+
+.mc-list-view-icon-filter-3 {
+  filter: brightness(0) saturate(100%) invert(20%) sepia(80%) hue-rotate(25deg) saturate(500%);
+}
+
+.mc-list-view-icon-filter-4 {
+  filter: brightness(0) saturate(100%) invert(20%) sepia(80%) hue-rotate(120deg) saturate(500%);
+}
+
+.mc-list-view-icon-filter-5 {
+  filter: brightness(0) saturate(100%) invert(20%) sepia(80%) hue-rotate(90deg) saturate(500%);
+}
+
+.mc-list-view-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin-left: 12px;
+  height: 48px;
+  flex: 1;
+}
+
+.mc-list-view-content-top {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.mc-list-view-content-bottom {
+  color: #4b5563;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.mc-list-view-item-title {
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.mc-list-view-dot {
+  width: 3px;
+  height: 3px;
+  background-color: #9ca3af;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.mc-list-view-subtext {
+  color: #9ca3af;
+  font-size: 12px;
+}
+
+.mc-list-view-rating {
+  height: 48px;
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+}
+
+.mc-list-view-rating-icon {
+  color: #ffc107;
+  height: 16px;
+  margin-right: 5px;
+}
+
+.mc-list-view-loading {
+  display: flex;
+  justify-content: center;
+  padding: 24px 0;
+}
+
+.mc-list-view-loading-text {
+  color: #9ca3af;
+  font-size: 14px;
+}
+
+.mc-list-view-gallery {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+.mc-list-view-gallery-actions {
+  display: flex;
+  width: 100%;
+  justify-content: flex-end;
+  padding: 10px 0;
+  box-sizing: border-box;
+}
+
+.mc-list-view-show-all {
+  color: rgb(103, 80, 164);
+  text-transform: none;
+}
diff --git a/src/samples/mediaco/components/ListView/ListView.tsx b/src/samples/mediaco/components/ListView/ListView.tsx
index f59fe73c..fac50ebd 100644
--- a/src/samples/mediaco/components/ListView/ListView.tsx
+++ b/src/samples/mediaco/components/ListView/ListView.tsx
@@ -8,6 +8,7 @@ import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { getActivityIcon, timeSince, CASE_TYPE_TO_ACTIVITY_MAP } from './helpers';
 import Carousel from '../Carousel';
 import GalleryGrid from '../GalleryGrid';
+import './ListView.scss';
 
 /** Custom MediaCo data pages that get the gallery/carousel/table treatment */
 const MEDIACO_DATA_PAGES = ['D_AccountHistoryList', 'D_TrendingItemsList', 'D_CarouselitemList'];
diff --git a/src/samples/mediaco/components/MultiStep/MultiStep.scss b/src/samples/mediaco/components/MultiStep/MultiStep.scss
new file mode 100644
index 00000000..4fb3814f
--- /dev/null
+++ b/src/samples/mediaco/components/MultiStep/MultiStep.scss
@@ -0,0 +1,193 @@
+.mc-multi-step-vertical {
+  background-color: transparent;
+  display: block;
+  text-align: left;
+}
+
+.mc-multi-step-vertical-step {
+  display: block;
+}
+
+.mc-multi-step-vertical-header {
+  overflow: hidden;
+  cursor: pointer;
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: 24px;
+  padding: 24px;
+}
+
+.mc-multi-step-icon {
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition:
+    background-color 0.3s ease,
+    transform 0.3s ease;
+}
+
+.mc-multi-step-icon-small {
+  margin-right: 12px;
+  height: 24px;
+  width: 24px;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.mc-multi-step-icon-large {
+  width: 40px;
+  height: 40px;
+  margin-bottom: 8px;
+  position: relative;
+  z-index: 2;
+}
+
+.mc-multi-step-icon-current {
+  background-color: #5a3a9b;
+  border: 1px solid #5a3a9b;
+  animation: mc-multi-step-pulse 2s infinite cubic-bezier(0.66, 0, 0, 1);
+}
+
+.mc-multi-step-icon-success {
+  background-color: #5a3a9b;
+  border: 1px solid #5a3a9b;
+}
+
+.mc-multi-step-icon-future {
+  background-color: #e6e0e9;
+  border: 1px solid #e6e0e9;
+}
+
+.mc-multi-step-icon-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.mc-multi-step-icon-check {
+  color: #fff;
+  font-size: 24px;
+  font-weight: 700;
+}
+
+.mc-multi-step-icon-index-current {
+  color: #fff;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.mc-multi-step-icon-index-default {
+  color: #49454f;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.mc-multi-step-vertical-title {
+  font-size: 14px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mc-multi-step-vertical-body {
+  margin-left: 36px;
+  position: relative;
+}
+
+.mc-multi-step-vertical-body-with-line::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: -16px;
+  bottom: -16px;
+  border-left: 1px solid #d3d3d3;
+}
+
+.mc-multi-step-vertical-body-last {
+  padding-bottom: 0;
+}
+
+.mc-multi-step-vertical-assignment {
+  padding-left: 20px;
+}
+
+.mc-multi-step-horizontal {
+  background-color: transparent;
+  display: block;
+}
+
+.mc-multi-step-horizontal-track {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-around;
+  padding: 24px 1.5rem;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+}
+
+.mc-multi-step-horizontal-segment {
+  display: contents;
+}
+
+.mc-multi-step-horizontal-step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 1rem 0;
+}
+
+.mc-multi-step-horizontal-label {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.mc-multi-step-label-future {
+  color: #49454f;
+}
+
+.mc-multi-step-label-active {
+  color: #333;
+}
+
+.mc-multi-step-horizontal-line {
+  height: 2px;
+  flex-grow: 1;
+  position: relative;
+  top: 19px;
+  z-index: 1;
+  margin: 1rem 0;
+  transition: background-color 0.3s ease;
+}
+
+.mc-multi-step-line-success {
+  background-color: #5a3a9b;
+}
+
+.mc-multi-step-line-default {
+  background-color: #e0e0e0;
+}
+
+.mc-multi-step-horizontal-assignment {
+  padding: 0 1.5rem 1rem;
+}
+
+@keyframes mc-multi-step-pulse {
+  0% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 rgba(106, 27, 154, 0.7);
+  }
+
+  70% {
+    transform: scale(1.05);
+    box-shadow: 0 0 0 10px rgba(106, 27, 154, 0);
+  }
+
+  100% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 rgba(106, 27, 154, 0);
+  }
+}
diff --git a/src/samples/mediaco/components/MultiStep/MultiStep.tsx b/src/samples/mediaco/components/MultiStep/MultiStep.tsx
index 8b2d8ad6..74451f6d 100644
--- a/src/samples/mediaco/components/MultiStep/MultiStep.tsx
+++ b/src/samples/mediaco/components/MultiStep/MultiStep.tsx
@@ -2,6 +2,7 @@ import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import MultiStep from '@pega/react-sdk-components/lib/components/infra/MultiStep';
+import './MultiStep.scss';
 
 interface MultiStepProps {
   getPConnect?: () => typeof PConnect;
diff --git a/src/samples/mediaco/components/QuickCreate/QuickCreate.scss b/src/samples/mediaco/components/QuickCreate/QuickCreate.scss
new file mode 100644
index 00000000..58ce95a5
--- /dev/null
+++ b/src/samples/mediaco/components/QuickCreate/QuickCreate.scss
@@ -0,0 +1,241 @@
+.mc-quick-create-root {
+  background-color: transparent;
+}
+
+.mc-quick-create-content {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.mc-quick-create-header {
+  display: flex;
+  margin-bottom: 32px;
+  padding: 0 4px;
+}
+
+.mc-quick-create-title {
+  font-size: 22px;
+  font-weight: 400;
+  color: #2c2c2c;
+  margin: 0 0 4px;
+}
+
+.mc-quick-create-title-underline {
+  height: 4px;
+  background-color: #9c27b0;
+  width: 100%;
+  border-radius: 2px;
+}
+
+.mc-quick-create-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-auto-rows: 1px;
+  grid-auto-flow: row dense;
+  gap: 16px;
+  width: 100%;
+  align-items: start;
+}
+
+.mc-card {
+  min-width: 0;
+}
+
+@media (min-width: 900px) {
+  .mc-quick-create-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.mc-quick-create-card {
+  background: #fff;
+  border-radius: 16px;
+  box-shadow:
+    0 1px 2px #0000004d,
+    0 2px 6px #00000026;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.mc-quick-create-card-live {
+  border: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.mc-quick-create-card-skeleton {
+  border: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.mc-quick-create-card-live:hover .mc-icon-box {
+  transform: scale(1.1) rotateZ(10deg);
+  transition: transform 0.3s ease;
+}
+
+.mc-quick-create-card-live:hover .mc-arrow {
+  transform: translateX(4px);
+  transition: transform 0.2s ease;
+}
+
+.mc-quick-create-card-header {
+  height: 140px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+  border-radius: 0 0 16px 16px;
+}
+
+.mc-quick-create-header-purple {
+  background: linear-gradient(135deg, rgb(184, 167, 212) 0%, rgb(212, 199, 232) 100%);
+}
+
+.mc-quick-create-header-pink {
+  background: linear-gradient(135deg, rgb(232, 168, 212) 0%, rgb(240, 199, 229) 100%);
+}
+
+.mc-quick-create-header-cyan {
+  background: linear-gradient(135deg, rgb(168, 212, 230) 0%, rgb(199, 229, 240) 100%);
+}
+
+.mc-quick-create-header-orange {
+  background: linear-gradient(135deg, rgb(240, 196, 179) 0%, rgb(245, 217, 204) 100%);
+}
+
+.mc-quick-create-header-magenta {
+  background: linear-gradient(135deg, rgb(212, 168, 207) 0%, rgb(232, 199, 229) 100%);
+}
+
+.mc-quick-create-watermark {
+  position: absolute;
+  opacity: 0.1;
+  transform: rotate(45deg) scale(8);
+  pointer-events: none;
+}
+
+.mc-quick-create-watermark-image {
+  color: #fff;
+  height: 48px;
+  width: 48px;
+  filter: brightness(0) saturate(100%) invert(100%);
+}
+
+.mc-quick-create-icon-box {
+  width: 80px;
+  height: 80px;
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  box-shadow: 0 8px 32px rgba(255, 255, 255, 0.4);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.mc-quick-create-icon-purple {
+  background: linear-gradient(135deg, #6750a4 0%, #8a7cc7 100%);
+}
+
+.mc-quick-create-icon-pink {
+  background: linear-gradient(135deg, #f814e3 0%, #ff6b9d 100%);
+}
+
+.mc-quick-create-icon-cyan {
+  background: linear-gradient(135deg, #00c9ff 0%, #92fe9d 100%);
+}
+
+.mc-quick-create-icon-orange {
+  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
+}
+
+.mc-quick-create-icon-magenta {
+  background: linear-gradient(135deg, #8a0786 0%, #c70bb5 100%);
+}
+
+.mc-quick-create-icon-image {
+  height: 45px;
+  filter: brightness(0) saturate(100%) invert(100%);
+}
+
+.mc-quick-create-card-body {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.mc-quick-create-card-title {
+  margin: 0 0 10px;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 24px;
+  color: #1a1a1a;
+}
+
+.mc-quick-create-card-description {
+  margin: 0 0 16px;
+  color: #555;
+  font-size: 14px;
+}
+
+.mc-quick-create-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 10px 24px;
+  border-radius: 30px;
+  background: transparent;
+  color: #a83fa1;
+  font-weight: 600;
+  font-size: 0.9rem;
+  border-color: #a83fa1;
+  text-transform: none;
+}
+
+.mc-quick-create-button:hover {
+  border-color: #a83fa1;
+  background: rgba(168, 63, 161, 0.04);
+}
+
+.mc-quick-create-arrow {
+  font-size: 20px;
+  height: 20px;
+  width: 20px;
+}
+
+.mc-quick-create-skeleton-header {
+  height: 140px;
+  border-radius: 0 0 16px 16px;
+  animation: mc-skeleton-loading 1s linear infinite alternate;
+}
+
+.mc-quick-create-skeleton-body {
+  padding: 16px;
+}
+
+.mc-quick-create-skeleton-line {
+  width: 100%;
+  height: 0.7rem;
+  margin-bottom: 0.5rem;
+  border-radius: 0.25rem;
+  animation: mc-skeleton-loading 1s linear infinite alternate;
+}
+
+.mc-quick-create-skeleton-button {
+  width: 100px;
+  height: 36px;
+  border-radius: 18px;
+  animation: mc-skeleton-loading 1s linear infinite alternate;
+}
+
+@keyframes mc-skeleton-loading {
+  0% {
+    background-color: hsl(200, 20%, 80%);
+  }
+
+  100% {
+    background-color: hsl(200, 20%, 95%);
+  }
+}
diff --git a/src/samples/mediaco/components/QuickCreate/QuickCreate.tsx b/src/samples/mediaco/components/QuickCreate/QuickCreate.tsx
index e50683f1..9e2a0086 100644
--- a/src/samples/mediaco/components/QuickCreate/QuickCreate.tsx
+++ b/src/samples/mediaco/components/QuickCreate/QuickCreate.tsx
@@ -6,6 +6,7 @@ import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 import useMasonry from '../../hooks/useMasonry';
 import { QUICK_LINKS_DATA } from './data';
+import './QuickCreate.scss';
 
 const headerGradientClassMap: Record<string, string> = {
   'bg-purple': 'mc-quick-create-header-purple',
diff --git a/src/samples/mediaco/components/WssNavBar/WssNavBar.scss b/src/samples/mediaco/components/WssNavBar/WssNavBar.scss
new file mode 100644
index 00000000..5515a766
--- /dev/null
+++ b/src/samples/mediaco/components/WssNavBar/WssNavBar.scss
@@ -0,0 +1,182 @@
+.mc-wss-layout {
+  display: flex;
+  min-height: 100vh;
+  width: 100%;
+}
+
+.mc-wss-drawer-root {
+  flex-shrink: 0;
+}
+
+.mc-wss-drawer-paper {
+  overflow-x: hidden;
+  background-color: #fef7ff;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding-top: 2rem;
+  transition: width 0.2s ease-in-out;
+  position: relative;
+}
+
+.mc-wss-drawer-paper-collapsed {
+  width: 5rem;
+  padding-left: 3.5px;
+  padding-right: 3.5px;
+}
+
+.mc-wss-drawer-paper-expanded {
+  width: 15rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.mc-wss-toggle {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 56px;
+  height: 56px;
+  border-radius: 16px;
+  background-color: rgba(63, 81, 181, 0.1);
+  cursor: pointer;
+}
+
+.mc-wss-toggle-icon {
+  color: #6750a4;
+  padding: 0;
+}
+
+.mc-wss-toggle-collapsed {
+  margin-left: 0.75rem;
+  margin-right: 0.75rem;
+  align-self: center;
+}
+
+.mc-wss-toggle-expanded {
+  margin-left: 0;
+  margin-right: 0;
+  align-self: flex-start;
+}
+
+.mc-wss-nav-item {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 16px;
+  transition: all 0.2s ease-in-out;
+}
+
+.mc-wss-nav-item-default,
+.mc-wss-nav-item-default .mc-wss-nav-icon {
+  color: #49454f;
+}
+
+.mc-wss-nav-icon-button {
+  color: inherit;
+  padding: 8px;
+}
+
+.mc-wss-nav-item-collapsed {
+  justify-content: center;
+  flex-direction: column;
+}
+
+.mc-wss-nav-item-expanded {
+  justify-content: flex-start;
+  flex-direction: row;
+}
+
+.mc-wss-nav-item:hover,
+.mc-wss-nav-item-active {
+  background-color: rgba(63, 81, 181, 0.1);
+}
+
+.mc-wss-nav-item-active,
+.mc-wss-nav-item-active .mc-wss-nav-icon {
+  color: #6750a4;
+}
+
+.mc-wss-nav-label {
+  font-size: 14px;
+  text-align: center;
+  max-width: 100%;
+}
+
+.mc-wss-nav-item-collapsed .mc-wss-nav-label {
+  font-size: 12px;
+  margin-top: 4px;
+  white-space: normal;
+}
+
+.mc-wss-nav-item-expanded .mc-wss-nav-label {
+  white-space: nowrap;
+  margin-top: 0;
+}
+
+.mc-wss-main {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.mc-wss-appbar {
+  background-color: #fff;
+  color: #333;
+  z-index: 10;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.mc-wss-toolbar {
+  justify-content: space-between;
+}
+
+.mc-wss-brand {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.mc-wss-brand-logo {
+  height: 32px;
+  margin-right: 12px;
+}
+
+.mc-wss-brand-name {
+  font-weight: 500;
+}
+
+.mc-wss-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.mc-wss-circle-icon {
+  background: linear-gradient(135deg, rgb(255, 179, 217) 0%, rgb(255, 196, 232) 100%);
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #333;
+  margin-right: 4px;
+}
+
+.mc-wss-circle-icon-clickable {
+  cursor: pointer;
+}
+
+.mc-wss-menu-paper {
+  padding: 0;
+}
+
+.mc-wss-content {
+  flex: 1;
+  background-color: #fff;
+  width: 100%;
+}
diff --git a/src/samples/mediaco/components/WssNavBar/WssNavBar.tsx b/src/samples/mediaco/components/WssNavBar/WssNavBar.tsx
index 8acc5be6..bfc50be3 100644
--- a/src/samples/mediaco/components/WssNavBar/WssNavBar.tsx
+++ b/src/samples/mediaco/components/WssNavBar/WssNavBar.tsx
@@ -14,7 +14,7 @@ import DashboardIcon from '@mui/icons-material/Dashboard';
 import PersonIcon from '@mui/icons-material/Person';
 import NotificationsIcon from '@mui/icons-material/Notifications';
 import { logout } from '@pega/auth/lib/sdk-auth-manager';
-
+import './WssNavBar.scss';
 import Footer from '../Footer/Footer';
 
 interface WssNavBarProps {
diff --git a/src/samples/mediaco/mediaCoStyles.scss b/src/samples/mediaco/mediaCoStyles.scss
index d6a86ddc..652903de 100644
--- a/src/samples/mediaco/mediaCoStyles.scss
+++ b/src/samples/mediaco/mediaCoStyles.scss
@@ -1,315 +1,35 @@
-.mc-app-shell {
-  display: flex;
-  width: 100%;
-  min-height: 100vh;
-  background-color: #fff;
-}
-
-.mc-banner-root {
-  width: 100%;
-  background-color: #fff;
-}
-
-.mc-banner-header {
-  position: sticky;
-  top: 64px;
-  background-color: #fff;
-  z-index: 10;
-  padding-bottom: 2rem;
-  width: 100%;
-}
-
-.mc-banner-header-inner {
-  width: 100%;
-  text-align: center;
-}
-
-.mc-banner-header-stack {
-  display: flex;
-  flex-direction: column;
-  padding-top: 5rem;
-  gap: 0.5rem;
-}
-
-.mc-banner-header-content {
-  justify-content: center;
-  display: inline-grid;
-}
-
-.mc-banner-title {
-  margin: 0;
-  font-size: 36px;
-  color: #46185a;
-  font-weight: 700;
-}
-
-.mc-banner-message {
-  font-size: 14px;
-  margin-top: 16px;
-  color: #49454f;
-}
-
-.mc-banner-survey-wrap {
-  display: flex;
-  justify-content: center;
-  width: 100%;
-  padding: 1rem 0;
-}
-
-.mc-banner-survey-card {
-  display: flex;
-  align-items: center;
-  gap: 24px;
-  background: linear-gradient(135deg, rgb(103, 80, 164) 0%, rgb(248, 20, 227) 50%, rgb(0, 201, 255) 100%);
-  background-size: 200% 200%;
-  border-radius: 24px;
-  padding: 24px 32px;
-  width: 670px;
-  max-width: 100%;
-  color: #fff;
-  box-shadow: 0 8px 20px rgba(94, 75, 159, 0.25);
-  font-family: 'Roboto', sans-serif;
-  text-align: left;
-}
-
-.mc-banner-survey-icon-wrap {
-  flex-shrink: 0;
-}
+/* ========== MediaCo: Common / Global styles ========== */
+/* Component-specific styles live in their respective component folders. */
+/* This file only contains shared/global overrides. */
 
-.mc-banner-survey-icon-box {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 72px;
-  height: 72px;
+/*========== MediaCo: Case creation dialog (ModalViewContainer) ========== */
+/* Near-full-screen case-creation dialog — uses :has() to avoid MUI class selectors */
+div:has(> .psdk-dialog-title) {
+  width: 90vw !important;
+  max-width: 1200px !important;
+  max-height: 90vh !important;
   border-radius: 16px;
-  background-color: rgba(255, 255, 255, 0.15);
-  backdrop-filter: blur(4px);
-}
-
-.mc-banner-survey-icon-image {
-  height: 35px;
-  filter: brightness(0) saturate(100%) invert(100%);
-}
-
-.mc-banner-survey-text {
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-}
-
-.mc-banner-survey-title {
-  margin: 0 0 6px;
-  font-size: 22px;
-  font-weight: 400;
-}
-
-.mc-banner-survey-message {
-  margin: 0;
-  font-size: 15px;
-  opacity: 0.9;
-  font-weight: 400;
-  line-height: 1.4;
-}
-
-.mc-banner-survey-action {
-  flex-shrink: 0;
-}
-
-.mc-banner-survey-button {
-  background-color: #fff;
-  color: #5c4498;
-  border: none;
-  padding: 12px 28px;
-  border-radius: 50px;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  letter-spacing: 0.1px;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 20px;
-  text-transform: none;
 }
 
-.mc-banner-survey-button:hover {
-  background-color: #f0f0f0;
-}
-
-.mc-banner-survey-button-icon {
-  font-size: 20px;
-}
-
-.mc-banner-content {
-  position: relative;
-  z-index: 1;
-  display: grid;
-  column-gap: 1rem;
-  gap: 1.5rem;
-  align-items: start;
-  background: #fff;
-  padding: 40px 44px 16px;
-  border-top-left-radius: 28px;
-  grid-template-columns: 1fr;
-}
-
-.mc-banner-content--two-column,
-.mc-banner-content--wide-narrow,
-.mc-banner-content--narrow-wide {
-  grid-template-columns: 1fr;
-}
-
-.mc-banner-region {
-  min-width: 0;
-}
-
-@media (min-width: 1200px) {
-  .mc-banner-content--two-column {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .mc-banner-content--wide-narrow {
-    grid-template-columns: 7fr 3fr;
-  }
-
-  .mc-banner-content--narrow-wide {
-    grid-template-columns: 3fr 7fr;
-  }
-}
-
-@media (max-width: 768px) {
-  .mc-banner-survey-card {
-    flex-direction: column;
-    text-align: center;
-    padding: 32px 24px;
-  }
-
-  .mc-banner-survey-text {
-    align-items: center;
-  }
-}
-
-.mc-footer {
+.psdk-dialog-title {
   background-color: #f7f2fa;
-  color: #333;
-  padding: 30px 0;
-}
-
-.mc-footer-container {
-  margin: 0 auto;
-  padding: 0 20px;
-}
-
-.mc-footer-top {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  gap: 2rem;
-  margin-bottom: 2rem;
-}
-
-.mc-footer-column {
-  flex: 1;
-  min-width: 220px;
-  margin-bottom: 20px;
-  padding-left: 10px;
-}
-
-.mc-footer-column-title {
-  font-weight: 700;
-  margin-bottom: 15px;
-  font-size: 18px;
-}
-
-.mc-footer-about {
-  line-height: 1.6;
-  margin-bottom: 20px;
-  padding-top: 4px;
-}
-
-.mc-footer-social-row {
-  display: flex;
-}
-
-.mc-footer-social-button {
-  width: 40px;
-  height: 40px;
-  margin-right: 10px;
-  background-color: #edeaf2;
-}
-
-.mc-footer-social-button:hover {
-  background-color: #6750a4;
-}
-
-.mc-footer-social-button:hover .mc-footer-social-icon {
-  color: #fff;
-}
-
-.mc-footer-link-item {
-  padding: 4px 0;
-}
-
-.mc-footer-link-item:hover {
-  background-color: transparent;
-  transform: translateX(4px);
-  transition: transform 0.3s ease;
-}
-
-.mc-footer-link-text {
-  color: #49454f;
-  font-size: 0.9rem;
-}
-
-.mc-footer-link-item:hover .mc-footer-link-text {
-  color: #6750a4;
-}
-
-.mc-footer-contact-list {
-  padding-top: 1rem;
-}
-
-.mc-footer-contact-icon {
-  color: #6750a4;
-  margin-right: 10px;
-}
-
-.mc-footer-contact-item {
-  display: flex;
-  align-items: flex-start;
-  margin-bottom: 15px;
-  font-size: 14px;
-}
-
-.mc-footer-bottom {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: center;
-  padding-top: 20px;
-  font-size: 14px;
-}
-
-.mc-footer-copyright {
-  color: #555;
+  color: #46185a;
+  font-weight: 600;
+  border-bottom: 1px solid #e0e0e0;
 }
 
-.mc-footer-bottom-links {
-  display: flex;
-  flex-wrap: wrap;
+.psdk-dialog-content {
+  padding: 24px !important;
 }
 
-.mc-footer-bottom-link {
-  color: #555;
-  text-decoration: none;
-  margin-left: 20px;
-  cursor: pointer;
+/* ========== MediaCo: Prevent AppShell whitesmoke/gray backgrounds ========== */
+.appshell-top,
+.appshell-main {
+  background-color: #fff !important;
 }
 
-.mc-footer-bottom-link:hover {
-  color: #6750a4;
+body {
+  background-color: #fff !important;
 }
 
 /* ========== MediaCo WSS: SelfServiceCaseView styling (targets SDK psdk-* classes) ========== */
@@ -390,1181 +110,6 @@
   padding: 0 0.3125rem;
 }
 
-.mc-list-view-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  margin-bottom: 28px;
-}
-
-.mc-list-view-header-title-wrap {
-  display: flex;
-  padding: 0 4px;
-}
-
-.mc-list-view-header-title-content {
-  display: flex;
-  flex-direction: column;
-}
-
-.mc-list-view-title {
-  font-size: 22px;
-  font-weight: 400;
-  color: #2c2c2c;
-  margin: 0 0 4px;
-}
-
-.mc-list-view-title-underline {
-  height: 4px;
-  background-color: #9c27b0;
-  width: 100%;
-  border-radius: 2px;
-}
-
-.mc-list-view-arrow-button {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 8px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.mc-list-view-arrow-icon {
-  color: #6750a4;
-}
-
-.mc-list-view-table {
-  background-color: #fff;
-  border-radius: 12px;
-  box-shadow:
-    0 1px 2px rgba(0, 0, 0, 0.3),
-    0 1px 3px rgba(0, 0, 0, 0.15);
-  position: relative;
-  overflow: hidden;
-}
-
-.mc-list-view-row {
-  display: flex;
-  align-items: flex-start;
-  padding: 20px 25px;
-  position: relative;
-  background-color: #fff;
-  transition: background-color 0.3s ease;
-  border-bottom: 1px solid #e5e7eb;
-}
-
-.mc-list-view-row-last {
-  border-bottom: none;
-}
-
-.mc-list-view-row:hover {
-  background-color: #f6f5f5;
-}
-
-.mc-list-view-icon-box {
-  width: 48px;
-  height: 48px;
-  border-radius: 17px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  flex-shrink: 0;
-  transition: transform 0.3s ease;
-}
-
-.mc-list-view-row:hover .mc-list-view-icon-box {
-  transform: scale(1.05);
-}
-
-.mc-list-view-icon-box-0 {
-  background-color: #ede9fe;
-}
-
-.mc-list-view-icon-box-1 {
-  background-color: #fce7f3;
-}
-
-.mc-list-view-icon-box-2 {
-  background-color: #e0f2fe;
-}
-
-.mc-list-view-icon-box-3 {
-  background-color: #ffedd5;
-}
-
-.mc-list-view-icon-box-4 {
-  background-color: #f3e8ff;
-}
-
-.mc-list-view-icon-box-5 {
-  background-color: #d1fae5;
-}
-
-.mc-list-view-icon-image {
-  width: 24px;
-  height: 24px;
-  object-fit: contain;
-}
-
-.mc-list-view-icon-index {
-  font-weight: 600;
-  font-size: 14px;
-}
-
-.mc-list-view-icon-filter-0 {
-  filter: brightness(0) saturate(100%) invert(20%) sepia(80%) hue-rotate(250deg) saturate(500%);
-}
-
-.mc-list-view-icon-filter-1 {
-  filter: brightness(0) saturate(100%) invert(20%) sepia(80%) hue-rotate(320deg) saturate(500%);
-}
-
-.mc-list-view-icon-filter-2 {
-  filter: brightness(0) saturate(100%) invert(20%) sepia(80%) hue-rotate(190deg) saturate(500%);
-}
-
-.mc-list-view-icon-filter-3 {
-  filter: brightness(0) saturate(100%) invert(20%) sepia(80%) hue-rotate(25deg) saturate(500%);
-}
-
-.mc-list-view-icon-filter-4 {
-  filter: brightness(0) saturate(100%) invert(20%) sepia(80%) hue-rotate(120deg) saturate(500%);
-}
-
-.mc-list-view-icon-filter-5 {
-  filter: brightness(0) saturate(100%) invert(20%) sepia(80%) hue-rotate(90deg) saturate(500%);
-}
-
-.mc-list-view-content {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  margin-left: 12px;
-  height: 48px;
-  flex: 1;
-}
-
-.mc-list-view-content-top {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.mc-list-view-content-bottom {
-  color: #4b5563;
-  font-size: 14px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.mc-list-view-item-title {
-  font-weight: 600;
-  font-size: 14px;
-}
-
-.mc-list-view-dot {
-  width: 3px;
-  height: 3px;
-  background-color: #9ca3af;
-  border-radius: 50%;
-  display: inline-block;
-}
-
-.mc-list-view-subtext {
-  color: #9ca3af;
-  font-size: 12px;
-}
-
-.mc-list-view-rating {
-  height: 48px;
-  display: flex;
-  align-items: center;
-  margin-left: auto;
-}
-
-.mc-list-view-rating-icon {
-  color: #ffc107;
-  height: 16px;
-  margin-right: 5px;
-}
-
-.mc-list-view-loading {
-  display: flex;
-  justify-content: center;
-  padding: 24px 0;
-}
-
-.mc-list-view-loading-text {
-  color: #9ca3af;
-  font-size: 14px;
-}
-
-.mc-list-view-gallery {
-  display: block;
-  width: 100%;
-  max-width: 100%;
-  overflow: hidden;
-  position: relative;
-}
-
-.mc-list-view-gallery-actions {
-  display: flex;
-  width: 100%;
-  justify-content: flex-end;
-  padding: 10px 0;
-  box-sizing: border-box;
-}
-
-.mc-list-view-show-all {
-  color: rgb(103, 80, 164);
-  text-transform: none;
-}
-
-.mc-multi-step-vertical {
-  background-color: transparent;
-  display: block;
-  text-align: left;
-}
-
-.mc-multi-step-vertical-step {
-  display: block;
-}
-
-.mc-multi-step-vertical-header {
-  overflow: hidden;
-  cursor: pointer;
-  position: relative;
-  display: flex;
-  align-items: center;
-  min-height: 24px;
-  padding: 24px;
-}
-
-.mc-multi-step-icon {
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition:
-    background-color 0.3s ease,
-    transform 0.3s ease;
-}
-
-.mc-multi-step-icon-small {
-  margin-right: 12px;
-  height: 24px;
-  width: 24px;
-  flex-shrink: 0;
-  position: relative;
-}
-
-.mc-multi-step-icon-large {
-  width: 40px;
-  height: 40px;
-  margin-bottom: 8px;
-  position: relative;
-  z-index: 2;
-}
-
-.mc-multi-step-icon-current {
-  background-color: #5a3a9b;
-  border: 1px solid #5a3a9b;
-  animation: mc-multi-step-pulse 2s infinite cubic-bezier(0.66, 0, 0, 1);
-}
-
-.mc-multi-step-icon-success {
-  background-color: #5a3a9b;
-  border: 1px solid #5a3a9b;
-}
-
-.mc-multi-step-icon-future {
-  background-color: #e6e0e9;
-  border: 1px solid #e6e0e9;
-}
-
-.mc-multi-step-icon-content {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.mc-multi-step-icon-check {
-  color: #fff;
-  font-size: 24px;
-  font-weight: 700;
-}
-
-.mc-multi-step-icon-index-current {
-  color: #fff;
-  font-size: 16px;
-  font-weight: 500;
-}
-
-.mc-multi-step-icon-index-default {
-  color: #49454f;
-  font-size: 16px;
-  font-weight: 500;
-}
-
-.mc-multi-step-vertical-title {
-  font-size: 14px;
-  font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.mc-multi-step-vertical-body {
-  margin-left: 36px;
-  position: relative;
-}
-
-.mc-multi-step-vertical-body-with-line::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: -16px;
-  bottom: -16px;
-  border-left: 1px solid #d3d3d3;
-}
-
-.mc-multi-step-vertical-body-last {
-  padding-bottom: 0;
-}
-
-.mc-multi-step-vertical-assignment {
-  padding-left: 20px;
-}
-
-.mc-multi-step-horizontal {
-  background-color: transparent;
-  display: block;
-}
-
-.mc-multi-step-horizontal-track {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-around;
-  padding: 24px 1.5rem;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
-}
-
-.mc-multi-step-horizontal-segment {
-  display: contents;
-}
-
-.mc-multi-step-horizontal-step {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  padding: 1rem 0;
-}
-
-.mc-multi-step-horizontal-label {
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.mc-multi-step-label-future {
-  color: #49454f;
-}
-
-.mc-multi-step-label-active {
-  color: #333;
-}
-
-.mc-multi-step-horizontal-line {
-  height: 2px;
-  flex-grow: 1;
-  position: relative;
-  top: 19px;
-  z-index: 1;
-  margin: 1rem 0;
-  transition: background-color 0.3s ease;
-}
-
-.mc-multi-step-line-success {
-  background-color: #5a3a9b;
-}
-
-.mc-multi-step-line-default {
-  background-color: #e0e0e0;
-}
-
-.mc-multi-step-horizontal-assignment {
-  padding: 0 1.5rem 1rem;
-}
-
-@keyframes mc-multi-step-pulse {
-  0% {
-    transform: scale(1);
-    box-shadow: 0 0 0 0 rgba(106, 27, 154, 0.7);
-  }
-
-  70% {
-    transform: scale(1.05);
-    box-shadow: 0 0 0 10px rgba(106, 27, 154, 0);
-  }
-
-  100% {
-    transform: scale(1);
-    box-shadow: 0 0 0 0 rgba(106, 27, 154, 0);
-  }
-}
-
-.mc-quick-create-root {
-  background-color: transparent;
-}
-
-.mc-quick-create-content {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.mc-quick-create-header {
-  display: flex;
-  margin-bottom: 32px;
-  padding: 0 4px;
-}
-
-.mc-quick-create-title {
-  font-size: 22px;
-  font-weight: 400;
-  color: #2c2c2c;
-  margin: 0 0 4px;
-}
-
-.mc-quick-create-title-underline {
-  height: 4px;
-  background-color: #9c27b0;
-  width: 100%;
-  border-radius: 2px;
-}
-
-.mc-quick-create-grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-auto-rows: 1px;
-  grid-auto-flow: row dense;
-  gap: 16px;
-  width: 100%;
-  align-items: start;
-}
-
-.mc-card {
-  min-width: 0;
-}
-
-@media (min-width: 900px) {
-  .mc-quick-create-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-.mc-quick-create-card {
-  background: #fff;
-  border-radius: 16px;
-  box-shadow:
-    0 1px 2px #0000004d,
-    0 2px 6px #00000026;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.mc-quick-create-card-live {
-  border: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-.mc-quick-create-card-skeleton {
-  border: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-.mc-quick-create-card-live:hover .mc-icon-box {
-  transform: scale(1.1) rotateZ(10deg);
-  transition: transform 0.3s ease;
-}
-
-.mc-quick-create-card-live:hover .mc-arrow {
-  transform: translateX(4px);
-  transition: transform 0.2s ease;
-}
-
-.mc-quick-create-card-header {
-  height: 140px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  overflow: hidden;
-  border-radius: 0 0 16px 16px;
-}
-
-.mc-quick-create-header-purple {
-  background: linear-gradient(135deg, rgb(184, 167, 212) 0%, rgb(212, 199, 232) 100%);
-}
-
-.mc-quick-create-header-pink {
-  background: linear-gradient(135deg, rgb(232, 168, 212) 0%, rgb(240, 199, 229) 100%);
-}
-
-.mc-quick-create-header-cyan {
-  background: linear-gradient(135deg, rgb(168, 212, 230) 0%, rgb(199, 229, 240) 100%);
-}
-
-.mc-quick-create-header-orange {
-  background: linear-gradient(135deg, rgb(240, 196, 179) 0%, rgb(245, 217, 204) 100%);
-}
-
-.mc-quick-create-header-magenta {
-  background: linear-gradient(135deg, rgb(212, 168, 207) 0%, rgb(232, 199, 229) 100%);
-}
-
-.mc-quick-create-watermark {
-  position: absolute;
-  opacity: 0.1;
-  transform: rotate(45deg) scale(8);
-  pointer-events: none;
-}
-
-.mc-quick-create-watermark-image {
-  color: #fff;
-  height: 48px;
-  width: 48px;
-  filter: brightness(0) saturate(100%) invert(100%);
-}
-
-.mc-quick-create-icon-box {
-  width: 80px;
-  height: 80px;
-  border-radius: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1;
-  box-shadow: 0 8px 32px rgba(255, 255, 255, 0.4);
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-
-.mc-quick-create-icon-purple {
-  background: linear-gradient(135deg, #6750a4 0%, #8a7cc7 100%);
-}
-
-.mc-quick-create-icon-pink {
-  background: linear-gradient(135deg, #f814e3 0%, #ff6b9d 100%);
-}
-
-.mc-quick-create-icon-cyan {
-  background: linear-gradient(135deg, #00c9ff 0%, #92fe9d 100%);
-}
-
-.mc-quick-create-icon-orange {
-  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
-}
-
-.mc-quick-create-icon-magenta {
-  background: linear-gradient(135deg, #8a0786 0%, #c70bb5 100%);
-}
-
-.mc-quick-create-icon-image {
-  height: 45px;
-  filter: brightness(0) saturate(100%) invert(100%);
-}
-
-.mc-quick-create-card-body {
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-}
-
-.mc-quick-create-card-title {
-  margin: 0 0 10px;
-  font-size: 16px;
-  font-weight: 500;
-  line-height: 24px;
-  color: #1a1a1a;
-}
-
-.mc-quick-create-card-description {
-  margin: 0 0 16px;
-  color: #555;
-  font-size: 14px;
-}
-
-.mc-quick-create-button {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  padding: 10px 24px;
-  border-radius: 30px;
-  background: transparent;
-  color: #a83fa1;
-  font-weight: 600;
-  font-size: 0.9rem;
-  border-color: #a83fa1;
-  text-transform: none;
-}
-
-.mc-quick-create-button:hover {
-  border-color: #a83fa1;
-  background: rgba(168, 63, 161, 0.04);
-}
-
-.mc-quick-create-arrow {
-  font-size: 20px;
-  height: 20px;
-  width: 20px;
-}
-
-.mc-quick-create-skeleton-header {
-  height: 140px;
-  border-radius: 0 0 16px 16px;
-  animation: mc-skeleton-loading 1s linear infinite alternate;
-}
-
-.mc-quick-create-skeleton-body {
-  padding: 16px;
-}
-
-.mc-quick-create-skeleton-line {
-  width: 100%;
-  height: 0.7rem;
-  margin-bottom: 0.5rem;
-  border-radius: 0.25rem;
-  animation: mc-skeleton-loading 1s linear infinite alternate;
-}
-
-.mc-quick-create-skeleton-button {
-  width: 100px;
-  height: 36px;
-  border-radius: 18px;
-  animation: mc-skeleton-loading 1s linear infinite alternate;
-}
-
-@keyframes mc-skeleton-loading {
-  0% {
-    background-color: hsl(200, 20%, 80%);
-  }
-
-  100% {
-    background-color: hsl(200, 20%, 95%);
-  }
-}
-
-.mc-wss-layout {
-  display: flex;
-  min-height: 100vh;
-  width: 100%;
-}
-
-.mc-wss-drawer-root {
-  flex-shrink: 0;
-}
-
-.mc-wss-drawer-paper {
-  overflow-x: hidden;
-  background-color: #fef7ff;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  padding-top: 2rem;
-  transition: width 0.2s ease-in-out;
-  position: relative;
-}
-
-.mc-wss-drawer-paper-collapsed {
-  width: 5rem;
-  padding-left: 3.5px;
-  padding-right: 3.5px;
-}
-
-.mc-wss-drawer-paper-expanded {
-  width: 15rem;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-}
-
-.mc-wss-toggle {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 56px;
-  height: 56px;
-  border-radius: 16px;
-  background-color: rgba(63, 81, 181, 0.1);
-  cursor: pointer;
-}
-
-.mc-wss-toggle-icon {
-  color: #6750a4;
-  padding: 0;
-}
-
-.mc-wss-toggle-collapsed {
-  margin-left: 0.75rem;
-  margin-right: 0.75rem;
-  align-self: center;
-}
-
-.mc-wss-toggle-expanded {
-  margin-left: 0;
-  margin-right: 0;
-  align-self: flex-start;
-}
-
-.mc-wss-nav-item {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  padding: 8px;
-  border-radius: 16px;
-  transition: all 0.2s ease-in-out;
-}
-
-.mc-wss-nav-item-default,
-.mc-wss-nav-item-default .mc-wss-nav-icon {
-  color: #49454f;
-}
-
-.mc-wss-nav-icon-button {
-  color: inherit;
-  padding: 8px;
-}
-
-.mc-wss-nav-item-collapsed {
-  justify-content: center;
-  flex-direction: column;
-}
-
-.mc-wss-nav-item-expanded {
-  justify-content: flex-start;
-  flex-direction: row;
-}
-
-.mc-wss-nav-item:hover,
-.mc-wss-nav-item-active {
-  background-color: rgba(63, 81, 181, 0.1);
-}
-
-.mc-wss-nav-item-active,
-.mc-wss-nav-item-active .mc-wss-nav-icon {
-  color: #6750a4;
-}
-
-.mc-wss-nav-label {
-  font-size: 14px;
-  text-align: center;
-  max-width: 100%;
-}
-
-.mc-wss-nav-item-collapsed .mc-wss-nav-label {
-  font-size: 12px;
-  margin-top: 4px;
-  white-space: normal;
-}
-
-.mc-wss-nav-item-expanded .mc-wss-nav-label {
-  white-space: nowrap;
-  margin-top: 0;
-}
-
-.mc-wss-main {
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-}
-
-.mc-wss-appbar {
-  background-color: #fff;
-  color: #333;
-  z-index: 10;
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.mc-wss-toolbar {
-  justify-content: space-between;
-}
-
-.mc-wss-brand {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-}
-
-.mc-wss-brand-logo {
-  height: 32px;
-  margin-right: 12px;
-}
-
-.mc-wss-brand-name {
-  font-weight: 500;
-}
-
-.mc-wss-actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.mc-wss-circle-icon {
-  background: linear-gradient(135deg, rgb(255, 179, 217) 0%, rgb(255, 196, 232) 100%);
-  border-radius: 50%;
-  width: 40px;
-  height: 40px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: #333;
-  margin-right: 4px;
-}
-
-.mc-wss-circle-icon-clickable {
-  cursor: pointer;
-}
-
-.mc-wss-menu-paper {
-  padding: 0;
-}
-
-.mc-wss-content {
-  flex: 1;
-  background-color: #fff;
-  width: 100%;
-}
-
-.mc-gallery-dialog-paper {
-  width: 100%;
-  max-width: 1400px;
-  max-height: 90vh;
-  background: #f8f2fb;
-}
-
-.mc-gallery-dialog {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-}
-
-.mc-gallery-dialog-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1.5rem 2rem;
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.mc-gallery-close-button {
-  color: #49454f;
-}
-
-.mc-gallery-dialog-title {
-  font-size: 45px;
-  font-weight: 400;
-  line-height: 52px;
-  margin: 0;
-}
-
-.mc-gallery-dialog-subtitle {
-  color: #6b7280;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 20px;
-}
-
-.mc-gallery-carousel-grid {
-  flex: 1;
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
-  gap: 20px;
-  padding: 24px;
-  overflow-y: auto;
-}
-
-.mc-gallery-carousel-item {
-  position: relative;
-  border: 1px solid #e0e0e0;
-  border-radius: 1.5rem;
-  transition: transform 0.2s;
-  aspect-ratio: 4 / 3;
-  overflow: hidden;
-}
-
-.mc-gallery-carousel-item:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
-}
-
-.mc-gallery-carousel-image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-
-.mc-gallery-carousel-label {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  margin: 0;
-  padding: 16px;
-  font-weight: 500;
-  color: #fff;
-  font-size: 16px;
-}
-
-.mc-gallery-table-grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 22px;
-  padding: 1.5rem 2rem;
-  overflow-y: auto;
-}
-
-@media (min-width: 900px) {
-  .mc-gallery-table-grid {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
-.mc-gallery-table-card {
-  border: 1px solid #e0e0e0;
-  border-radius: 20px;
-  box-shadow:
-    0 1px 2px #0000004d,
-    0 2px 6px #00000026;
-  padding: 18px;
-  transition: transform 0.1s;
-  background: #f3edf7;
-}
-
-.mc-gallery-table-card:hover {
-  transform: scale(1.01);
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
-}
-
-.mc-gallery-table-card-content {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-.mc-gallery-table-icon-box {
-  min-width: 64px;
-  min-height: 64px;
-  border-radius: 12px;
-  display: grid;
-  place-items: center;
-}
-
-.mc-gallery-table-icon-box-0 {
-  background-color: #ede9fe;
-}
-
-.mc-gallery-table-icon-box-1 {
-  background-color: #fce7f3;
-}
-
-.mc-gallery-table-icon-box-2 {
-  background-color: #e0f2fe;
-}
-
-.mc-gallery-table-icon-box-3 {
-  background-color: #ffedd5;
-}
-
-.mc-gallery-table-icon-box-4 {
-  background-color: #f3e8ff;
-}
-
-.mc-gallery-table-icon-box-5 {
-  background-color: #d1fae5;
-}
-
-.mc-gallery-table-icon-image {
-  display: block;
-  border-radius: 8px;
-  width: 24px;
-  height: 24px;
-}
-
-.mc-gallery-table-icon-filter-0 {
-  filter: brightness(0) saturate(100%) invert(20%) sepia(80%) hue-rotate(250deg) saturate(500%);
-}
-
-.mc-gallery-table-icon-filter-1 {
-  filter: brightness(0) saturate(100%) invert(20%) sepia(80%) hue-rotate(320deg) saturate(500%);
-}
-
-.mc-gallery-table-icon-filter-2 {
-  filter: brightness(0) saturate(100%) invert(20%) sepia(80%) hue-rotate(190deg) saturate(500%);
-}
-
-.mc-gallery-table-icon-filter-3 {
-  filter: brightness(0) saturate(100%) invert(20%) sepia(80%) hue-rotate(25deg) saturate(500%);
-}
-
-.mc-gallery-table-icon-filter-4 {
-  filter: brightness(0) saturate(100%) invert(20%) sepia(80%) hue-rotate(120deg) saturate(500%);
-}
-
-.mc-gallery-table-icon-filter-5 {
-  filter: brightness(0) saturate(100%) invert(20%) sepia(80%) hue-rotate(90deg) saturate(500%);
-}
-
-.mc-gallery-table-text {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.mc-gallery-table-title {
-  font-size: 22px;
-  font-weight: 400;
-  line-height: 28px;
-  color: #1d1b20;
-}
-
-.mc-gallery-table-description {
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 20px;
-  letter-spacing: 0.25px;
-}
-
-.mc-carousel-root {
-  width: 100%;
-  position: relative;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.mc-carousel-track {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  max-width: 100%;
-  overflow-x: auto;
-  overflow-y: hidden;
-  scroll-behavior: auto;
-  border-radius: 12px;
-  scrollbar-width: none;
-}
-
-.mc-carousel-track::-webkit-scrollbar {
-  display: none;
-}
-
-.mc-carousel-item,
-.mc-carousel-skeleton-item {
-  flex: 0 0 200px;
-  height: 350px;
-  margin: 0 10px;
-  border-radius: 8px;
-}
-
-.mc-carousel-item {
-  transition:
-    flex-basis 0.1s linear,
-    min-width 0.1s linear;
-  will-change: flex-basis, min-width;
-  min-width: 0;
-}
-
-.mc-carousel-skeleton-item {
-  background: linear-gradient(90deg, #e0e0e0 25%, #ececec 50%, #e0e0e0 75%);
-  background-size: 200% 100%;
-  animation: mc-carousel-shimmer 1.5s infinite;
-}
-
-@keyframes mc-carousel-shimmer {
-  0% {
-    background-position: 200% 0;
-  }
-
-  100% {
-    background-position: -200% 0;
-  }
-}
-
-.mc-carousel-card {
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  overflow: hidden;
-  position: relative;
-  background: #000;
-  border-radius: 8px;
-}
-
-.mc-carousel-image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-
-.mc-carousel-overlay {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  padding: 16px;
-  background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
-  color: #fff;
-}
-
-.mc-carousel-title {
-  margin: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/*========== MediaCo: Case creation dialog (ModalViewContainer) ========== */
-/* Near-full-screen case-creation dialog — uses :has() to avoid MUI class selectors */
-div:has(> .psdk-dialog-title) {
-  width: 90vw !important;
-  max-width: 1200px !important;
-  max-height: 90vh !important;
-  border-radius: 16px;
-}
-
-.psdk-dialog-title {
-  background-color: #f7f2fa;
-  color: #46185a;
-  font-weight: 600;
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.psdk-dialog-content {
-  padding: 24px !important;
-}
-
-/* ========== MediaCo: Prevent AppShell whitesmoke/gray backgrounds ========== */
-.appshell-top,
-.appshell-main {
-  background-color: #fff !important;
-}
-
-body {
-  background-color: #fff !important;
-}
-
 /* ========== MediaCo WSS: SDK component overrides (scoped to .mc-app-shell) ========== */
 /* MUI class references below target SDK-rendered elements we cannot modify directly. */
 /* Scoping under .mc-app-shell prevents them from leaking into non-WSS portals. */