.src-common-components-skeleton-index-module__skeleton--NsLwP.src-common-components-skeleton-index-module__colorful--hv5Yj .ant-skeleton-input,.src-common-components-skeleton-index-module__skeleton--NsLwP.src-common-components-skeleton-index-module__colorful--hv5Yj .ant-skeleton-content .ant-skeleton-title,.src-common-components-skeleton-index-module__skeleton--NsLwP.src-common-components-skeleton-index-module__colorful--hv5Yj .ant-skeleton-content .ant-skeleton-paragraph > li,.src-common-components-skeleton-index-module__skeleton--NsLwP.src-common-components-skeleton-index-module__colorful--hv5Yj .ant-skeleton-avatar,.src-common-components-skeleton-index-module__skeleton--NsLwP.src-common-components-skeleton-index-module__colorful--hv5Yj .ant-skeleton-button,.src-common-components-skeleton-index-module__skeleton--NsLwP.src-common-components-skeleton-index-module__colorful--hv5Yj .ant-skeleton-image {
      background: linear-gradient(270deg, #f9f7ff 0%, #fff5f9 100%);
    }.src-common-components-skeleton-index-module__skeleton--NsLwP.src-common-components-skeleton-index-module__colorful--hv5Yj .ant-skeleton-input:not(.src-common-components-skeleton-index-module__does-not-exist--xDtvc):not(does-not-exist)::after {
        background: linear-gradient(90deg, #ede9f6 25%, #fce8f3 37%, #ede9f6 63%);
      }.src-common-components-skeleton-index-module__skeleton--NsLwP.src-common-components-skeleton-index-module__colorful--hv5Yj .ant-skeleton-content .ant-skeleton-title:not(does-not-exist)::after {
        background: linear-gradient(90deg, #ede9f6 25%, #fce8f3 37%, #ede9f6 63%);
      }.src-common-components-skeleton-index-module__skeleton--NsLwP.src-common-components-skeleton-index-module__colorful--hv5Yj .ant-skeleton-content .ant-skeleton-paragraph > li::after {
        background: linear-gradient(90deg, #ede9f6 25%, #fce8f3 37%, #ede9f6 63%);
      }.src-common-components-skeleton-index-module__skeleton--NsLwP.src-common-components-skeleton-index-module__colorful--hv5Yj .ant-skeleton-avatar:not(.src-common-components-skeleton-index-module__does-not-exist--xDtvc):not(does-not-exist)::after {
        background: linear-gradient(90deg, #ede9f6 25%, #fce8f3 37%, #ede9f6 63%);
      }.src-common-components-skeleton-index-module__skeleton--NsLwP.src-common-components-skeleton-index-module__colorful--hv5Yj .ant-skeleton-button:not(.src-common-components-skeleton-index-module__does-not-exist--xDtvc):not(does-not-exist)::after {
        background: linear-gradient(90deg, #ede9f6 25%, #fce8f3 37%, #ede9f6 63%);
      }.src-common-components-skeleton-index-module__skeleton--NsLwP.src-common-components-skeleton-index-module__colorful--hv5Yj .ant-skeleton-image:not(.src-common-components-skeleton-index-module__does-not-exist--xDtvc):not(does-not-exist)::after {
        background: linear-gradient(90deg, #ede9f6 25%, #fce8f3 37%, #ede9f6 63%);
      }.src-common-components-skeleton-index-module__skeleton--NsLwP.src-common-components-skeleton-index-module__colorful--hv5Yj .ant-skeleton-image svg {
        z-index: 2;
      }

.src-common-components-loading-screen-index-module__root--3tEzX {
  --skeleton-fill: var(--surface-tertiary, #f0f0f0);
  --skeleton-line: var(--surface-tertiary, #f0f0f0);
  --skeleton-card-border: var(--mercury, #e8e8e8);

  animation: src-common-components-loading-screen-index-module__skeleton-fade-in--1JOwo 200ms ease-out both;
}

/* Route skeletons hold at opacity 0 for 450ms before fading in: the fetch starts on
   mount either way, and a fast query (the empty state resolves in well under that)
   unmounts the skeleton before it was ever visible, so nothing flashes. The boot
   screen keeps the immediate fade — it exists precisely to cover the blank page
   from the first paint. */

.src-common-components-loading-screen-index-module__root--3tEzX:not(.src-common-components-loading-screen-index-module__fullscreen--DvdIe) {
  animation-duration: 150ms;
  animation-delay: 450ms;
}

/* Mounted under the boot overlay (boot→route handoff): the overlay is opaque, so the
   anti-flash delay above protects nothing and would leave the content area empty
   between the overlay fade (200ms) and the delayed fade-in (450ms). */

.src-common-components-loading-screen-index-module__root--3tEzX.src-common-components-loading-screen-index-module__noDelay--1jgZx {
  animation-delay: 0ms;
}

/* Eases the skeleton in so a fast query does not flash it. Fading it back *out* would
   mean keeping it mounted after the data lands — not done, see the PR description. */

@keyframes src-common-components-loading-screen-index-module__skeleton-fade-in--1JOwo {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Boot screen only: when embedded in a page the surrounding layout owns the sizing. */

.src-common-components-loading-screen-index-module__fullscreen--DvdIe {
  min-height: 100vh;
  background-color: #ffffff;
  background-color: var(--white, #fff);
}

/* Embedded, the page above already spaced the block we are standing in for. */

.src-common-components-loading-screen-index-module__root--3tEzX:not(.src-common-components-loading-screen-index-module__fullscreen--DvdIe) > :first-child {
  margin-top: 0;
}

/* The boot skeleton mounts from the entry chunk, before the app chunk pulls in antd's
   stylesheet — so NONE of antd's skeleton CSS (fill, ::after shimmer, keyframes) exists
   at first paint. Everything the skeleton needs must live here: the Figma flat grey
   plus a self-contained copy of antd's active sweep (same gradient and timing). */

.src-common-components-loading-screen-index-module__root--3tEzX .ant-skeleton-element .ant-skeleton-image {
  position: relative;
  overflow: hidden;
  background: var(--skeleton-fill);
  z-index: 0;
}

.src-common-components-loading-screen-index-module__root--3tEzX .ant-skeleton-element.ant-skeleton-active .ant-skeleton-image::after {
  content: '';
  position: absolute;
  top: 0;
  right: -150%;
  bottom: 0;
  left: -150%;
  background: linear-gradient(
    90deg,
    rgba(190, 190, 190, 0.2) 25%,
    rgba(129, 129, 129, 0.24) 37%,
    rgba(190, 190, 190, 0.2) 63%
  );
  animation: src-common-components-loading-screen-index-module__skeleton-shimmer--1-Rb- 1.4s ease infinite;
}

@keyframes src-common-components-loading-screen-index-module__skeleton-shimmer--1-Rb- {
  0% {
    transform: translateX(-37.5%);
  }

  100% {
    transform: translateX(37.5%);
  }
}

/* Skeleton.Node is inline-block by default, which adds a descender gap under every
   block and breaks the pixel-accurate gaps below. */

.src-common-components-loading-screen-index-module__root--3tEzX .ant-skeleton-element {
  display: block;
  line-height: 0;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.src-common-components-loading-screen-index-module__header--14vlk {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  height: var(--global-nav-header-height, 64px);
  padding: 0 24px;
  border-bottom: 1px solid var(--skeleton-line);
}

.src-common-components-loading-screen-index-module__headerLeft--34qSN {
  display: flex;
  gap: 32px;
  align-items: center;
}

.src-common-components-loading-screen-index-module__headerBrand--1q1Bi,
.src-common-components-loading-screen-index-module__headerChannel--3pDWR {
  display: flex;
  gap: 8px;
  align-items: center;
}

.src-common-components-loading-screen-index-module__headerChannel--3pDWR {
  padding: 8px 12px;
}

.src-common-components-loading-screen-index-module__headerActions--2Dr66 {
  display: flex;
  gap: 16px;
  align-items: center;
}

/* ── Shell ──────────────────────────────────────────────────────────────── */

.src-common-components-loading-screen-index-module__body--EAdgj {
  display: flex;
}

.src-common-components-loading-screen-index-module__sidebar--3eygw {
  flex: 0 0 240px;
  flex: 0 0 var(--side-menu-width, 240px);
  width: 240px;
  width: var(--side-menu-width, 240px);
  padding: 24px 12px;
  border-right: 1px solid var(--skeleton-line);
  background-color: #ffffff;
  background-color: var(--side-menu-background, #fff);
}

.src-common-components-loading-screen-index-module__navList--3keiS {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.src-common-components-loading-screen-index-module__navItem--3u1FA {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
}

.src-common-components-loading-screen-index-module__navSeparator--19hS0 {
  height: 1px;
  background-color: var(--skeleton-line);
}

/* The skeleton can be rendered before the app chunk (and its stylesheet) is loaded,
   so global-nav's --legacy-content-* breakpoints are mirrored here rather than
   consumed. Keep both in sync: common/layouts/global-nav/index.module.css. */

.src-common-components-loading-screen-index-module__content--1G0-R {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 16px;
  padding: 0 var(--tpl-spacing-2, 16px);
}

.src-common-components-loading-screen-index-module__contentInner--3e71w {
  max-width: 1056px;
}

/* Mirrors --legacy-content-width: 972px in that band, so the column width does not
   jump when the real layout takes over. */

@media (min-width: 1280px) and (max-width: 1399px) {
  .src-common-components-loading-screen-index-module__contentInner--3e71w {
    max-width: 972px;
  }
}

@media (min-width: 768px) {
  .src-common-components-loading-screen-index-module__content--1G0-R {
    padding: 0 40px;
    padding: 0 var(--tpl-spacing-5, 40px);
  }
}

@media (min-width: 1280px) {
  .src-common-components-loading-screen-index-module__content--1G0-R {
    padding: 0 60px;
    padding: 0 var(--tpl-spacing-6, 60px);
  }
}

@media (min-width: 1400px) {
  .src-common-components-loading-screen-index-module__content--1G0-R {
    padding: 0 90px;
  }
}

@media (min-width: 1601px) {
  .src-common-components-loading-screen-index-module__content--1G0-R {
    padding-right: 0;
    padding-left: 152px;
  }
}

/* ── List variant ───────────────────────────────────────────────────────── */

.src-common-components-loading-screen-index-module__listTitleRow--TtOrB {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
}

.src-common-components-loading-screen-index-module__listTitleActions--kEt0P {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Geometry below mirrors the real list it stands in for, so nothing shifts when the
   data lands: routes/media/common/components/list-toolbar + .../media-item. */

.src-common-components-loading-screen-index-module__listFilters--2OTd8 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: 0 20px;
  padding: 0 var(--grid-gutter, 20px);
  margin-top: 32px;
}

.src-common-components-loading-screen-index-module__listFiltersLeft--2DbR- {
  display: flex;
  gap: 24px;
  align-items: center;
}

.src-common-components-loading-screen-index-module__listFiltersSelect--1r5Um {
  display: flex;
  gap: 8px;
  align-items: center;
}

.src-common-components-loading-screen-index-module__verticalDivider--323O_ {
  width: 1px;
  height: 16px;
  background-color: var(--skeleton-line);
}

.src-common-components-loading-screen-index-module__listFiltersRight--1X7HO {
  display: flex;
  gap: 12px;
  align-items: center;
}

.src-common-components-loading-screen-index-module__listRow--1tCRu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26px 20px;
  padding: 26px var(--grid-gutter, 20px);
  border-top: 1px solid #e8e8e8;
  border-top: 1px solid var(--mercury, #e8e8e8);
}

/* MediaItem paints its very first separator in a darker grey. */

.src-common-components-loading-screen-index-module__listRow--1tCRu:first-of-type {
  border-top-color: #bbbbbb;
  border-top-color: var(--silver, #bbb);
}

.src-common-components-loading-screen-index-module__listRowMain--3EMTD {
  display: flex;
  flex: 1 1 auto;
  gap: 16px;
  align-items: center;
  min-width: 0;
}

.src-common-components-loading-screen-index-module__listRowThumbnail--ilS1O {
  flex: 0 0 auto;
}

.src-common-components-loading-screen-index-module__podcastThumbnail--38aDK {
  flex: 0 0 auto;
}

.src-common-components-loading-screen-index-module__listRowText--2Nz9c {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.src-common-components-loading-screen-index-module__listRowTitle--3_Lp7 {
  max-width: 100%;
}

/* MediaItem reserves 48px for its action column (.content is calc(100% - 48px)). */

.src-common-components-loading-screen-index-module__listRowActions--v8Grv {
  display: flex;
  flex: 0 0 auto;
  gap: 16px;
  justify-content: flex-end;
  align-items: center;
  min-width: 48px;
}

.src-common-components-loading-screen-index-module__listRowStats--3Ygae {
  display: flex;
  gap: 8px;
  align-items: center;
}

.src-common-components-loading-screen-index-module__podcastRow--22E-U {
  padding: 26px 20px;
  padding: 26px var(--grid-gutter, 20px);
}

/* ── Dashboard variant ──────────────────────────────────────────────────── */

.src-common-components-loading-screen-index-module__dashboardTitle--3Pn-3 {
  margin-top: 32px;
}

.src-common-components-loading-screen-index-module__actionCards--QpzKt {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 20px;
}

.src-common-components-loading-screen-index-module__actionCard--2bDMp {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 20px;
  border: 1px solid var(--skeleton-card-border);
  border-radius: 8px;
}

/* Mirrors the real dashboard's two-card overview row (.two-col in
   routes/home/pages/index.module.css). */

.src-common-components-loading-screen-index-module__dashboardColumns--1IeMD {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.src-common-components-loading-screen-index-module__card--29Ugw {
  padding: 24px;
  border: 1px solid var(--skeleton-card-border);
  border-radius: 8px;
}

.src-common-components-loading-screen-index-module__popularList--2Kyn7 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.src-common-components-loading-screen-index-module__popularRow--2yASk {
  display: flex;
  gap: 12px;
  align-items: center;
}

.src-common-components-loading-screen-index-module__popularRow--2yASk > :last-child {
  flex: 1 1 auto;
  min-width: 0;
}

.src-common-components-loading-screen-index-module__chart--3n9Gs {
  height: 176px;
}

/* Area-graph silhouette (STUDIO-2747 redesign): one shimmering block clipped
   into the curve, so it keeps the shared skeleton sweep. */

.src-common-components-loading-screen-index-module__chartGraph--2I_3F {
  -webkit-clip-path: polygon(
    0% 100%,
    0% 68%,
    12% 48%,
    22% 42%,
    32% 44%,
    46% 10%,
    58% 46%,
    66% 40%,
    76% 54%,
    88% 36%,
    100% 50%,
    100% 100%
  );
          clip-path: polygon(
    0% 100%,
    0% 68%,
    12% 48%,
    22% 42%,
    32% 44%,
    46% 10%,
    58% 46%,
    66% 40%,
    76% 54%,
    88% 36%,
    100% 50%,
    100% 100%
  );
}

.src-common-components-loading-screen-index-module__tipCards--2aNXx,
.src-common-components-loading-screen-index-module__devCards--pyLFy {
  display: grid;
  gap: 24px;
  margin-top: 32px;
}

.src-common-components-loading-screen-index-module__tipCards--2aNXx {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.src-common-components-loading-screen-index-module__tipCard--2HECX {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.src-common-components-loading-screen-index-module__tipCardText--3UuIO {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.src-common-components-loading-screen-index-module__devCards--pyLFy {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.src-common-components-loading-screen-index-module__devCard--1SExG {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 20px;
  border: 1px solid var(--skeleton-card-border);
  border-radius: 8px;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

/* Below 1200px the real layout turns the side menu into an overlay, so the
   skeleton drops it entirely. The header also shrinks: mirrors the
   --global-nav-header-height override in styles/variables.css, which is not
   loaded yet at boot. */

@media (max-width: 1199px) {
  .src-common-components-loading-screen-index-module__sidebar--3eygw {
    display: none;
  }

  .src-common-components-loading-screen-index-module__header--14vlk {
    height: 56px;
  }
}

@media (max-width: 991px) {
  .src-common-components-loading-screen-index-module__actionCards--QpzKt,
  .src-common-components-loading-screen-index-module__dashboardColumns--1IeMD,
  .src-common-components-loading-screen-index-module__tipCards--2aNXx {
    grid-template-columns: 1fr;
  }

  .src-common-components-loading-screen-index-module__devCards--pyLFy {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .src-common-components-loading-screen-index-module__listTitleActions--kEt0P,
  .src-common-components-loading-screen-index-module__listFiltersRight--1X7HO,
  .src-common-components-loading-screen-index-module__listRowStats--3Ygae {
    display: none;
  }

  .src-common-components-loading-screen-index-module__devCards--pyLFy {
    grid-template-columns: 1fr;
  }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */

/* Last in the file on purpose: media queries add no specificity, so these must win
   on source order (the shimmer selector is identical to the one above) and match the
   .root:not(.fullscreen) specificity that sets the route skeletons' 150ms fade. */

@media (prefers-reduced-motion: reduce) {
  /* Drop the fade but keep the delay: `both` still holds opacity 0 until the
     animation (now instant) fires, so fast queries stay flash-free here too. */
  .src-common-components-loading-screen-index-module__root--3tEzX,
  .src-common-components-loading-screen-index-module__root--3tEzX:not(.src-common-components-loading-screen-index-module__fullscreen--DvdIe) {
    animation-duration: 0s;
  }

  .src-common-components-loading-screen-index-module__root--3tEzX .ant-skeleton-element.ant-skeleton-active .ant-skeleton-image::after {
    animation: none;
  }
}

/* Sits above the app (its own sider peaks at z-index 1000) so the skeleton can stay put
   while React hydrates underneath it. */
.src-common-components-loading-screen-boot-skeleton-module__overlay--X5hsB {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  background-color: #ffffff;
  background-color: var(--white, #fff);
  z-index: 1100;
}
.src-common-components-loading-screen-boot-skeleton-module__leaving--281GR {
  opacity: 0;
  transition: opacity 200ms ease-out;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .src-common-components-loading-screen-boot-skeleton-module__leaving--281GR {
    transition: none;
  }
}