body.pearl-app-shell {
  --pearl-console-bg: #f3f4fb;
  --pearl-console-panel: #ffffff;
  --pearl-console-border: #dde2ea;
  --pearl-console-line: #eef0f5;
  --pearl-console-ink: #152033;
  --pearl-console-muted: #6c7482;
  --pearl-console-accent: #078fc4;
  --pearl-console-accent-dark: #075ea8;
  --pearl-console-blue: #155eef;
  background: var(--pearl-console-bg) !important;
  color: var(--pearl-console-ink);
}

/* Company-admin live schedule preview. */
.shopping-admin-live {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 220;
  font-family: "Avenir Next", "Segoe UI", sans-serif;
}

.shopping-admin-live-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.65rem;
  padding: 0.65rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(110deg, #078fc4, #155eef);
  box-shadow: 0 14px 35px rgba(7, 77, 137, 0.3);
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}

.shopping-admin-live-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #65f0a5;
  box-shadow: 0 0 0 0.25rem rgba(101, 240, 165, 0.18);
}

.shopping-admin-live-backdrop {
  position: fixed;
  inset: 0;
  display: none;
  background: rgba(4, 18, 32, 0.42);
  backdrop-filter: blur(3px);
}

.shopping-admin-live-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(25rem, 100vw);
  height: 100dvh;
  overflow-y: auto;
  color: #10283e;
  background: #f7fbfe;
  border-left: 1px solid #d8e6ef;
  box-shadow: -24px 0 60px rgba(10, 40, 67, 0.2);
  transform: translateX(105%);
  transition: transform 0.24s ease;
}

.shopping-admin-live.is-open .shopping-admin-live-backdrop {
  display: block;
}

.shopping-admin-live.is-open .shopping-admin-live-panel {
  transform: translateX(0);
}

.shopping-admin-live-panel > header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: max(1.1rem, env(safe-area-inset-top)) 1.25rem 1rem;
  color: #fff;
  background: linear-gradient(125deg, #052f4d, #087dac 58%, #155eef);
}

.shopping-admin-live-panel header span {
  display: block;
  margin-bottom: 0.2rem;
  color: #8fe6ff;
  font-size: 0.61rem;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.shopping-admin-live-panel h2,
.shopping-admin-live-panel h3,
.shopping-admin-live-panel p {
  margin: 0;
}

.shopping-admin-live-panel h2 {
  color: #fff;
  font-size: 1.35rem;
  line-height: 1.2;
}

.shopping-admin-live-panel header p {
  margin-top: 0.25rem;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.73rem;
  line-height: 1.4;
}

.shopping-admin-live-close {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  font-size: 1.25rem;
  cursor: pointer;
}

.shopping-admin-live-body {
  display: grid;
  gap: 0.8rem;
  padding: 1rem 1.1rem max(1rem, env(safe-area-inset-bottom));
}

.shopping-admin-live-body label {
  display: grid;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 800;
}

.shopping-admin-live-store {
  width: 100%;
  min-height: 2.55rem;
  padding: 0 0.75rem;
  border: 1px solid #c8dce8;
  border-radius: 0.65rem;
  color: #10283e;
  background: #fff;
  font: 700 0.78rem/1 "Avenir Next", "Segoe UI", sans-serif;
}

.shopping-admin-live-status {
  padding: 0.55rem 0.7rem;
  border: 1px solid #cde4f0;
  border-radius: 0.6rem;
  color: #176383;
  background: #eaf8fd;
  font-size: 0.7rem;
  font-weight: 700;
}

.shopping-admin-live-status[data-tone="live"] {
  color: #087142;
  background: #e9faf1;
  border-color: #bdebd0;
}

.shopping-admin-live-status[data-tone="error"] {
  color: #b42332;
  background: #fff1f2;
  border-color: #ffcbd1;
}

.shopping-admin-live-now {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.85rem;
  align-items: center;
  padding: 0.75rem;
  border: 1px solid #dae7ef;
  border-radius: 0.9rem;
  background: #fff;
  box-shadow: 0 10px 26px rgba(24, 72, 107, 0.08);
}

.shopping-admin-live-cover {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 0.7rem;
  object-fit: cover;
  background: #061725;
}

.shopping-admin-live-copy {
  min-width: 0;
}

.shopping-admin-live-store-name {
  color: #078fc4;
  font-size: 0.65rem;
  font-weight: 850;
  text-transform: uppercase;
}

.shopping-admin-live-title {
  margin-top: 0.15rem !important;
  overflow: hidden;
  color: #10283e;
  font-size: 0.9rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shopping-admin-live-artist {
  overflow: hidden;
  margin-top: 0.15rem !important;
  color: #667788;
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shopping-admin-live-copy > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.55rem;
}

.shopping-admin-live-copy > div span {
  padding: 0.22rem 0.38rem;
  border-radius: 0.35rem;
  color: #31536b;
  background: #eef6fa;
  font-size: 0.59rem;
  font-weight: 750;
}

.shopping-admin-live-audio {
  width: 100%;
  height: 2.65rem;
}

.shopping-admin-live-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  color: #627587;
  font-size: 0.65rem;
}

.shopping-admin-live-refresh {
  padding: 0;
  border: 0;
  color: #078fc4;
  background: transparent;
  font: 800 0.65rem/1 "Avenir Next", "Segoe UI", sans-serif;
  cursor: pointer;
}

.shopping-admin-live-play {
  min-height: 2.65rem;
  border: 0;
  border-radius: 0.65rem;
  color: #fff;
  background: linear-gradient(105deg, #08add5, #155eef);
  font-size: 0.78rem;
  font-weight: 850;
  cursor: pointer;
}

.shopping-admin-live-play:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.shopping-admin-live-note {
  color: #758695;
  font-size: 0.63rem;
  line-height: 1.45;
  text-align: center;
}

@media (max-width: 600px) {
  .shopping-admin-live {
    right: max(0.7rem, env(safe-area-inset-right));
    bottom: max(0.7rem, env(safe-area-inset-bottom));
  }

  .shopping-admin-live-trigger {
    min-height: 2.4rem;
    padding: 0.55rem 0.85rem;
    font-size: 0.75rem;
  }

  .shopping-admin-live-panel {
    top: auto;
    bottom: 0;
    width: 100%;
    height: auto;
    max-height: calc(100dvh - max(0.5rem, env(safe-area-inset-top)));
    border-top: 1px solid #d8e6ef;
    border-left: 0;
    border-radius: 1.1rem 1.1rem 0 0;
    transform: translateY(105%);
  }

  .shopping-admin-live.is-open .shopping-admin-live-panel {
    transform: translateY(0);
  }

  body.shopping-admin-preview-open {
    overflow: hidden !important;
  }

  /* Denser, overflow-safe branch portal for small phones. */
  .shopping-branch-player > header > div {
    min-height: 3.6rem;
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
  }

  .shopping-branch-player > header .h-14.w-24 {
    width: 3rem !important;
    height: 3rem !important;
    border-radius: 0.55rem !important;
  }

  .shopping-branch-player > header h1 {
    max-width: 12rem;
    overflow: hidden;
    font-size: 0.86rem !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .shopping-branch-player > header p {
    font-size: 0.61rem !important;
  }

  .shopping-branch-player .shopping-welcome-bar [data-slot="card-content"] {
    padding: 0.65rem 0.75rem !important;
  }

  .shopping-branch-player .shopping-welcome-bar h2 {
    margin-bottom: 0.25rem !important;
    font-size: 0.92rem !important;
    line-height: 1.2 !important;
  }

  .shopping-branch-player .shopping-welcome-bar .text-cyan-50 {
    gap: 0.25rem 0.45rem !important;
    font-size: 0.58rem !important;
  }

  .shopping-branch-player .shopping-welcome-bar [data-slot="badge"] {
    padding: 0.22rem 0.4rem !important;
    font-size: 0.53rem !important;
  }

  .shopping-branch-player .grid.grid-cols-1.lg\:grid-cols-3 {
    gap: 0.7rem !important;
  }

  .shopping-branch-player [data-slot="card-header"] {
    padding: 0.7rem 0.8rem !important;
  }

  .shopping-branch-player [data-slot="card-content"] {
    padding: 0.75rem !important;
  }

  body.pearl-app-shell .shopping-branch-player .shopping-player-artwork {
    width: min(100%, 12.5rem) !important;
    max-width: 12.5rem !important;
    border-radius: 0.75rem !important;
  }

  .shopping-branch-player [data-shopping-track-title] {
    display: -webkit-box;
    overflow: hidden;
    font-size: 1rem !important;
    line-height: 1.25 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .shopping-branch-player [data-shopping-track-title] + p {
    font-size: 0.72rem !important;
  }

  .shopping-branch-player .space-y-6 {
    gap: 0.75rem !important;
  }

  .shopping-branch-player .size-16 {
    width: 3rem !important;
    height: 3rem !important;
  }
}

@media (max-width: 600px) and (prefers-color-scheme: dark) {
  body.pearl-app-shell .shopping-branch-player [data-slot="card-header"],
  body.pearl-app-shell .shopping-branch-player [data-slot="card-content"] {
    color: #f8fafc !important;
    background: #191b1f !important;
    border-color: #2b2f34 !important;
  }

  body.pearl-app-shell .shopping-branch-player [data-slot="card-title"] {
    color: #f8fafc !important;
  }
}

/* Mobile company-admin navigation mirrors the hidden desktop sidebar actions. */
.shopping-admin-mobile-nav {
  display: none;
}

@media (max-width: 767px) {
  body.shopping-admin-nav-open {
    overflow: hidden !important;
  }

  .shopping-admin-mobile-nav {
    display: block;
    position: relative;
    z-index: 10020;
  }

  .shopping-admin-nav-trigger {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 0.6rem);
    right: max(0.7rem, env(safe-area-inset-right));
    z-index: 10022;
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.66rem 0.62rem;
    align-content: center;
    gap: 0.24rem;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 0.75rem;
    color: #ffffff;
    background: linear-gradient(145deg, #08add5, #087fc8 58%, #155eef);
    box-shadow: 0 8px 24px rgba(8, 127, 200, 0.28);
  }

  .shopping-admin-nav-trigger span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
  }

  .shopping-admin-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10020;
    border: 0;
    opacity: 0;
    visibility: hidden;
    background: rgba(3, 15, 26, 0.58);
    backdrop-filter: blur(3px);
    transition: opacity 180ms ease, visibility 180ms ease;
  }

  .shopping-admin-nav-panel {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10021;
    display: flex;
    width: min(19rem, 86vw);
    height: 100dvh;
    max-width: 100%;
    flex-direction: column;
    color: #13283d;
    background:
      radial-gradient(circle at 0 0, rgba(8, 173, 213, 0.12), transparent 14rem),
      #ffffff;
    border-right: 1px solid #d8e4ed;
    box-shadow: 22px 0 55px rgba(3, 24, 42, 0.2);
    transform: translateX(-104%);
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
  }

  .shopping-admin-mobile-nav.is-open .shopping-admin-nav-backdrop {
    opacity: 1;
    visibility: visible;
  }

  .shopping-admin-mobile-nav.is-open .shopping-admin-nav-panel {
    transform: translateX(0);
  }

  .shopping-admin-mobile-nav.is-open .shopping-admin-nav-trigger {
    opacity: 0;
    pointer-events: none;
  }

  .shopping-admin-nav-header {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) 2rem;
    align-items: center;
    gap: 0.7rem;
    padding: calc(env(safe-area-inset-top) + 0.8rem) 0.85rem 0.85rem;
    border-bottom: 1px solid #e2eaf0;
  }

  .shopping-admin-nav-brand {
    width: 2.75rem;
    height: 2.75rem;
    overflow: hidden;
    border-radius: 0.72rem;
    background: #050505;
    box-shadow: 0 5px 16px rgba(3, 24, 42, 0.16);
  }

  .shopping-admin-nav-brand img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .shopping-admin-nav-identity {
    min-width: 0;
  }

  .shopping-admin-nav-identity strong,
  .shopping-admin-nav-identity span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .shopping-admin-nav-identity strong {
    font-size: 0.92rem;
    line-height: 1.25;
    color: #10283e;
  }

  .shopping-admin-nav-identity span {
    margin-top: 0.18rem;
    font-size: 0.68rem;
    color: #6d7e8e;
  }

  .shopping-admin-nav-close {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 0.55rem;
    color: #607589;
    background: #eef5f8;
    font: 400 1.4rem/1 sans-serif;
  }

  .shopping-admin-nav-links {
    display: grid;
    gap: 0.22rem;
    flex: 1;
    padding: 0.7rem;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .shopping-admin-nav-link,
  .shopping-admin-nav-logout {
    display: flex;
    width: 100%;
    min-height: 2.65rem;
    align-items: center;
    gap: 0.72rem;
    padding: 0.58rem 0.78rem;
    border: 1px solid transparent;
    border-radius: 0.68rem;
    text-align: left;
    font-size: 0.79rem;
    font-weight: 650;
    color: #32495d;
    background: transparent;
  }

  .shopping-admin-nav-link svg,
  .shopping-admin-nav-logout svg {
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
  }

  .shopping-admin-nav-link.is-active {
    color: #007eae;
    border-color: #bde8f7;
    background: linear-gradient(105deg, #eafaff, #eaf3ff);
    box-shadow: inset 3px 0 #08a6d2;
  }

  .shopping-admin-nav-link:active,
  .shopping-admin-nav-close:active,
  .shopping-admin-nav-trigger:active {
    transform: scale(0.97);
  }

  .shopping-admin-nav-footer {
    padding: 0.7rem max(0.7rem, env(safe-area-inset-right)) max(0.8rem, env(safe-area-inset-bottom)) max(0.7rem, env(safe-area-inset-left));
    border-top: 1px solid #e2eaf0;
  }

  .shopping-admin-nav-logout {
    justify-content: center;
    color: #d92d3f;
    border-color: #f3c7cd;
    background: #fff5f6;
  }
}

@media (max-width: 767px) and (prefers-color-scheme: dark) {
  .shopping-admin-nav-panel {
    color: #f4f8fb;
    background:
      radial-gradient(circle at 0 0, rgba(8, 173, 213, 0.17), transparent 14rem),
      #15191d;
    border-color: #303940;
  }

  .shopping-admin-nav-header,
  .shopping-admin-nav-footer {
    border-color: #303940;
  }

  .shopping-admin-nav-identity strong,
  .shopping-admin-nav-link {
    color: #f4f8fb;
  }

  .shopping-admin-nav-identity span {
    color: #a8b4bf;
  }

  .shopping-admin-nav-close {
    color: #d8e4ec;
    background: #293138;
  }

  .shopping-admin-nav-link.is-active {
    color: #55d6ff;
    border-color: #245b70;
    background: linear-gradient(105deg, #163340, #172c43);
  }

  .shopping-admin-nav-logout {
    color: #ff8b98;
    border-color: #65333b;
    background: #311e22;
  }
}

@media (prefers-color-scheme: dark) {
  .shopping-admin-live-panel {
    color: #f3f8fb;
    background: #14191e;
    border-color: #303a43;
  }

  .shopping-admin-live-store,
  .shopping-admin-live-now {
    color: #f3f8fb;
    background: #1d242b;
    border-color: #34414c;
  }

  .shopping-admin-live-title {
    color: #f3f8fb;
  }

  .shopping-admin-live-artist,
  .shopping-admin-live-note,
  .shopping-admin-live-meta {
    color: #aeb9c2;
  }

  .shopping-admin-live-copy > div span {
    color: #c8d9e5;
    background: #27333d;
  }
}

/* Final mobile contrast, safe-area, and branch-management hardening. */
body.pearl-app-shell .shopping-playing-now {
  color: #123b2b !important;
  border-color: #74d7a4 !important;
  background: linear-gradient(105deg, #ecfff4, #f7fffa) !important;
  box-shadow: inset 3px 0 #18a05e, 0 5px 16px rgba(16, 120, 70, 0.08) !important;
}

body.pearl-app-shell .shopping-playing-now > div:first-child {
  min-width: 0;
}

body.pearl-app-shell .shopping-playing-now .shopping-playing-badge {
  flex: 0 0 auto;
  color: #08683b !important;
  -webkit-text-fill-color: #08683b;
  border-color: #8bdfb2 !important;
  background: #dff8e9 !important;
}

body.pearl-app-shell .shopping-reset-copy-credentials {
  min-height: 2.1rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid #9cdcf2;
  border-radius: 0.55rem;
  color: #056f9a;
  background: #effaff;
  white-space: normal;
}

body.pearl-app-shell .shopping-reset-copy-credentials:disabled {
  cursor: wait;
  opacity: 0.65;
}

@media (max-width: 767px) {
  html,
  body.pearl-app-shell,
  body.pearl-app-shell #root {
    width: 100%;
    min-height: 100%;
    min-height: 100dvh;
    overflow-x: clip;
  }

  body.pearl-app-shell #root > .flex.h-screen > main {
    min-height: 100dvh;
    padding-top: max(0.65rem, calc(env(safe-area-inset-top) + 0.35rem)) !important;
    padding-right: max(0.6rem, env(safe-area-inset-right)) !important;
    padding-bottom: max(5.25rem, calc(env(safe-area-inset-bottom) + 4.4rem)) !important;
    padding-left: max(0.6rem, env(safe-area-inset-left)) !important;
  }

  body.pearl-app-shell .shopping-admin-nav-trigger {
    top: max(0.55rem, calc(env(safe-area-inset-top) + 0.45rem)) !important;
    right: max(0.65rem, calc(env(safe-area-inset-right) + 0.45rem)) !important;
  }

  body.pearl-app-shell .shopping-admin-live {
    right: max(0.65rem, calc(env(safe-area-inset-right) + 0.35rem)) !important;
    bottom: max(0.7rem, calc(env(safe-area-inset-bottom) + 0.45rem)) !important;
  }

  body.pearl-app-shell #pearl-toast-host {
    top: max(0.75rem, calc(env(safe-area-inset-top) + 0.5rem)) !important;
  }

  body.pearl-app-shell .shopping-playing-now {
    align-items: flex-start !important;
    gap: 0.55rem !important;
  }

  body.pearl-app-shell .shopping-playing-now > div:first-child {
    display: grid !important;
    grid-template-columns: minmax(7.4rem, auto) minmax(0, 1fr) !important;
    gap: 0.35rem 0.65rem !important;
    align-items: center !important;
  }

  body.pearl-app-shell .shopping-playing-now .shopping-playing-badge {
    grid-column: 1 / -1;
    justify-self: start;
  }

  body.pearl-app-shell .shopping-reset-copy-credentials {
    width: 100%;
  }
}

@media (max-width: 767px) and (prefers-color-scheme: dark) {
  body.pearl-app-shell,
  body.pearl-app-shell #root,
  body.pearl-app-shell #root > .flex.h-screen,
  body.pearl-app-shell #root > .flex.h-screen > main {
    color: #f3f7fa !important;
    background: #0d1319 !important;
  }

  body.pearl-app-shell #root > .flex.h-screen > main [data-slot="card"],
  body.pearl-app-shell #root > .flex.h-screen > main [data-slot="card-header"],
  body.pearl-app-shell #root > .flex.h-screen > main [data-slot="card-content"],
  body.pearl-app-shell #root > .flex.h-screen > main .bg-white,
  body.pearl-app-shell #root > .flex.h-screen > main .bg-gray-50,
  body.pearl-app-shell #root > .flex.h-screen > main .bg-gray-100,
  body.pearl-app-shell #root > .flex.h-screen > main .bg-cyan-50,
  body.pearl-app-shell #root > .flex.h-screen > main .bg-blue-50,
  body.pearl-app-shell #root > .flex.h-screen > main .bg-green-50,
  body.pearl-app-shell #root > .flex.h-screen > main .bg-yellow-50,
  body.pearl-app-shell #root > .flex.h-screen > main .bg-amber-50 {
    color: #f3f7fa !important;
    background: #18222c !important;
    border-color: #334350 !important;
  }

  body.pearl-app-shell #root > .flex.h-screen > main h1,
  body.pearl-app-shell #root > .flex.h-screen > main h2,
  body.pearl-app-shell #root > .flex.h-screen > main h3,
  body.pearl-app-shell #root > .flex.h-screen > main h4,
  body.pearl-app-shell #root > .flex.h-screen > main label,
  body.pearl-app-shell #root > .flex.h-screen > main strong,
  body.pearl-app-shell #root > .flex.h-screen > main .text-gray-900,
  body.pearl-app-shell #root > .flex.h-screen > main .text-gray-800,
  body.pearl-app-shell #root > .flex.h-screen > main .text-gray-700 {
    color: #f5f9fc !important;
    -webkit-text-fill-color: #f5f9fc;
  }

  body.pearl-app-shell #root > .flex.h-screen > main p,
  body.pearl-app-shell #root > .flex.h-screen > main .text-gray-600,
  body.pearl-app-shell #root > .flex.h-screen > main .text-gray-500,
  body.pearl-app-shell #root > .flex.h-screen > main .text-gray-400 {
    color: #b7c5d0 !important;
    -webkit-text-fill-color: #b7c5d0;
  }

  body.pearl-app-shell #root > .flex.h-screen > main input,
  body.pearl-app-shell #root > .flex.h-screen > main textarea,
  body.pearl-app-shell #root > .flex.h-screen > main select,
  body.pearl-app-shell #root > .flex.h-screen > main option,
  body.pearl-app-shell #root > .flex.h-screen > main [data-slot="select-trigger"],
  body.pearl-app-shell [data-slot="dialog-content"] input,
  body.pearl-app-shell [data-slot="dialog-content"] textarea,
  body.pearl-app-shell [data-slot="dialog-content"] select {
    color: #f5f9fc !important;
    -webkit-text-fill-color: #f5f9fc;
    background: #101820 !important;
    border-color: #435563 !important;
    color-scheme: dark;
  }

  body.pearl-app-shell #root > .flex.h-screen > main input::placeholder,
  body.pearl-app-shell #root > .flex.h-screen > main textarea::placeholder {
    color: #8fa0ad !important;
    -webkit-text-fill-color: #8fa0ad;
    opacity: 1;
  }

  body.pearl-app-shell .shopping-playing-now {
    color: #eafff3 !important;
    background: linear-gradient(105deg, #123526, #152d25) !important;
    border-color: #2f8058 !important;
  }

  body.pearl-app-shell .shopping-playing-now span:not(.shopping-playing-badge) {
    color: #ecfff4 !important;
    -webkit-text-fill-color: #ecfff4;
  }

  body.pearl-app-shell .shopping-playing-now .shopping-playing-badge {
    color: #8df0b8 !important;
    -webkit-text-fill-color: #8df0b8;
    background: #17452f !important;
    border-color: #2d7952 !important;
  }

  body.pearl-app-shell .shopping-reset-copy-credentials {
    color: #8ce5ff;
    border-color: #286b82;
    background: #12303c;
  }

  body.pearl-app-shell #shopping-radio-login input {
    color: #f5f9fc !important;
    -webkit-text-fill-color: #f5f9fc;
    background: #121b24 !important;
    border-color: #42515e !important;
  }
}

body.pearl-app-shell #root {
  min-height: 100vh;
  min-height: 100dvh;
}

html,
body.pearl-app-shell,
body.pearl-app-shell #root {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

html {
  min-height: 100%;
  min-height: -webkit-fill-available;
  background: #071421;
}

body.pearl-app-shell {
  min-height: 100dvh;
}

.shopping-playlist-artwork {
  width: 3.25rem;
  height: 3.25rem;
  flex: 0 0 3.25rem;
  border-radius: 7px;
  object-fit: cover;
  background: #050505;
  box-shadow: 0 3px 10px rgba(7, 20, 33, 0.16);
}

.shopping-playlist-tile {
  display: flex !important;
  align-items: center;
  gap: 0.7rem;
  overflow: hidden;
}

.shopping-branch-player .shopping-manual-skip {
  display: none !important;
}

.shopping-branch-player .shopping-playlist-locked {
  cursor: default !important;
  opacity: 1 !important;
  pointer-events: none;
}

.shopping-admin-playlist-row::before {
  content: "";
  width: 2.65rem;
  height: 2.65rem;
  flex: 0 0 2.65rem;
  border-radius: 6px;
  background: #050505 var(--playlist-artwork) center / cover no-repeat;
  box-shadow: 0 2px 8px rgba(7, 20, 33, 0.12);
}

.shopping-playlist-photo-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.1rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid #b8e5f4;
  border-radius: 6px;
  color: #077aa8;
  background: #f3fbff;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

.shopping-playlist-photo-button:hover {
  border-color: #078fc4;
  background: #e8f8ff;
}

.shopping-playlist-photo-button.is-uploading {
  cursor: wait;
  opacity: 0.65;
}

.shopping-playlist-photo-button input {
  display: none !important;
}

.shopping-branch-player {
  min-height: 100vh !important;
  min-height: 100dvh !important;
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;
}

.shopping-branch-player > header {
  padding-top: env(safe-area-inset-top);
}

.shopping-pull-refresh {
  position: fixed;
  z-index: 120;
  top: calc(env(safe-area-inset-top) + 0.35rem);
  left: 50%;
  display: none;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0.35rem 0.75rem;
  color: #075e7d;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #b8e5f4;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(7, 94, 125, 0.18);
  transform: translate(-50%, -4rem);
  pointer-events: none;
  transition: transform 160ms ease, opacity 160ms ease;
}

.shopping-pull-refresh img {
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 0.45rem;
}

.shopping-pull-refresh span {
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 768px), (pointer: coarse) {
  body.pearl-app-shell {
    overscroll-behavior-y: contain;
  }

  .shopping-pull-refresh {
    display: flex;
  }

  body.shopping-pull-active #root {
    transform: translateY(min(var(--shopping-pull-distance, 0px), 3.5rem));
    transition: none;
  }

  body:not(.shopping-pull-active) #root {
    transform: translateY(0);
    transition: transform 180ms ease;
  }

  body.shopping-pull-ready .shopping-pull-refresh {
    color: #075ea8;
    border-color: #078fc4;
  }

  body.shopping-pull-refreshing .shopping-pull-refresh img {
    animation: shopping-pull-spin 700ms linear infinite;
  }
}

@keyframes shopping-pull-spin {
  to { transform: rotate(360deg); }
}

body.pearl-app-shell .rounded-2xl {
  border-radius: 8px !important;
}

body.pearl-app-shell .rounded-3xl {
  border-radius: 10px !important;
}

body.pearl-app-shell .p-8 {
  padding: 1.25rem !important;
}

body.pearl-app-shell .p-5 {
  padding: 0.95rem !important;
}

body.pearl-app-shell .p-6 {
  padding: 1rem !important;
}

body.pearl-app-shell .px-8 {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

body.pearl-app-shell .py-8 {
  padding-top: 1.25rem !important;
  padding-bottom: 1.25rem !important;
}

body.pearl-app-shell .gap-8 {
  gap: 1.25rem !important;
}

body.pearl-app-shell .gap-6 {
  gap: 1rem !important;
}

body.pearl-app-shell .gap-5 {
  gap: 0.875rem !important;
}

body.pearl-app-shell .gap-4 {
  gap: 0.75rem !important;
}

body.pearl-app-shell .mb-8 {
  margin-bottom: 1.25rem !important;
}

body.pearl-app-shell .mb-6 {
  margin-bottom: 0.95rem !important;
}

body.pearl-app-shell .mt-6 {
  margin-top: 0.95rem !important;
}

body.pearl-app-shell .py-20,
body.pearl-app-shell .py-24,
body.pearl-app-shell .py-28 {
  padding-top: 3.5rem !important;
  padding-bottom: 3.5rem !important;
}

body.pearl-app-shell .space-y-8 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 1.25rem !important;
}

body.pearl-app-shell .space-y-6 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 1rem !important;
}

body.pearl-app-shell .space-y-4 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0.75rem !important;
}

body.pearl-app-shell .text-4xl {
  font-size: 2rem !important;
  line-height: 1.1 !important;
}

body.pearl-app-shell .text-3xl {
  font-size: 1.55rem !important;
  line-height: 1.2 !important;
}

body.pearl-app-shell .text-2xl {
  font-size: 1.3rem !important;
  line-height: 1.25 !important;
}

body.pearl-app-shell .text-6xl,
body.pearl-app-shell .text-5xl {
  font-size: 2.45rem !important;
  line-height: 1.05 !important;
}

body.pearl-app-shell .text-xl {
  font-size: 1.1rem !important;
  line-height: 1.3 !important;
}

body.pearl-app-shell .h-16 {
  height: 3.5rem !important;
}

body.pearl-app-shell .h-20 {
  height: 4.5rem !important;
}

body.pearl-app-shell .shadow-xl,
body.pearl-app-shell .shadow-2xl {
  box-shadow: 0 10px 26px rgba(18, 28, 45, 0.08) !important;
}

body.pearl-app-shell .text-base {
  font-size: 0.94rem !important;
}

body.pearl-app-shell .text-sm {
  font-size: 0.82rem !important;
  line-height: 1.35 !important;
}

body.pearl-app-shell .text-xs {
  font-size: 0.72rem !important;
  line-height: 1.3 !important;
}

body.pearl-app-shell [role="dialog"] {
  width: min(calc(100vw - 2rem), 38rem) !important;
  max-width: min(94vw, 38rem) !important;
}

body.pearl-app-shell main {
  width: 100%;
}

body.pearl-app-shell main > div {
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
}

body.pearl-app-shell [data-slot="dialog-content"] {
  width: min(calc(100vw - 2rem), 38rem) !important;
  max-width: calc(100vw - 2rem) !important;
  max-height: calc(100dvh - 2rem) !important;
  padding: 1rem !important;
  border: 1px solid var(--pearl-console-border) !important;
  border-radius: 10px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

body.pearl-app-shell [data-slot="dialog-content"] * {
  box-sizing: border-box;
}

body.pearl-app-shell [data-slot="dialog-content"] > :not(button),
body.pearl-app-shell [data-slot="dialog-content"] [role="tabpanel"],
body.pearl-app-shell [data-slot="dialog-content"] [data-slot="dialog-header"],
body.pearl-app-shell [data-slot="dialog-content"] [data-slot="dialog-footer"] {
  width: 100%;
  min-width: 0 !important;
  max-width: 100% !important;
}

body.pearl-app-shell [data-slot="dialog-header"] {
  gap: 0.35rem !important;
  padding-bottom: 0.25rem !important;
}

body.pearl-app-shell [data-slot="dialog-footer"] {
  gap: 0.625rem !important;
  padding-top: 0.25rem !important;
}

body.pearl-app-shell [data-slot="card"] {
  border-color: var(--pearl-console-border) !important;
  border-radius: 8px !important;
  background: var(--pearl-console-panel) !important;
  box-shadow: none !important;
}

body.pearl-app-shell [data-slot="card"] [data-slot="card-header"],
body.pearl-app-shell [data-slot="card"] [data-slot="card-content"] {
  padding: 0.85rem 0.95rem !important;
}

body.pearl-app-shell [data-slot="dialog-content"] [role="tablist"] {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.45rem !important;
  overflow: hidden;
  padding: 0.3rem !important;
  border: 1px solid #edf0f5 !important;
  border-radius: 8px !important;
  background: #f5f7fb !important;
}

body.pearl-app-shell [data-slot="dialog-content"] [role="tab"] {
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.45rem !important;
  padding: 0.65rem 0.8rem !important;
  font-size: 0.9rem !important;
  border-radius: 7px !important;
  white-space: nowrap;
}

body.pearl-app-shell [data-slot="dialog-content"] [data-state="active"][role="tab"] {
  background: #ffffff !important;
  color: var(--pearl-console-accent) !important;
  box-shadow: 0 1px 4px rgba(18, 28, 45, 0.08) !important;
}

body.pearl-app-shell [data-slot="dialog-content"] [role="tabpanel"] {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body.pearl-app-shell [data-slot="dialog-content"] .rounded-2xl.border-2.border-dashed {
  min-width: 0 !important;
  padding: 1rem !important;
}

body.pearl-app-shell [data-slot="dialog-content"] .rounded-2xl.border-2.border-dashed .text-center {
  min-width: 0 !important;
}

body.pearl-app-shell [data-slot="dialog-content"] .max-h-40 .flex.items-center.justify-between.rounded-xl {
  align-items: center !important;
  gap: 0.75rem !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

/* Installable Shopping Radio app prompt */
.shopping-install-banner {
  position: fixed;
  z-index: 10000;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.75rem;
  width: min(29rem, calc(100vw - 2rem));
  padding: 0.75rem;
  color: #f8fbff;
  background: linear-gradient(135deg, #071421 0%, #0b2b44 62%, #075ea8 100%);
  border: 1px solid rgba(125, 211, 252, 0.28);
  border-radius: 14px;
  box-shadow: 0 20px 55px rgba(3, 15, 28, 0.35);
}

.shopping-install-banner img {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 10px;
}

.shopping-install-banner div {
  min-width: 0;
}

.shopping-install-banner strong,
.shopping-install-banner span {
  display: block;
}

.shopping-install-banner strong {
  font-size: 0.84rem;
}

.shopping-install-banner span {
  margin-top: 0.15rem;
  color: #c9e9f7;
  font-size: 0.7rem;
  line-height: 1.3;
}

.shopping-install-action {
  padding: 0.55rem 0.8rem;
  color: #062033;
  background: #fff;
  border: 0;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.shopping-install-close {
  align-self: start;
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: -0.35rem -0.35rem 0 0;
  padding: 0;
  color: #9ac9dc;
  background: transparent;
  border: 0;
  border-radius: 50%;
  font-size: 1.25rem;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}

.shopping-install-close:hover,
.shopping-install-close:active {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.shopping-native-volume {
  width: 100%;
  height: 1.5rem;
  margin: 0;
  accent-color: #078fc4;
  cursor: pointer;
  touch-action: pan-x;
}

.shopping-native-volume::-webkit-slider-runnable-track {
  height: 0.35rem;
  background: #cbd5e1;
  border-radius: 999px;
}

.shopping-native-volume::-webkit-slider-thumb {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: -0.45rem;
  appearance: none;
  background: #fff;
  border: 3px solid #078fc4;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(7, 94, 168, 0.2);
}

.shopping-mobile-menu {
  display: none;
}

.shopping-radio-footer {
  padding: 1rem;
  color: #7b8491;
  font-size: 0.72rem;
  text-align: center;
}

.shopping-upload-queue {
  position: fixed;
  z-index: 9980;
  bottom: 1rem;
  left: 1rem;
  width: min(23rem, calc(100vw - 2rem));
  padding: 0.75rem;
  color: #eef9ff;
  background: rgba(7, 20, 33, 0.96);
  border: 1px solid rgba(125, 211, 252, 0.25);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(2, 10, 20, 0.36);
  backdrop-filter: blur(14px);
}

.shopping-upload-queue-heading {
  margin-bottom: 0.55rem;
  color: #bae6fd;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.shopping-upload-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem 0.65rem;
  padding: 0.55rem 0;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
}

.shopping-upload-copy {
  min-width: 0;
}

.shopping-upload-copy strong,
.shopping-upload-copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shopping-upload-copy strong {
  font-size: 0.76rem;
}

.shopping-upload-copy span,
.shopping-upload-row > b {
  margin-top: 0.12rem;
  color: #9ac9dc;
  font-size: 0.66rem;
}

.shopping-upload-track {
  grid-column: 1 / -1;
  height: 0.28rem;
  overflow: hidden;
  background: #334155;
  border-radius: 999px;
}

.shopping-upload-track span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #08a6d8, #155eef);
  border-radius: inherit;
  transition: width 180ms ease;
}

.shopping-upload-completed .shopping-upload-track span {
  background: #16a34a;
}

.shopping-upload-failed .shopping-upload-track span {
  background: #dc2626;
}

@media (max-width: 767px) {
  html,
  body.pearl-app-shell,
  body.pearl-app-shell #root {
    min-width: 0 !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    overscroll-behavior-x: none;
  }

  body.pearl-app-shell {
    touch-action: pan-y;
  }

  body.pearl-app-shell *,
  body.pearl-app-shell *::before,
  body.pearl-app-shell *::after {
    box-sizing: border-box;
  }

  body.pearl-app-shell button,
  body.pearl-app-shell a,
  body.pearl-app-shell input,
  body.pearl-app-shell label {
    touch-action: manipulation;
  }

  body.pearl-app-shell .shopping-bootstrap-screen {
    padding: 1rem !important;
  }

  body.pearl-app-shell .shopping-bootstrap-screen > div {
    max-width: 20rem !important;
  }

  body.pearl-app-shell .shopping-bootstrap-screen .h-20.w-20 {
    width: 3.5rem !important;
    height: 3.5rem !important;
    margin-bottom: 0.65rem !important;
    border-radius: 12px !important;
  }

  body.pearl-app-shell .shopping-bootstrap-screen .mb-8 {
    margin-bottom: 0.8rem !important;
  }

  body.pearl-app-shell .shopping-bootstrap-screen .rounded-2xl.bg-white {
    padding: 1rem !important;
    border-radius: 12px !important;
  }

  body.pearl-app-shell .shopping-bootstrap-screen .mb-6 {
    margin-bottom: 0.75rem !important;
  }

  body.pearl-app-shell .shopping-bootstrap-screen .mt-6 {
    margin-top: 0.75rem !important;
  }

  body.pearl-app-shell [data-slot="dialog-content"].shopping-mobile-login-dialog {
    display: flex !important;
    align-items: flex-end;
    width: calc(100vw - 1rem) !important;
    min-height: min(48rem, calc(100dvh - 1rem));
    max-height: calc(100dvh - 1rem) !important;
    padding: 1rem !important;
    color: #f8fbff;
    background:
      linear-gradient(180deg, rgba(3, 11, 21, 0.08) 0%, rgba(4, 14, 27, 0.34) 44%, rgba(3, 12, 24, 0.94) 82%),
      url("/assets/shopping-radio-login-mobile.png") center 36% / cover no-repeat !important;
    border: 1px solid rgba(186, 230, 253, 0.28) !important;
    border-radius: 20px !important;
    overflow-y: auto !important;
  }

  body.pearl-app-shell .shopping-mobile-login-dialog > [data-slot="dialog-header"] {
    display: none !important;
  }

  body.pearl-app-shell .shopping-mobile-login-dialog > .space-y-6 {
    width: 100%;
    padding: 0.9rem;
    background: rgba(4, 17, 31, 0.68);
    border: 1px solid rgba(186, 230, 253, 0.22);
    border-radius: 16px;
    backdrop-filter: blur(12px);
  }

  body.pearl-app-shell .shopping-mobile-login-dialog [role="tablist"] {
    display: none !important;
  }

  body.pearl-app-shell .shopping-mobile-login-dialog h2,
  body.pearl-app-shell .shopping-mobile-login-dialog label {
    color: #f8fbff !important;
    opacity: 1 !important;
  }

  body.pearl-app-shell .shopping-mobile-login-dialog form label,
  body.pearl-app-shell .shopping-mobile-login-dialog form .text-sm {
    color: #e8f7ff !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
  }

  body.pearl-app-shell .shopping-mobile-login-dialog p,
  body.pearl-app-shell .shopping-mobile-login-dialog button[type="button"] {
    color: #bae6fd;
  }

  body.pearl-app-shell .shopping-mobile-login-dialog input {
    min-height: 2.8rem;
    color: #0b2034;
    background: rgba(248, 252, 255, 0.95);
    border-radius: 10px;
  }

  body.pearl-app-shell .shopping-mobile-login-dialog input[type="checkbox"] {
    min-height: auto;
    accent-color: #08a6d8;
  }

  body.pearl-app-shell .shopping-mobile-login-dialog button[type="submit"] {
    min-height: 2.85rem;
    border-radius: 10px;
  }

  body.pearl-app-shell .shopping-mobile-login-dialog > button[data-slot="dialog-close"],
  body.pearl-app-shell .shopping-mobile-login-dialog > button:last-child {
    color: #fff !important;
    background: rgba(4, 17, 31, 0.45) !important;
  }

  /* Phone login: focused credentials-only portal. */
  body.pearl-app-shell .shopping-login-page {
    min-height: 100dvh !important;
    padding: 1rem !important;
    background:
      linear-gradient(180deg, rgba(3, 11, 21, 0.2) 0%, rgba(4, 14, 27, 0.48) 54%, rgba(3, 12, 24, 0.86) 100%),
      url("/assets/shopping-radio-login-mobile.png") center 38% / cover no-repeat !important;
  }

  body.pearl-app-shell .shopping-login-page > div {
    min-height: calc(100dvh - 2rem) !important;
  }

  body.pearl-app-shell .shopping-login-page [data-slot="card"] {
    width: min(100%, 23rem);
    margin: auto;
    color: #f7fbff;
    background: rgba(4, 17, 31, 0.7) !important;
    border: 1px solid rgba(186, 230, 253, 0.28) !important;
    border-radius: 18px !important;
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.36) !important;
    backdrop-filter: blur(12px);
  }

  body.pearl-app-shell .shopping-login-page [data-slot="card-header"] {
    display: none;
  }

  body.pearl-app-shell .shopping-login-page [data-slot="card-content"] {
    padding: 1.2rem !important;
  }

  body.pearl-app-shell .shopping-login-page [role="tablist"] {
    display: none !important;
  }

  body.pearl-app-shell .shopping-login-page h2,
  body.pearl-app-shell .shopping-login-page label {
    color: #f8fbff !important;
  }

  body.pearl-app-shell .shopping-login-page p,
  body.pearl-app-shell .shopping-login-page button[type="button"] {
    color: #bae6fd;
  }

  body.pearl-app-shell .shopping-login-page form {
    gap: 0.75rem;
  }

  body.pearl-app-shell .shopping-login-page input {
    min-height: 2.8rem;
    border-radius: 10px;
    color: #0b2034;
    background: rgba(248, 252, 255, 0.94);
  }

  body.pearl-app-shell .shopping-login-page button[type="submit"] {
    min-height: 2.85rem;
    border-radius: 10px;
  }

  /* Branch player becomes a compact mobile radio app. */
  body.pearl-app-shell .shopping-branch-player header > div,
  body.pearl-app-shell .shopping-branch-player > div {
    padding-left: 0.8rem !important;
    padding-right: 0.8rem !important;
  }

  body.pearl-app-shell .shopping-branch-player {
    width: 100vw !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
    color: #f8fafc;
    background: #101214 !important;
    overflow-x: hidden !important;
    overscroll-behavior-x: none;
  }

  body.pearl-app-shell .shopping-branch-player *,
  body.pearl-app-shell .shopping-branch-player main,
  body.pearl-app-shell .shopping-branch-player > div,
  body.pearl-app-shell .shopping-branch-player [data-slot="card"],
  body.pearl-app-shell .shopping-branch-player [data-slot="card-content"] {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.pearl-app-shell .shopping-branch-player .shopping-radio-footer {
    padding: 0.8rem 0.75rem 0;
    color: #858c96;
    font-size: 0.65rem;
  }

  body.pearl-app-shell .shopping-branch-player header {
    background: rgba(20, 22, 25, 0.96) !important;
    border-color: #2b2f34 !important;
  }

  body.pearl-app-shell .shopping-branch-player header h1,
  body.pearl-app-shell .shopping-branch-player [data-slot="card-title"],
  body.pearl-app-shell .shopping-branch-player .text-gray-900 {
    color: #f8fafc !important;
  }

  body.pearl-app-shell .shopping-branch-player header p,
  body.pearl-app-shell .shopping-branch-player .text-gray-600,
  body.pearl-app-shell .shopping-branch-player .text-gray-500 {
    color: #a9afb8 !important;
  }

  body.pearl-app-shell .shopping-branch-player [data-slot="card"]:not(.shopping-welcome-bar) {
    background: #191b1f !important;
    border-color: #2b2f34 !important;
  }

  body.pearl-app-shell .shopping-branch-player .shopping-welcome-bar {
    margin-bottom: 0.65rem !important;
    background: linear-gradient(110deg, #075ea8, #078fc4) !important;
    border-radius: 10px !important;
  }

  body.pearl-app-shell .shopping-branch-player .shopping-welcome-bar [data-slot="card-content"] {
    padding: 0.55rem 0.7rem !important;
    overflow: hidden;
  }

  body.pearl-app-shell .shopping-branch-player .shopping-welcome-bar [data-slot="card-content"] > div,
  body.pearl-app-shell .shopping-branch-player .shopping-welcome-bar [data-slot="card-content"] > div > div {
    min-width: 0 !important;
  }

  body.pearl-app-shell .shopping-branch-player .shopping-welcome-bar h2,
  body.pearl-app-shell .shopping-branch-player .shopping-welcome-bar span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.pearl-app-shell .shopping-branch-player .shopping-welcome-bar h2 {
    margin-bottom: 0.2rem !important;
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
  }

  body.pearl-app-shell .shopping-branch-player .shopping-welcome-bar span,
  body.pearl-app-shell .shopping-branch-player .shopping-welcome-bar [data-slot="badge"] {
    font-size: 0.65rem !important;
  }

  body.pearl-app-shell .shopping-branch-player .shopping-welcome-bar [data-slot="badge"] {
    padding: 0.25rem 0.45rem !important;
  }

  body.pearl-app-shell .shopping-branch-player .bg-gray-50 {
    background: #22252a !important;
  }

  body.pearl-app-shell .shopping-branch-player .bg-gray-200 {
    background: #34383e !important;
  }

  body.pearl-app-shell .shopping-branch-player .shopping-header-logout {
    display: none !important;
  }

  body.pearl-app-shell .shopping-branch-player header h1 {
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1rem !important;
  }

  body.pearl-app-shell .shopping-branch-player header img {
    max-width: 4.5rem;
  }

  body.pearl-app-shell .shopping-branch-player .grid.lg\:grid-cols-3 {
    gap: 0.8rem !important;
  }

  body.pearl-app-shell .shopping-branch-player .aspect-square.max-w-md {
    width: min(52vw, 12.5rem);
    border-radius: 14px !important;
  }

  body.pearl-app-shell .shopping-branch-player .aspect-square.max-w-md svg {
    width: 4.5rem !important;
    height: 4.5rem !important;
  }

  body.pearl-app-shell .shopping-branch-player [data-slot="card-header"],
  body.pearl-app-shell .shopping-branch-player [data-slot="card-content"] {
    padding: 0.7rem 0.8rem !important;
  }

  body.pearl-app-shell .shopping-branch-player .mb-8 {
    margin-bottom: 0.7rem !important;
  }

  body.pearl-app-shell .shopping-branch-player .space-y-6 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.7rem !important;
  }

  body.pearl-app-shell .shopping-branch-player .size-16 {
    width: 3.25rem !important;
    height: 3.25rem !important;
  }

  body.pearl-app-shell .shopping-branch-player .size-12 {
    width: 2.6rem !important;
    height: 2.6rem !important;
  }

  body.pearl-app-shell .shopping-branch-player [data-shopping-track-title] {
    display: -webkit-box;
    overflow: hidden;
    font-size: 1.2rem !important;
    line-height: 1.3 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body.pearl-app-shell .shopping-branch-player .shopping-native-volume {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.pearl-app-shell .shopping-branch-player .overflow-y-auto,
  body.pearl-app-shell .shopping-branch-player .max-h-96 {
    overflow-x: hidden !important;
  }

  body.pearl-app-shell .shopping-branch-player .truncate {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.pearl-app-shell .shopping-playlists-card [data-slot="card-content"] > div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem !important;
  }

  body.pearl-app-shell .shopping-playlist-tile {
    aspect-ratio: 1;
    min-width: 0;
    padding: 0.8rem !important;
    border: 1px solid #dbe7ee;
    border-radius: 14px !important;
    background:
      linear-gradient(150deg, rgba(8, 166, 216, 0.08), rgba(21, 94, 239, 0.16)),
      #f8fbfd !important;
  }

  body.pearl-app-shell .shopping-playlist-tile > div {
    height: 100%;
    align-items: flex-end !important;
  }

  body.pearl-app-shell .shopping-playlist-tile h4 {
    white-space: normal !important;
  }

  .shopping-ios-volume-note {
    flex: 1;
    color: #64748b;
    font-size: 0.72rem;
    text-align: center;
  }

  .shopping-mobile-menu {
    position: fixed;
    z-index: 9990;
    top: 0;
    right: 0;
    display: block;
  }

  .shopping-mobile-menu-trigger {
    position: fixed;
    z-index: 9992;
    top: calc(max(env(safe-area-inset-top), 0.35rem) + 0.65rem);
    right: max(0.75rem, env(safe-area-inset-right));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 2.55rem;
    height: 2.55rem;
    min-height: 2.55rem;
    padding: 0;
    color: #fff;
    background: linear-gradient(135deg, #078fc4, #155eef);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 9px;
    box-shadow: 0 12px 30px rgba(7, 60, 104, 0.3);
  }

  .shopping-mobile-menu-trigger span {
    width: 1.05rem;
    height: 2px;
    background: currentColor;
    border-radius: 999px;
  }

  .shopping-mobile-menu-backdrop {
    position: fixed;
    z-index: 9991;
    inset: 0;
    background: rgba(3, 11, 20, 0.58);
    backdrop-filter: blur(2px);
  }

  .shopping-mobile-menu-backdrop[hidden],
  .shopping-mobile-menu-panel[hidden] {
    display: none !important;
  }

  .shopping-mobile-menu-panel {
    position: fixed;
    z-index: 9993;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(82vw, 20rem);
    padding: calc(1.25rem + env(safe-area-inset-top)) 1rem calc(1rem + env(safe-area-inset-bottom));
    color: #eaf8ff;
    background: rgba(20, 22, 25, 0.985);
    border: 0;
    border-right: 1px solid #32363c;
    border-radius: 0 18px 18px 0;
    box-shadow: 18px 0 55px rgba(0, 0, 0, 0.48);
    backdrop-filter: blur(14px);
    overflow-x: hidden;
    overflow-y: auto;
  }

  .shopping-mobile-menu-close {
    position: absolute;
    top: calc(0.75rem + env(safe-area-inset-top));
    right: 0.75rem;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    min-height: 2.25rem;
    padding: 0;
    color: currentColor;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 8px;
    font-size: 1.5rem !important;
    line-height: 1;
    opacity: 0.72;
  }

  .shopping-mobile-menu-profile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0 3rem 1rem 0;
    border-bottom: 1px solid #32363c;
  }

  .shopping-mobile-menu-profile img {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
  }

  .shopping-mobile-menu-profile strong,
  .shopping-mobile-menu-profile span {
    display: block;
  }

  .shopping-mobile-menu-profile strong {
    font-size: 0.9rem;
  }

  .shopping-mobile-menu-profile span {
    margin-top: 0.15rem;
    color: #a9afb8;
    font-size: 0.7rem;
  }

  .shopping-mobile-menu-link {
    display: block;
    width: 100%;
    margin-bottom: 0.4rem;
    padding: 0.8rem;
    color: #f8fafc;
    background: transparent;
    border: 0;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: left;
  }

  .shopping-mobile-menu-link:hover,
  .shopping-mobile-menu-link:active {
    background: #292c31;
  }

  .shopping-mobile-logout {
    position: absolute;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    left: 1rem;
    width: auto;
    padding: 0.65rem;
    color: #fecaca;
    background: rgba(220, 38, 38, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.24);
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
  }

  .shopping-install-banner {
    right: 0.65rem;
    bottom: calc(0.65rem + env(safe-area-inset-bottom));
    width: calc(100vw - 1.3rem);
    max-width: calc(100vw - 1.3rem);
    overflow: hidden;
  }

  .shopping-upload-queue {
    right: 0.65rem;
    bottom: calc(4.5rem + env(safe-area-inset-bottom));
    left: 0.65rem;
    width: auto;
    max-width: none;
    padding: 0.65rem;
  }
}

body.pearl-app-shell [data-slot="dialog-content"] .max-h-40 .flex.min-w-0.flex-1.items-center.gap-3 {
  align-items: center !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

body.pearl-app-shell [data-slot="dialog-content"] .max-h-40 .truncate {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.32 !important;
}

body.pearl-app-shell [data-slot="dialog-content"] .max-h-40 button {
  flex-shrink: 0;
  margin-top: -0.1rem;
}

body.pearl-app-shell [data-slot="dialog-content"] .rounded-xl.bg-gray-50 {
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

body.pearl-app-shell [data-slot="dialog-content"] .rounded-xl.bg-gray-50 > .flex.min-w-0.flex-1.items-center.justify-between.gap-3,
body.pearl-app-shell [data-slot="dialog-content"] .rounded-xl.bg-gray-50 > .flex.min-w-0.flex-1.items-center.gap-3,
body.pearl-app-shell [data-slot="dialog-content"] .rounded-xl.bg-gray-50 .flex.min-w-0.flex-1.items-center.gap-3 {
  align-items: center !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

body.pearl-app-shell [data-slot="dialog-content"] .rounded-xl.bg-gray-50 .truncate,
body.pearl-app-shell [data-slot="dialog-content"] .rounded-xl.bg-gray-50 .text-sm.font-medium.text-gray-900 {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.32 !important;
}

body.pearl-app-shell [data-slot="dialog-content"] .rounded-xl.bg-gray-50 button {
  flex-shrink: 0;
}

body.pearl-app-shell [data-slot="dialog-content"] .max-h-40 {
  max-height: 12rem !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body.pearl-app-shell [data-slot="dialog-content"] .max-h-40 .text-xs,
body.pearl-app-shell [data-slot="dialog-content"] .max-h-40 .text-sm,
body.pearl-app-shell [data-slot="dialog-content"] .rounded-xl.bg-gray-50 .text-xs,
body.pearl-app-shell [data-slot="dialog-content"] .rounded-xl.bg-gray-50 .text-sm {
  min-width: 0 !important;
  max-width: 100% !important;
}

body.pearl-app-shell [data-slot="dialog-content"] .bg-red-50,
body.pearl-app-shell [data-slot="dialog-content"] .text-red-700,
body.pearl-app-shell [data-slot="dialog-content"] .text-red-900 {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

body.pearl-app-shell .grid.gap-6 {
  gap: 0.95rem !important;
}

body.pearl-app-shell .grid.gap-4 {
  gap: 0.75rem !important;
}

body.pearl-app-shell .rounded-full.border.border-cyan-200.bg-cyan-50 {
  padding: 0.4rem 0.8rem !important;
  font-size: 0.78rem !important;
  border-color: #b9e7f6 !important;
  background: #f0faff !important;
  color: var(--pearl-console-accent-dark) !important;
}

body.pearl-app-shell .fixed.top-0.left-0.right-0.z-50 {
  padding-top: 0.65rem !important;
  padding-bottom: 0.65rem !important;
}

body.pearl-app-shell .fixed.top-0.left-0.right-0.z-50 .max-w-7xl {
  max-width: 1160px !important;
}

body.pearl-app-shell .fixed.top-0.left-0.right-0.z-50 .text-sm {
  font-size: 0.78rem !important;
  line-height: 1.2 !important;
}

body.pearl-app-shell .fixed.top-0.left-0.right-0.z-50 .text-xs {
  font-size: 0.68rem !important;
  line-height: 1.15 !important;
}

body.pearl-app-shell .fixed.top-0.left-0.right-0.z-50 button {
  min-height: 2rem !important;
  padding: 0.45rem 0.85rem !important;
}

body.pearl-app-shell [data-slot="sidebar"],
body.pearl-app-shell [data-slot="sidebar-container"] {
  background: #ffffff !important;
  border-color: var(--pearl-console-border) !important;
  backdrop-filter: none;
}

body.pearl-app-shell [data-slot="sidebar"] {
  font-size: 0.78rem !important;
}

body.pearl-app-shell [data-slot="sidebar"] button,
body.pearl-app-shell [data-slot="sidebar"] a {
  min-height: 2rem !important;
  padding-top: 0.4rem !important;
  padding-bottom: 0.4rem !important;
  padding-left: 0.62rem !important;
  padding-right: 0.62rem !important;
  gap: 0.48rem !important;
  border-radius: 6px !important;
}

body.pearl-app-shell [data-slot="sidebar"] svg {
  width: 0.85rem !important;
  height: 0.85rem !important;
}

body.pearl-app-shell [data-slot="sidebar"] .text-lg {
  font-size: 0.92rem !important;
  line-height: 1.2 !important;
}

body.pearl-app-shell [data-slot="sidebar"] .text-base,
body.pearl-app-shell [data-slot="sidebar"] .text-sm {
  font-size: 0.74rem !important;
  line-height: 1.2 !important;
}

body.pearl-app-shell [data-slot="sidebar"] .text-xs {
  font-size: 0.64rem !important;
  line-height: 1.15 !important;
}

body.pearl-app-shell [data-slot="sidebar"] .size-8,
body.pearl-app-shell [data-slot="sidebar"] .size-9,
body.pearl-app-shell [data-slot="sidebar"] .size-10,
body.pearl-app-shell [data-slot="sidebar"] .size-12 {
  width: 2rem !important;
  height: 2rem !important;
}

body.pearl-app-shell [data-slot="sidebar"] .gap-3,
body.pearl-app-shell [data-slot="sidebar"] .gap-4 {
  gap: 0.5rem !important;
}

body.pearl-app-shell button {
  border-radius: 7px;
}

body.pearl-app-shell input,
body.pearl-app-shell textarea,
body.pearl-app-shell select {
  min-height: 2.35rem;
  border-radius: 7px !important;
}

body.pearl-app-shell .pearl-logo-image {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  padding: 0.35rem;
  background: transparent !important;
}

body.pearl-app-shell .shopping-song-artwork {
  display: block !important;
  flex: 0 0 3.5rem !important;
  width: 3.5rem !important;
  height: 3.5rem !important;
  min-width: 3.5rem !important;
  max-width: 3.5rem !important;
  min-height: 3.5rem !important;
  max-height: 3.5rem !important;
  object-fit: contain !important;
  overflow: hidden;
}

body.pearl-app-shell .shopping-player-artwork {
  display: block !important;
  width: min(100%, 28rem) !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  object-fit: contain !important;
  background: #071421;
  overflow: hidden;
}

body.pearl-app-shell .overflow-hidden:has(> .pearl-logo-image) {
  background: rgba(255, 255, 255, 0.96) !important;
  background-image: none !important;
  border: 1px solid var(--pearl-console-border);
  box-shadow: none !important;
}

body.pearl-app-shell .fixed.bottom-20.right-4.z-50.max-h-\[70vh\].w-96,
body.pearl-app-shell .fixed.bottom-20.right-4.z-50.max-h-\[70vh\].w-96 .p-4 {
  max-width: min(92vw, 22rem) !important;
}

body.pearl-app-shell .fixed.bottom-20.right-4.z-50.max-h-\[70vh\].w-96 {
  border-radius: 16px !important;
}

body.pearl-app-shell .max-h-\[90vh\].max-w-md,
body.pearl-app-shell .max-h-\[90vh\].max-w-md form {
  max-width: 24rem !important;
}

body.pearl-app-shell .max-h-\[90vh\].max-w-md .text-xl {
  font-size: 1.05rem !important;
}

body.pearl-app-shell .max-h-\[90vh\].max-w-md .text-xs {
  font-size: 0.7rem !important;
}

body.pearl-app-shell .max-h-\[90vh\].max-w-md .space-y-4 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0.7rem !important;
}

body.pearl-app-shell .min-h-screen.bg-gradient-to-br.from-cyan-50.via-white.to-blue-50,
body.pearl-app-shell .min-h-screen.bg-gradient-to-br.from-cyan-50.via-blue-50.to-white {
  background: var(--pearl-console-bg) !important;
}

body.pearl-app-shell .bg-gradient-to-r.from-cyan-500.to-blue-600,
body.pearl-app-shell .bg-cyan-600,
body.pearl-app-shell .bg-purple-600 {
  background: var(--pearl-console-accent) !important;
  background-image: none !important;
}

body.pearl-app-shell .hover\:from-cyan-600:hover,
body.pearl-app-shell .hover\:to-blue-700:hover,
body.pearl-app-shell .hover\:bg-cyan-700:hover,
body.pearl-app-shell .hover\:bg-purple-700:hover {
  background: var(--pearl-console-accent-dark) !important;
  background-image: none !important;
}

body.pearl-app-shell .text-cyan-600,
body.pearl-app-shell .text-cyan-700,
body.pearl-app-shell .text-purple-600,
body.pearl-app-shell .text-purple-700 {
  color: var(--pearl-console-accent) !important;
}

body.pearl-app-shell .border-cyan-200,
body.pearl-app-shell .border-purple-200 {
  border-color: #b9e7f6 !important;
}

body.pearl-app-shell .bg-cyan-50,
body.pearl-app-shell .bg-purple-50,
body.pearl-app-shell .bg-cyan-100,
body.pearl-app-shell .bg-purple-100 {
  background-color: #eff9ff !important;
}

body.pearl-app-shell main {
  background: var(--pearl-console-bg) !important;
}

body.pearl-app-shell main > div > .mb-8:first-child,
body.pearl-app-shell main > div > .flex.items-center.justify-between:first-child,
body.pearl-app-shell main > div > .space-y-6 > .flex.items-center.justify-between:first-child {
  padding-bottom: 0.8rem !important;
  border-bottom: 1px solid var(--pearl-console-border) !important;
}

body.pearl-app-shell main h1,
body.pearl-app-shell main h2 {
  color: #0f172a !important;
  letter-spacing: 0 !important;
}

body.pearl-app-shell main p,
body.pearl-app-shell [data-slot="card-description"] {
  color: var(--pearl-console-muted) !important;
}

body.pearl-app-shell .lg\:grid-cols-2 > [data-slot="card"] {
  min-height: 24rem;
}

body.pearl-app-shell [data-slot="card"] .bg-gray-50 {
  border: 1px solid var(--pearl-console-line) !important;
  background: #fbfcfe !important;
}

body.pearl-app-shell [data-slot="card"] .hover\:bg-gray-100:hover,
body.pearl-app-shell [data-slot="card"] .hover\:bg-cyan-50:hover {
  background: #f0f9ff !important;
}

body.pearl-app-shell [data-slot="card"] .truncate {
  min-width: 0;
}

body.pearl-app-shell [data-slot="card"] .max-h-64 {
  max-height: 18rem !important;
}

body.pearl-app-shell [data-slot="card"] .border.rounded-lg.max-h-64 {
  border-radius: 8px !important;
}

body.pearl-app-shell [data-slot="card"] .border-b {
  border-color: var(--pearl-console-line) !important;
}

body.pearl-app-shell [data-slot="dialog-content"] .rounded-xl.border,
body.pearl-app-shell [data-slot="dialog-content"] .rounded-lg.border {
  border-color: var(--pearl-console-border) !important;
}

body.pearl-app-shell [data-slot="dialog-content"] .rounded-xl.border.border-red-200,
body.pearl-app-shell [data-slot="dialog-content"] .bg-red-50 {
  border-color: #ffc4c8 !important;
  background: #fff2f3 !important;
}

body.pearl-app-shell [data-slot="dialog-content"] label,
body.pearl-app-shell label {
  color: #162235 !important;
  font-size: 0.78rem !important;
}

body.pearl-app-shell [data-slot="dialog-content"] .rounded-2xl.border-2.border-dashed {
  border-color: #cfd6df !important;
  background: #fbfcfe !important;
  border-radius: 8px !important;
}

body.pearl-app-shell .h-9 {
  height: 2.15rem !important;
}

body.pearl-app-shell .size-9 {
  width: 2.15rem !important;
  height: 2.15rem !important;
}

body.pearl-app-shell aside.w-64 {
  width: 14.5rem !important;
}

body.pearl-app-shell aside .border-b.p-6 {
  padding: 0.9rem !important;
}

body.pearl-app-shell aside nav {
  padding: 0.75rem !important;
}

body.pearl-app-shell aside .mt-auto {
  padding: 0.75rem !important;
}

body.pearl-app-shell aside .rounded-lg.bg-gradient-to-br,
body.pearl-app-shell aside .rounded-lg.bg-cyan-50,
body.pearl-app-shell aside .rounded-lg.bg-blue-50 {
  border-radius: 7px !important;
}

/* Compact retail-radio console inspired by the supplied operator references. */
body.pearl-app-shell {
  font-family: "Avenir Next", "Segoe UI Variable", "Trebuchet MS", sans-serif;
  font-size: 14px;
}

body.pearl-app-shell #root > .flex.h-screen {
  background:
    linear-gradient(135deg, rgba(14, 165, 233, 0.05), transparent 32%),
    var(--pearl-console-bg) !important;
}

body.pearl-app-shell aside.w-64 {
  width: 13.25rem !important;
  flex: 0 0 13.25rem !important;
  box-shadow: 4px 0 14px rgba(20, 29, 45, 0.035);
}

body.pearl-app-shell aside > .border-b {
  min-height: 4rem;
  display: flex;
  align-items: center;
}

body.pearl-app-shell aside > .border-b .size-12 {
  width: 2.25rem !important;
  height: 2.25rem !important;
}

body.pearl-app-shell aside nav {
  padding: 0.65rem 0.55rem !important;
}

body.pearl-app-shell aside nav button {
  min-height: 2.25rem !important;
  padding: 0.48rem 0.62rem !important;
  border: 1px solid transparent !important;
  border-left: 3px solid transparent !important;
  border-radius: 5px !important;
  color: #536071 !important;
  font-size: 0.77rem !important;
  font-weight: 600;
}

body.pearl-app-shell aside nav button:hover {
  color: var(--pearl-console-accent-dark) !important;
  background: #f0f9ff !important;
}

body.pearl-app-shell aside nav button.border-cyan-200 {
  color: var(--pearl-console-accent-dark) !important;
  border-color: #bae6fd !important;
  border-left-color: var(--pearl-console-accent) !important;
  background: #eff9ff !important;
  box-shadow: 0 2px 7px rgba(14, 165, 233, 0.09);
}

body.pearl-app-shell aside nav button svg {
  color: currentColor !important;
}

body.pearl-app-shell aside > .border-t {
  padding: 0.65rem !important;
  background: #fcfcfd;
}

body.pearl-app-shell main {
  min-width: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.42)),
    var(--pearl-console-bg) !important;
}

body.pearl-app-shell main > div {
  width: 100%;
  max-width: 1280px;
}

body.pearl-app-shell main > .space-y-6,
body.pearl-app-shell main > .space-y-4 {
  padding: 1.15rem 1.25rem !important;
}

body.pearl-app-shell main > .p-4,
body.pearl-app-shell main > .p-8,
body.pearl-app-shell main > .md\:p-8 {
  padding: 1.15rem 1.25rem !important;
}

body.pearl-app-shell main .mb-8:first-child {
  margin-bottom: 1rem !important;
}

body.pearl-app-shell main h1,
body.pearl-app-shell main h2 {
  font-size: 1.23rem !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}

body.pearl-app-shell main h3 {
  font-size: 0.98rem !important;
  line-height: 1.3 !important;
}

body.pearl-app-shell main > div > .flex.items-center.justify-between:first-child,
body.pearl-app-shell main > div > .mb-8:first-child {
  min-height: 3.45rem;
  align-items: center !important;
  padding: 0 0 0.75rem !important;
}

body.pearl-app-shell [data-slot="card"] {
  gap: 0 !important;
  overflow: hidden;
  border: 1px solid #e2e5ec !important;
  box-shadow: 0 2px 10px rgba(22, 32, 51, 0.035) !important;
}

body.pearl-app-shell [data-slot="card"] [data-slot="card-header"] {
  min-height: 3.6rem;
  padding: 0.78rem 0.9rem !important;
  border-bottom: 1px solid var(--pearl-console-line);
  background: #fff;
}

body.pearl-app-shell [data-slot="card"] [data-slot="card-content"] {
  padding: 0.85rem 0.9rem !important;
}

body.pearl-app-shell [data-slot="card-title"] {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: #172236 !important;
}

body.pearl-app-shell [data-slot="card-description"] {
  margin-top: 0.2rem;
  font-size: 0.7rem !important;
}

body.pearl-app-shell .lg\:grid-cols-2 > [data-slot="card"] {
  min-height: 0 !important;
}

body.pearl-app-shell .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 [data-slot="card"] [data-slot="card-header"] {
  min-height: 2.9rem;
  border-bottom: 0;
  padding-bottom: 0.3rem !important;
}

body.pearl-app-shell .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 [data-slot="card"] [data-slot="card-content"] {
  padding-top: 0.1rem !important;
}

body.pearl-app-shell .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 [data-slot="card"] .text-2xl {
  font-size: 1.45rem !important;
  font-weight: 700;
}

body.pearl-app-shell [data-slot="card"] .p-4.bg-gray-50,
body.pearl-app-shell [data-slot="card"] .p-3.bg-gray-50,
body.pearl-app-shell [data-slot="card"] .md\:p-4.bg-gray-50 {
  padding: 0.62rem 0.7rem !important;
  border-radius: 5px !important;
  border: 1px solid #edf0f4 !important;
  background: #fbfcfe !important;
}

body.pearl-app-shell [data-slot="card"] .space-y-4 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0.55rem !important;
}

body.pearl-app-shell [data-slot="button"],
body.pearl-app-shell button {
  min-height: 2.1rem;
  font-size: 0.76rem !important;
  font-weight: 650;
}

body.pearl-app-shell [data-slot="button"] svg,
body.pearl-app-shell button svg {
  width: 0.88rem !important;
  height: 0.88rem !important;
}

body.pearl-app-shell [data-slot="badge"] {
  min-height: 1.35rem;
  padding: 0.16rem 0.48rem !important;
  border-radius: 4px !important;
  font-size: 0.64rem !important;
  font-weight: 700;
}

body.pearl-app-shell input,
body.pearl-app-shell textarea,
body.pearl-app-shell select,
body.pearl-app-shell [data-slot="select-trigger"] {
  border-color: #d9dee7 !important;
  background: #fff !important;
  font-size: 0.78rem !important;
  box-shadow: none !important;
}

body.pearl-app-shell input:focus,
body.pearl-app-shell textarea:focus,
body.pearl-app-shell select:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12) !important;
}

body.pearl-app-shell [data-slot="dialog-content"] {
  background: #fff !important;
  box-shadow: 0 20px 55px rgba(22, 32, 51, 0.2) !important;
}

body.pearl-app-shell [data-slot="dialog-header"] {
  padding-right: 1.5rem;
}

body.pearl-app-shell [data-slot="dialog-title"] {
  color: #172236 !important;
  font-size: 1rem !important;
  font-weight: 750 !important;
}

body.pearl-app-shell [data-slot="dialog-footer"] {
  margin-top: 0.35rem;
  padding-top: 0.75rem !important;
  border-top: 1px solid var(--pearl-console-line);
}

body.pearl-app-shell .text-center.py-12,
body.pearl-app-shell .text-center.py-8,
body.pearl-app-shell .text-center.py-14 {
  padding-top: 1.8rem !important;
  padding-bottom: 1.8rem !important;
}

body.pearl-app-shell .text-center.py-12 > svg,
body.pearl-app-shell .text-center.py-8 > svg,
body.pearl-app-shell .text-center.py-14 > svg {
  width: 2rem !important;
  height: 2rem !important;
  margin-bottom: 0.65rem !important;
}

body.pearl-app-shell .aspect-square.max-w-md.mx-auto {
  max-width: 15rem !important;
  border-radius: 8px !important;
  background: linear-gradient(145deg, #10bce8, #155eef) !important;
  box-shadow: 0 10px 25px rgba(21, 94, 239, 0.17) !important;
}

body.pearl-app-shell .aspect-square.max-w-md.mx-auto svg {
  width: 4.5rem !important;
  height: 4.5rem !important;
}

body.pearl-app-shell .max-w-7xl.mx-auto.px-4.sm\:px-6.lg\:px-8.py-8 {
  max-width: 1120px !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

body.pearl-app-shell .max-h-96.overflow-y-auto,
body.pearl-app-shell .max-h-64.overflow-y-auto {
  scrollbar-width: thin;
  scrollbar-color: #c9ced8 transparent;
}

body.pearl-app-shell .bg-green-50.border.border-green-200,
body.pearl-app-shell .bg-red-50.border.border-red-200,
body.pearl-app-shell .bg-yellow-50.border.border-yellow-200 {
  border-radius: 6px !important;
  padding: 0.65rem 0.75rem !important;
  font-size: 0.76rem !important;
}

@media (max-width: 900px) {
  body.pearl-app-shell .p-8 {
    padding: 1rem !important;
  }

  body.pearl-app-shell .px-8 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  body.pearl-app-shell .gap-8 {
    gap: 1rem !important;
  }

  body.pearl-app-shell .text-6xl,
  body.pearl-app-shell .text-5xl {
    font-size: 2rem !important;
  }

  body.pearl-app-shell [data-slot="dialog-content"] {
    padding: 0.85rem !important;
  }

  body.pearl-app-shell [data-slot="dialog-content"] [role="tab"] {
    font-size: 0.82rem !important;
    padding: 0.6rem 0.55rem !important;
  }

  body.pearl-app-shell main > .space-y-6,
  body.pearl-app-shell main > .space-y-4,
  body.pearl-app-shell main > .p-4,
  body.pearl-app-shell main > .p-8,
  body.pearl-app-shell main > .md\:p-8 {
    padding: 0.85rem !important;
  }

  body.pearl-app-shell main > div > .flex.items-center.justify-between:first-child {
    align-items: flex-start !important;
    gap: 0.75rem;
  }

  body.pearl-app-shell .aspect-square.max-w-md.mx-auto {
    max-width: 12rem !important;
  }
}

/* Pearl public homepage: blue brand treatment and a correctly clipped hero title. */
body.pearl-app-shell header.border-b.bg-white {
  border-color: #dbeafe !important;
  box-shadow: 0 1px 0 rgba(21, 94, 239, 0.04);
}

body.pearl-app-shell section.container.mx-auto.bg-white {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 20%, rgba(16, 188, 232, 0.1), transparent 28%),
    radial-gradient(circle at 86% 10%, rgba(21, 94, 239, 0.08), transparent 25%),
    linear-gradient(180deg, #ffffff 0%, #f7fcff 100%) !important;
}

body.pearl-app-shell section.container.mx-auto.bg-white .bg-clip-text.text-transparent {
  display: inline-block !important;
  background: linear-gradient(100deg, #078fc4 5%, #155eef 92%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
}

body.pearl-app-shell section.container.mx-auto.bg-black {
  background:
    radial-gradient(circle at 80% 0%, rgba(16, 188, 232, 0.15), transparent 30%),
    linear-gradient(135deg, #071a33, #0b2e55) !important;
}

body.pearl-app-shell section.container.mx-auto.bg-black .bg-gray-900 {
  border-color: rgba(56, 189, 248, 0.28) !important;
  background: rgba(7, 26, 51, 0.74) !important;
  box-shadow: 0 18px 45px rgba(2, 20, 43, 0.22) !important;
}

body.pearl-app-shell header .bg-gradient-to-r.from-cyan-500.to-blue-600,
body.pearl-app-shell section .bg-gradient-to-r.from-cyan-500.to-blue-600 {
  background: linear-gradient(100deg, #08add5, #155eef) !important;
  background-image: linear-gradient(100deg, #08add5, #155eef) !important;
}

body.pearl-app-shell header .hover\:from-cyan-600:hover,
body.pearl-app-shell section .hover\:from-cyan-600:hover {
  background: linear-gradient(100deg, #078fc4, #104bc5) !important;
  background-image: linear-gradient(100deg, #078fc4, #104bc5) !important;
}

/* Compact announcement editor with visible selection and actions. */
body.pearl-app-shell .pearl-announcement-dialog[data-slot="dialog-content"] {
  width: min(calc(100vw - 2rem), 35rem) !important;
  max-height: min(calc(100dvh - 2rem), 44rem) !important;
  padding: 0.9rem !important;
  border-color: #cfe8f7 !important;
}

body.pearl-app-shell .pearl-announcement-dialog > .space-y-4.py-4 {
  padding-top: 0.65rem !important;
  padding-bottom: 0.4rem !important;
}

body.pearl-app-shell .pearl-announcement-dialog .pearl-announcement-dropzone {
  padding: 0.8rem !important;
  border-radius: 8px !important;
  background: #f8fcff !important;
}

body.pearl-app-shell .pearl-announcement-dialog .pearl-announcement-dropzone svg {
  width: 1.8rem !important;
  height: 1.8rem !important;
  margin-bottom: 0.45rem !important;
}

body.pearl-app-shell .pearl-announcement-dialog [data-slot="dialog-footer"] {
  position: sticky;
  bottom: -0.9rem;
  z-index: 2;
  margin: 0.25rem -0.9rem -0.9rem !important;
  padding: 0.7rem 0.9rem !important;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 -5px 14px rgba(15, 42, 68, 0.05);
}

@media (max-width: 600px) {
  body.pearl-app-shell .pearl-announcement-dialog[data-slot="dialog-content"] {
    width: calc(100vw - 1rem) !important;
    max-width: calc(100vw - 1rem) !important;
    max-height: calc(100dvh - 1rem) !important;
  }

  body.pearl-app-shell,
  body.pearl-app-shell #root,
  .shopping-branch-player {
    min-height: 100svh !important;
    min-height: 100dvh !important;
  }

  .shopping-branch-player {
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
    background: linear-gradient(180deg, #061725 0%, #0a2639 100%) !important;
  }

  .shopping-branch-player > header {
    padding-top: max(env(safe-area-inset-top), 0.35rem);
  }

  .shopping-branch-player > header > div,
  .shopping-branch-player > .max-w-7xl {
    width: 100%;
    max-width: 100%;
    padding-left: max(0.65rem, env(safe-area-inset-left)) !important;
    padding-right: max(0.65rem, env(safe-area-inset-right)) !important;
    box-sizing: border-box;
  }

  .shopping-branch-player > .max-w-7xl {
    padding-top: 0.65rem !important;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
  }

  .shopping-branch-player .shopping-welcome-bar {
    margin-bottom: 0.65rem !important;
  }

  .shopping-branch-player .shopping-player-artwork {
    width: min(100%, 15rem) !important;
    max-width: 15rem !important;
    aspect-ratio: 1;
    object-fit: cover !important;
  }

  .shopping-playlists-card [data-slot="card-content"] > .space-y-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .shopping-playlist-tile {
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
    padding: 0.45rem !important;
    border-radius: 8px !important;
  }

  .shopping-playlist-tile > .shopping-playlist-artwork {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    flex-basis: auto;
    border-radius: 6px;
  }

  .shopping-playlist-tile > div {
    width: 100%;
  }

  .shopping-playlist-tile h4,
  .shopping-playlist-tile p {
    font-size: 0.68rem !important;
  }

  .shopping-admin-playlist-row {
    gap: 0.45rem !important;
  }

  .shopping-admin-playlist-row::before {
    width: 2.35rem;
    height: 2.35rem;
    flex-basis: 2.35rem;
  }

  .shopping-playlist-photo-button {
    width: 2.2rem;
    padding: 0.25rem;
  }

  .shopping-playlist-photo-button span {
    font-size: 0;
  }

  .shopping-playlist-photo-button span::after {
    content: "Photo";
    font-size: 0.58rem;
  }
}

/* Mobile branch player follows the device appearance setting. */
@media (max-width: 600px) {
  .shopping-pull-refresh {
    display: none !important;
  }

  html,
  body.pearl-app-shell,
  body.pearl-app-shell #root {
    background: #f4f8fb !important;
  }

  body.pearl-app-shell .shopping-branch-player {
    color: #142033 !important;
    background: linear-gradient(180deg, #f4fbff 0%, #eaf5fb 100%) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }

  body.pearl-app-shell .shopping-branch-player header {
    background: rgba(255, 255, 255, 0.97) !important;
    border-color: #d9e5ec !important;
  }

  body.pearl-app-shell .shopping-branch-player header > div {
    padding-right: max(4rem, calc(env(safe-area-inset-right) + 3.25rem)) !important;
  }

  body.pearl-app-shell .shopping-branch-player header h1,
  body.pearl-app-shell .shopping-branch-player [data-slot="card-title"],
  body.pearl-app-shell .shopping-branch-player .text-gray-900 {
    color: #142033 !important;
  }

  body.pearl-app-shell .shopping-branch-player header p,
  body.pearl-app-shell .shopping-branch-player .text-gray-600,
  body.pearl-app-shell .shopping-branch-player .text-gray-500 {
    color: #657184 !important;
  }

  body.pearl-app-shell .shopping-branch-player [data-slot="card"]:not(.shopping-welcome-bar) {
    background: #fff !important;
    border-color: #dce6ed !important;
  }

  body.pearl-app-shell .shopping-branch-player .bg-gray-50 {
    background: #f2f7fa !important;
  }

  body.pearl-app-shell .shopping-branch-player .bg-gray-200 {
    background: #dce5eb !important;
  }

  body.pearl-app-shell .shopping-branch-player .shopping-radio-footer {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0.75rem 0.75rem max(0.9rem, env(safe-area-inset-bottom)) !important;
    color: #657184 !important;
    background: transparent !important;
    border: 0 !important;
  }

  .shopping-mobile-menu-panel {
    color: #142033;
    background: rgba(255, 255, 255, 0.985);
    border-right-color: #dce6ed;
  }

  .shopping-mobile-menu-profile {
    border-bottom-color: #dce6ed;
  }

  .shopping-mobile-menu-profile span {
    color: #657184;
  }

  .shopping-mobile-menu-link {
    color: #142033;
  }

  .shopping-mobile-menu-link:hover,
  .shopping-mobile-menu-link:active {
    background: #edf6fa;
  }

  body.shopping-mobile-menu-open {
    overflow: hidden !important;
  }

  .shopping-upload-queue {
    bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 600px) and (prefers-color-scheme: dark) {
  html,
  body.pearl-app-shell,
  body.pearl-app-shell #root {
    background: #101214 !important;
  }

  body.pearl-app-shell .shopping-branch-player {
    color: #f8fafc !important;
    background: #101214 !important;
  }

  body.pearl-app-shell .shopping-branch-player header {
    background: rgba(20, 22, 25, 0.97) !important;
    border-color: #2b2f34 !important;
  }

  body.pearl-app-shell .shopping-branch-player header h1,
  body.pearl-app-shell .shopping-branch-player [data-slot="card-title"],
  body.pearl-app-shell .shopping-branch-player .text-gray-900 {
    color: #f8fafc !important;
  }

  body.pearl-app-shell .shopping-branch-player header p,
  body.pearl-app-shell .shopping-branch-player .text-gray-600,
  body.pearl-app-shell .shopping-branch-player .text-gray-500 {
    color: #a9afb8 !important;
  }

  body.pearl-app-shell .shopping-branch-player [data-slot="card"]:not(.shopping-welcome-bar) {
    background: #191b1f !important;
    border-color: #2b2f34 !important;
    color: #f8fafc !important;
  }

  body.pearl-app-shell .shopping-branch-player [data-slot="card"]:not(.shopping-welcome-bar) h2,
  body.pearl-app-shell .shopping-branch-player [data-slot="card"]:not(.shopping-welcome-bar) h3,
  body.pearl-app-shell .shopping-branch-player [data-slot="card"]:not(.shopping-welcome-bar) h4,
  body.pearl-app-shell .shopping-branch-player [data-slot="card"]:not(.shopping-welcome-bar) p,
  body.pearl-app-shell .shopping-branch-player [data-slot="card"]:not(.shopping-welcome-bar) span {
    color: inherit;
  }

  body.pearl-app-shell .shopping-branch-player .shopping-tone-control {
    color: #f8fafc !important;
    background: #22262b !important;
    border-color: #39414a !important;
  }

  body.pearl-app-shell .shopping-branch-player .shopping-tone-control > span {
    color: #dff6ff !important;
  }

  body.pearl-app-shell .shopping-branch-player .shopping-tone-control select,
  body.pearl-app-shell .shopping-branch-player .shopping-tone-control option {
    color: #f8fafc !important;
    background: #111820 !important;
    border-color: #46515d !important;
  }

  body.pearl-app-shell .shopping-branch-player .border-blue-200.bg-blue-50 {
    color: #dbeafe !important;
    background: #17243a !important;
    border-color: #31527c !important;
  }

  body.pearl-app-shell .shopping-branch-player .border-red-200.bg-red-50 {
    color: #fecaca !important;
    background: #35191d !important;
    border-color: #71343d !important;
  }

  body.pearl-app-shell .shopping-branch-player .bg-gray-50 {
    background: #22252a !important;
  }

  body.pearl-app-shell .shopping-branch-player .bg-gray-200 {
    background: #34383e !important;
  }

  body.pearl-app-shell .shopping-branch-player .shopping-radio-footer {
    color: #858c96 !important;
    background: transparent !important;
  }

  .shopping-mobile-menu-panel {
    color: #eaf8ff;
    background: rgba(20, 22, 25, 0.985);
    border-right-color: #32363c;
  }

  .shopping-mobile-menu-profile {
    border-bottom-color: #32363c;
  }

  .shopping-mobile-menu-profile span {
    color: #a9afb8;
  }

  .shopping-mobile-menu-link {
    color: #f8fafc;
  }

  .shopping-mobile-menu-link:hover,
  .shopping-mobile-menu-link:active {
    background: #292c31;
  }
}

/* Final small-phone sizing overrides must follow the legacy portal rules. */
@media (max-width: 600px) {
  .shopping-branch-player > header > div {
    min-height: 3.6rem;
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
  }

  .shopping-branch-player > header .h-14.w-24 {
    width: 3rem !important;
    height: 3rem !important;
    border-radius: 0.55rem !important;
  }

  .shopping-branch-player > header h1 {
    max-width: 12rem;
    overflow: hidden;
    font-size: 0.86rem !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .shopping-branch-player > header p {
    font-size: 0.61rem !important;
  }

  .shopping-branch-player .shopping-welcome-bar [data-slot="card-content"] {
    padding: 0.65rem 0.75rem !important;
  }

  .shopping-branch-player .shopping-welcome-bar h2 {
    margin-bottom: 0.25rem !important;
    font-size: 0.92rem !important;
    line-height: 1.2 !important;
  }

  .shopping-branch-player .shopping-welcome-bar .text-cyan-50 {
    gap: 0.25rem 0.45rem !important;
    font-size: 0.58rem !important;
  }

  .shopping-branch-player .shopping-welcome-bar [data-slot="badge"] {
    padding: 0.22rem 0.4rem !important;
    font-size: 0.53rem !important;
  }

  .shopping-branch-player .grid.grid-cols-1.lg\:grid-cols-3 {
    gap: 0.7rem !important;
  }

  .shopping-branch-player [data-slot="card-header"] {
    padding: 0.7rem 0.8rem !important;
  }

  .shopping-branch-player [data-slot="card-content"] {
    padding: 0.75rem !important;
  }

  body.pearl-app-shell .shopping-branch-player .shopping-player-artwork {
    width: min(100%, 12.5rem) !important;
    max-width: 12.5rem !important;
    border-radius: 0.75rem !important;
  }

  .shopping-branch-player [data-shopping-track-title] {
    display: -webkit-box;
    overflow: hidden;
    font-size: 1rem !important;
    line-height: 1.25 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .shopping-branch-player [data-shopping-track-title] + p {
    font-size: 0.72rem !important;
  }

  .shopping-branch-player .size-16 {
    width: 3rem !important;
    height: 3rem !important;
  }
}

/* Final appearance fixes for native controls and dark mobile surfaces. */
@media (prefers-color-scheme: dark) {
  body.pearl-app-shell .shopping-admin-live-panel {
    color-scheme: dark;
  }

  body.pearl-app-shell .shopping-admin-live-body label {
    color: #d9e8f2 !important;
    -webkit-text-fill-color: #d9e8f2;
  }

  body.pearl-app-shell .shopping-admin-live-store {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc;
    background: #1d2730 !important;
    border-color: #3d5362 !important;
    color-scheme: dark;
  }

  body.pearl-app-shell .shopping-admin-live-store option {
    color: #10283e !important;
    -webkit-text-fill-color: #10283e;
    background: #ffffff !important;
  }

  body.pearl-app-shell .shopping-admin-live-play {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
    background: linear-gradient(105deg, #08add5 0%, #087fc8 48%, #155eef 100%) !important;
    border: 1px solid rgba(111, 219, 255, 0.35) !important;
    box-shadow: 0 10px 24px rgba(8, 127, 200, 0.28) !important;
  }

  body.pearl-app-shell .shopping-admin-live-play:hover,
  body.pearl-app-shell .shopping-admin-live-play:active {
    background: linear-gradient(105deg, #079bc3 0%, #096eb7 48%, #124bc4 100%) !important;
  }

  body.pearl-app-shell .shopping-admin-live-refresh {
    color: #58d5ff !important;
    -webkit-text-fill-color: #58d5ff;
  }

  body.pearl-app-shell .shopping-admin-live-duration,
  body.pearl-app-shell .shopping-admin-live-playlist {
    color: #d6e6f1 !important;
    -webkit-text-fill-color: #d6e6f1;
  }
}

@media (max-width: 600px) and (prefers-color-scheme: dark) {
  body.pearl-app-shell .shopping-branch-player [data-slot="card"]:not(.shopping-welcome-bar),
  body.pearl-app-shell .shopping-branch-player [data-slot="card-header"],
  body.pearl-app-shell .shopping-branch-player [data-slot="card-content"] {
    color: #f8fafc !important;
    background: #191b1f !important;
    border-color: #30353b !important;
  }

  body.pearl-app-shell .shopping-branch-player [data-slot="card-title"],
  body.pearl-app-shell .shopping-branch-player [data-shopping-track-title],
  body.pearl-app-shell .shopping-branch-player .text-gray-900,
  body.pearl-app-shell .shopping-branch-player .text-gray-800,
  body.pearl-app-shell .shopping-branch-player .text-gray-700 {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc;
  }

  body.pearl-app-shell .shopping-branch-player .text-gray-600,
  body.pearl-app-shell .shopping-branch-player .text-gray-500,
  body.pearl-app-shell .shopping-branch-player .text-gray-400,
  body.pearl-app-shell .shopping-branch-player [data-shopping-track-title] + p {
    color: #aeb7c2 !important;
    -webkit-text-fill-color: #aeb7c2;
  }

  body.pearl-app-shell .shopping-branch-player .shopping-playlist-tile,
  body.pearl-app-shell .shopping-branch-player .bg-white,
  body.pearl-app-shell .shopping-branch-player .bg-gray-50 {
    color: #f8fafc !important;
    background: #22262b !important;
    border-color: #363c43 !important;
  }

  body.pearl-app-shell .shopping-branch-player .shopping-playlist-tile h4,
  body.pearl-app-shell .shopping-branch-player .shopping-playlist-tile p,
  body.pearl-app-shell .shopping-branch-player .shopping-playlist-tile span,
  body.pearl-app-shell .shopping-branch-player label {
    color: inherit !important;
    -webkit-text-fill-color: currentColor;
  }

  body.pearl-app-shell .shopping-branch-player .text-cyan-600,
  body.pearl-app-shell .shopping-branch-player .text-blue-600 {
    color: #48cfff !important;
    -webkit-text-fill-color: #48cfff;
  }

  body.pearl-app-shell .shopping-branch-player select,
  body.pearl-app-shell .shopping-branch-player option,
  body.pearl-app-shell .shopping-branch-player input {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc;
    background-color: #151a1f !important;
    border-color: #45515c !important;
    color-scheme: dark;
  }
}

/* Keep the mobile admin drawer compact and legible after global theme rules. */
@media (max-width: 767px) {
  body.pearl-app-shell #root > .flex.h-screen > main {
    padding-top: max(2.35rem, calc(env(safe-area-inset-top) + 1.75rem)) !important;
    padding-left: env(safe-area-inset-left) !important;
    padding-right: env(safe-area-inset-right) !important;
  }

  body.pearl-app-shell .shopping-admin-nav-links {
    align-content: start;
    grid-auto-rows: min-content;
  }

  body.pearl-app-shell .shopping-admin-nav-link {
    color: #32495d !important;
    -webkit-text-fill-color: #32495d;
  }

  body.pearl-app-shell .shopping-admin-nav-link.is-active {
    color: #007eae !important;
    -webkit-text-fill-color: #007eae;
  }

  body.pearl-app-shell .shopping-admin-nav-logout {
    color: #d92d3f !important;
    -webkit-text-fill-color: #d92d3f;
  }
}

@media (max-width: 767px) and (prefers-color-scheme: dark) {
  body.pearl-app-shell #root > .flex.h-screen,
  body.pearl-app-shell #root > .flex.h-screen > main {
    color: #f4f8fb !important;
    background: #101317 !important;
    background-image: none !important;
  }

  body.pearl-app-shell #root > .flex.h-screen > main {
    color-scheme: dark;
  }

  body.pearl-app-shell #root > .flex.h-screen > main [data-slot="card"],
  body.pearl-app-shell #root > .flex.h-screen > main [data-slot="card-header"],
  body.pearl-app-shell #root > .flex.h-screen > main [data-slot="card-content"] {
    color: #f4f8fb !important;
    background: #1a1e23 !important;
    border-color: #30363d !important;
  }

  body.pearl-app-shell #root > .flex.h-screen > main h1,
  body.pearl-app-shell #root > .flex.h-screen > main h2,
  body.pearl-app-shell #root > .flex.h-screen > main h3,
  body.pearl-app-shell #root > .flex.h-screen > main h4,
  body.pearl-app-shell #root > .flex.h-screen > main label,
  body.pearl-app-shell #root > .flex.h-screen > main [data-slot="card-title"],
  body.pearl-app-shell #root > .flex.h-screen > main .text-gray-900,
  body.pearl-app-shell #root > .flex.h-screen > main .text-gray-800,
  body.pearl-app-shell #root > .flex.h-screen > main .text-gray-700 {
    color: #f4f8fb !important;
    -webkit-text-fill-color: #f4f8fb;
  }

  body.pearl-app-shell #root > .flex.h-screen > main p,
  body.pearl-app-shell #root > .flex.h-screen > main [data-slot="card-description"],
  body.pearl-app-shell #root > .flex.h-screen > main .text-gray-600,
  body.pearl-app-shell #root > .flex.h-screen > main .text-gray-500,
  body.pearl-app-shell #root > .flex.h-screen > main .text-gray-400 {
    color: #aeb8c2 !important;
    -webkit-text-fill-color: #aeb8c2;
  }

  body.pearl-app-shell #root > .flex.h-screen > main input,
  body.pearl-app-shell #root > .flex.h-screen > main select,
  body.pearl-app-shell #root > .flex.h-screen > main textarea,
  body.pearl-app-shell #root > .flex.h-screen > main option {
    color: #f4f8fb !important;
    -webkit-text-fill-color: #f4f8fb;
    background-color: #151a1f !important;
    border-color: #45515c !important;
    color-scheme: dark;
  }

  body.pearl-app-shell #root > .flex.h-screen > main table,
  body.pearl-app-shell #root > .flex.h-screen > main thead,
  body.pearl-app-shell #root > .flex.h-screen > main tbody,
  body.pearl-app-shell #root > .flex.h-screen > main tr,
  body.pearl-app-shell #root > .flex.h-screen > main th,
  body.pearl-app-shell #root > .flex.h-screen > main td {
    color: #e8f0f5 !important;
    background-color: #1a1e23 !important;
    border-color: #30363d !important;
  }

  body.pearl-app-shell #root > .flex.h-screen > main .bg-white,
  body.pearl-app-shell #root > .flex.h-screen > main .bg-gray-50,
  body.pearl-app-shell #root > .flex.h-screen > main .bg-gray-100 {
    color: #f4f8fb !important;
    background-color: #1d2227 !important;
    border-color: #343b43 !important;
  }

  body.pearl-app-shell #root > .flex.h-screen > main .border-gray-200,
  body.pearl-app-shell #root > .flex.h-screen > main .border-gray-300 {
    border-color: #343b43 !important;
  }

  body.pearl-app-shell #root > .flex.h-screen > main .text-cyan-600,
  body.pearl-app-shell #root > .flex.h-screen > main .text-blue-600 {
    color: #4fd4ff !important;
    -webkit-text-fill-color: #4fd4ff;
  }

  body.pearl-app-shell .shopping-admin-nav-link {
    color: #edf5fa !important;
    -webkit-text-fill-color: #edf5fa;
  }

  body.pearl-app-shell .shopping-admin-nav-link.is-active {
    color: #55d6ff !important;
    -webkit-text-fill-color: #55d6ff;
  }

  body.pearl-app-shell .shopping-admin-nav-logout {
    color: #ff9aa5 !important;
    -webkit-text-fill-color: #ff9aa5;
  }
}

/* One-time credential handoff shown after a branch user is created. */
body.pearl-app-shell .pearl-credentials-card {
  display: grid;
  gap: 0.8rem;
  padding: 0.95rem;
  overflow: hidden;
  border: 1px solid #9bdcf1;
  border-radius: 0.85rem;
  color: #10283e;
  background:
    radial-gradient(circle at 100% 0, rgba(21, 94, 239, 0.13), transparent 15rem),
    linear-gradient(135deg, #effcff, #f4f8ff);
  box-shadow: 0 10px 30px rgba(7, 98, 145, 0.09);
}

body.pearl-app-shell .pearl-credentials-card__header,
body.pearl-app-shell .pearl-credentials-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

body.pearl-app-shell .pearl-credentials-card__header span {
  display: block;
  margin-bottom: 0.18rem;
  color: #078fc4;
  font-size: 0.61rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

body.pearl-app-shell .pearl-credentials-card__header h3 {
  margin: 0;
  color: #10283e !important;
  font-size: 1rem !important;
}

body.pearl-app-shell .pearl-credentials-card__header button {
  flex: 0 0 auto;
  padding: 0.35rem 0.55rem;
  border: 0;
  border-radius: 0.5rem;
  color: #577083;
  background: rgba(255, 255, 255, 0.7);
  font-size: 0.7rem;
  font-weight: 700;
}

body.pearl-app-shell .pearl-credentials-card__details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

body.pearl-app-shell .pearl-credentials-card__details > div {
  min-width: 0;
  padding: 0.65rem 0.72rem;
  border: 1px solid rgba(117, 190, 219, 0.42);
  border-radius: 0.62rem;
  background: rgba(255, 255, 255, 0.78);
}

body.pearl-app-shell .pearl-credentials-card__details span,
body.pearl-app-shell .pearl-credentials-card__details strong {
  display: block;
}

body.pearl-app-shell .pearl-credentials-card__details span {
  margin-bottom: 0.2rem;
  color: #698092;
  font-size: 0.63rem;
  font-weight: 700;
}

body.pearl-app-shell .pearl-credentials-card__details strong {
  overflow-wrap: anywhere;
  color: #10283e;
  font-size: 0.76rem;
  user-select: all;
}

body.pearl-app-shell .pearl-credentials-copy {
  min-height: 2.35rem;
  padding: 0.55rem 0.95rem !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
  border: 0 !important;
  background: linear-gradient(105deg, #08add5, #087fc8 52%, #155eef) !important;
  box-shadow: 0 7px 18px rgba(8, 127, 200, 0.2);
}

body.pearl-app-shell .pearl-credentials-card__actions p {
  margin: 0;
  color: #607789;
  font-size: 0.66rem;
  text-align: right;
}

@media (max-width: 600px) {
  body.pearl-app-shell .pearl-credentials-card__details {
    grid-template-columns: 1fr;
  }

  body.pearl-app-shell .pearl-credentials-card__actions {
    align-items: stretch;
    flex-direction: column;
  }

  body.pearl-app-shell .pearl-credentials-card__actions p {
    text-align: left;
  }
}

/* Authoritative mobile management theme. Keep this block last. */
body.pearl-app-shell .shopping-playing-now,
body.pearl-app-shell .shopping-playing-now * {
  visibility: visible !important;
  opacity: 1 !important;
}

body.pearl-app-shell .shopping-playing-now {
  min-height: 4.15rem;
  color: #123b2b !important;
  border-color: #72d49f !important;
  background: linear-gradient(105deg, #ecfff4, #f8fffb) !important;
  box-shadow: inset 3px 0 #18a05e, 0 5px 16px rgba(16, 120, 70, 0.08) !important;
}

body.pearl-app-shell .shopping-playing-badge {
  flex: 0 0 auto;
  color: #075f36 !important;
  -webkit-text-fill-color: #075f36 !important;
  border-color: #76d7a3 !important;
  background: #dff8e9 !important;
}

@media (max-width: 767px) {
  html,
  body.pearl-app-shell,
  body.pearl-app-shell #root {
    width: 100%;
    min-height: 100%;
    min-height: 100dvh;
    overflow-x: clip !important;
  }

  body.pearl-app-shell #root > .flex.h-screen > main {
    min-width: 0;
    min-height: 100dvh;
    padding-top: max(4rem, calc(env(safe-area-inset-top) + 3.2rem)) !important;
    padding-right: max(0.7rem, env(safe-area-inset-right)) !important;
    padding-bottom: max(6rem, calc(env(safe-area-inset-bottom) + 5rem)) !important;
    padding-left: max(0.7rem, env(safe-area-inset-left)) !important;
  }

  body.pearl-app-shell .shopping-admin-nav-trigger {
    top: max(0.65rem, calc(env(safe-area-inset-top) + 0.55rem)) !important;
    right: max(0.7rem, calc(env(safe-area-inset-right) + 0.45rem)) !important;
  }

  body.pearl-app-shell .shopping-admin-live {
    right: max(0.7rem, calc(env(safe-area-inset-right) + 0.45rem)) !important;
    bottom: max(0.8rem, calc(env(safe-area-inset-bottom) + 0.55rem)) !important;
  }

  body.pearl-app-shell .shopping-admin-live-trigger {
    min-height: 2.35rem;
    padding: 0.52rem 0.78rem;
    font-size: 0.7rem;
  }

  body.pearl-app-shell .shopping-playing-now {
    align-items: flex-start !important;
    gap: 0.5rem !important;
    padding: 0.75rem !important;
  }

  body.pearl-app-shell .shopping-playing-now > div:first-child {
    display: grid !important;
    min-width: 0;
    grid-template-columns: minmax(7.25rem, auto) minmax(0, 1fr) !important;
    gap: 0.35rem 0.6rem !important;
  }

  body.pearl-app-shell .shopping-playing-badge {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (prefers-color-scheme: dark) {
  html,
  body.pearl-app-shell,
  body.pearl-app-shell #root,
  body.pearl-app-shell #root > .flex.h-screen,
  body.pearl-app-shell #root > .flex.h-screen > main {
    color: #f4f8fb !important;
    background: #0d141a !important;
    color-scheme: dark;
  }

  body.pearl-app-shell #root [data-slot="card"],
  body.pearl-app-shell #root [data-slot="card-header"],
  body.pearl-app-shell #root [data-slot="card-content"],
  body.pearl-app-shell #root .bg-white,
  body.pearl-app-shell #root .bg-gray-50,
  body.pearl-app-shell #root .bg-gray-100,
  body.pearl-app-shell [data-slot="dialog-content"],
  body.pearl-app-shell .shopping-admin-nav-panel {
    color: #f4f8fb !important;
    border-color: #354652 !important;
    background: #18222b !important;
  }

  body.pearl-app-shell #root h1,
  body.pearl-app-shell #root h2,
  body.pearl-app-shell #root h3,
  body.pearl-app-shell #root h4,
  body.pearl-app-shell #root label,
  body.pearl-app-shell #root strong,
  body.pearl-app-shell #root .text-gray-900,
  body.pearl-app-shell #root .text-gray-800,
  body.pearl-app-shell #root .text-gray-700 {
    color: #f5f9fc !important;
    -webkit-text-fill-color: #f5f9fc !important;
  }

  body.pearl-app-shell #root p,
  body.pearl-app-shell #root .text-gray-600,
  body.pearl-app-shell #root .text-gray-500,
  body.pearl-app-shell #root .text-gray-400 {
    color: #b8c6d0 !important;
    -webkit-text-fill-color: #b8c6d0 !important;
  }

  body.pearl-app-shell #root input,
  body.pearl-app-shell #root textarea,
  body.pearl-app-shell #root select,
  body.pearl-app-shell [data-slot="dialog-content"] input,
  body.pearl-app-shell [data-slot="dialog-content"] textarea,
  body.pearl-app-shell [data-slot="dialog-content"] select {
    color: #f7fafc !important;
    -webkit-text-fill-color: #f7fafc !important;
    border-color: #435766 !important;
    background: #101920 !important;
    color-scheme: dark;
  }

  body.pearl-app-shell #root input::placeholder,
  body.pearl-app-shell #root textarea::placeholder {
    color: #95a6b2 !important;
    -webkit-text-fill-color: #95a6b2 !important;
    opacity: 1;
  }

  body.pearl-app-shell .shopping-playing-now {
    color: #eafff2 !important;
    border-color: #2e8158 !important;
    background: linear-gradient(105deg, #123526, #152d25) !important;
  }

  body.pearl-app-shell .shopping-playing-now .shopping-playing-badge {
    color: #baf4d1 !important;
    -webkit-text-fill-color: #baf4d1 !important;
    border-color: #397c59 !important;
    background: #17452f !important;
  }

  body.pearl-app-shell .shopping-reset-copy-credentials {
    color: #9be7ff !important;
    -webkit-text-fill-color: #9be7ff !important;
    border-color: #2d7895 !important;
    background: #123243 !important;
  }
}

@media (prefers-color-scheme: dark) {
  body.pearl-app-shell .pearl-credentials-card {
    color: #f4f8fb;
    border-color: #285a70;
    background:
      radial-gradient(circle at 100% 0, rgba(21, 94, 239, 0.2), transparent 15rem),
      linear-gradient(135deg, #13272f, #171f2e);
  }

  body.pearl-app-shell .pearl-credentials-card__header h3,
  body.pearl-app-shell .pearl-credentials-card__details strong {
    color: #f4f8fb !important;
    -webkit-text-fill-color: #f4f8fb;
  }

  body.pearl-app-shell .pearl-credentials-card__header span {
    color: #56d6ff;
  }

  body.pearl-app-shell .pearl-credentials-card__header button {
    color: #c7d4dd;
    background: #26333d;
  }

  body.pearl-app-shell .pearl-credentials-card__details > div {
    border-color: #344b58;
    background: rgba(10, 20, 27, 0.48);
  }

  body.pearl-app-shell .pearl-credentials-card__details span,
  body.pearl-app-shell .pearl-credentials-card__actions p {
    color: #aab8c2 !important;
    -webkit-text-fill-color: #aab8c2;
  }
}

/* Desktop dark-mode surfaces that Tailwind gradient utilities keep light. */
@media (min-width: 768px) and (prefers-color-scheme: dark) {
  body.pearl-app-shell aside nav button.border-cyan-200,
  body.pearl-app-shell aside nav button.from-cyan-50.to-blue-50 {
    color: #7ddcff !important;
    -webkit-text-fill-color: #7ddcff !important;
    border-color: #2c6f89 !important;
    border-left-color: #19b8e6 !important;
    background: linear-gradient(105deg, #133344, #172b3c) !important;
    box-shadow: inset 0 0 0 1px rgba(71, 191, 231, 0.08) !important;
  }

  body.pearl-app-shell aside nav button:hover {
    color: #8be2ff !important;
    -webkit-text-fill-color: #8be2ff !important;
    background: #182c38 !important;
  }

  body.pearl-app-shell aside > .border-t {
    color: #c9d6df !important;
    border-color: #344550 !important;
    background: #121d26 !important;
  }

  body.pearl-app-shell aside > .border-t p,
  body.pearl-app-shell aside > .border-t .text-gray-600 {
    color: #aebfca !important;
    -webkit-text-fill-color: #aebfca !important;
  }

  body.pearl-app-shell aside > .border-t button {
    background: #17232c !important;
  }

  body.pearl-app-shell main .from-cyan-50.to-blue-50 {
    border-color: #27576c !important;
    background: linear-gradient(125deg, #142c37, #172937) !important;
  }

  body.pearl-app-shell main .from-purple-50.to-pink-50 {
    border-color: #554263 !important;
    background: linear-gradient(125deg, #292432, #302532) !important;
  }

  body.pearl-app-shell main .from-green-50.to-emerald-50 {
    border-color: #315e48 !important;
    background: linear-gradient(125deg, #182f27, #183329) !important;
  }

  body.pearl-app-shell main .from-orange-50.to-yellow-50 {
    border-color: #655039 !important;
    background: linear-gradient(125deg, #32291e, #352d20) !important;
  }
}

/* Compact persisted theme control below About Us. */
body.pearl-app-shell .shopping-theme-toggle {
  display: inline-flex !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 1.7rem !important;
  margin: 0.2rem 0.65rem 0.35rem !important;
  padding: 0.3rem 0.55rem !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.35rem !important;
  color: #536779 !important;
  -webkit-text-fill-color: currentColor !important;
  border: 1px solid #d6e1e8 !important;
  border-radius: 999px !important;
  background: #f7fafc !important;
  box-shadow: none !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em;
  touch-action: manipulation;
}

body.pearl-app-shell .shopping-theme-toggle:hover {
  color: #067ba8 !important;
  border-color: #8dd3eb !important;
  background: #eefaff !important;
}

body.pearl-app-shell .shopping-theme-toggle svg {
  width: 0.8rem !important;
  height: 0.8rem !important;
  flex: 0 0 0.8rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.pearl-app-shell .shopping-admin-nav-links .shopping-theme-toggle {
  margin: 0.3rem 0.85rem 0.55rem !important;
}

html[data-shopping-theme="dark"] body.pearl-app-shell .shopping-theme-toggle {
  color: #b9d6e4 !important;
  border-color: #344d5b !important;
  background: #172731 !important;
}

html[data-shopping-theme="dark"] body.pearl-app-shell .shopping-theme-toggle:hover {
  color: #83e0ff !important;
  border-color: #337995 !important;
  background: #183442 !important;
}

/*
 * Final dark-mode component pass. Several compiled utility surfaces are pale
 * cards or portal-mounted controls, so they need explicit dark counterparts.
 */
@media (prefers-color-scheme: dark) {
  body.pearl-app-shell .shopping-playlist-photo-button {
    color: #a6e9ff !important;
    -webkit-text-fill-color: #a6e9ff !important;
    border-color: #34748c !important;
    background: #15303d !important;
    box-shadow: none !important;
  }

  body.pearl-app-shell .shopping-playlist-photo-button:hover {
    color: #d8f7ff !important;
    -webkit-text-fill-color: #d8f7ff !important;
    border-color: #4da1bf !important;
    background: #1a3b49 !important;
  }

  body.pearl-app-shell [data-slot="dialog-content"] {
    color: #eef7fb !important;
    border-color: #3c5261 !important;
    background: #17242d !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55) !important;
  }

  body.pearl-app-shell [data-slot="dialog-content"] :is(
    [data-slot="dialog-title"],
    label,
    h2,
    h3,
    strong,
    .text-gray-900,
    .text-gray-800,
    .text-gray-700
  ) {
    color: #f3f8fb !important;
    -webkit-text-fill-color: #f3f8fb !important;
  }

  body.pearl-app-shell [data-slot="dialog-content"] :is(
    [data-slot="dialog-description"],
    p,
    .text-gray-600,
    .text-gray-500,
    .text-gray-400
  ) {
    color: #afc0cb !important;
    -webkit-text-fill-color: #afc0cb !important;
  }

  body.pearl-app-shell [data-slot="dialog-content"] :is(
    input,
    textarea,
    select,
    [role="combobox"],
    [data-slot="select-trigger"]
  ) {
    color: #f4f9fc !important;
    -webkit-text-fill-color: #f4f9fc !important;
    border-color: #456071 !important;
    background: #0f1a22 !important;
    color-scheme: dark;
  }

  body.pearl-app-shell [data-slot="dialog-content"] :is(input, textarea)::placeholder {
    color: #91a5b2 !important;
    -webkit-text-fill-color: #91a5b2 !important;
    opacity: 1;
  }

  body.pearl-app-shell :is([data-slot="select-content"], [role="listbox"]) {
    color: #f2f7fa !important;
    border-color: #405665 !important;
    background: #101b23 !important;
    color-scheme: dark;
  }

  body.pearl-app-shell :is([data-slot="select-item"], [role="option"]) {
    color: #eaf3f8 !important;
    -webkit-text-fill-color: #eaf3f8 !important;
    background-color: #101b23 !important;
  }

  body.pearl-app-shell :is([data-slot="select-item"], [role="option"]):is(:hover, :focus, [data-highlighted]) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: #1d4254 !important;
  }

  body.pearl-app-shell [data-slot="dialog-content"] :is(
    [role="checkbox"],
    input[type="checkbox"]
  ) {
    color: #ffffff !important;
    border-color: #5e7482 !important;
    background: #12212a !important;
    accent-color: #08a7d7;
  }

  body.pearl-app-shell [data-slot="dialog-content"] [role="checkbox"][data-state="checked"] {
    border-color: #08a7d7 !important;
    background: #078fc4 !important;
  }

  body.pearl-app-shell [data-slot="dialog-content"] :is(
    .max-h-32,
    .max-h-40,
    .max-h-64
  ).overflow-y-auto {
    color: #e9f2f7 !important;
    border-color: #405665 !important;
    background: #111d25 !important;
  }

  body.pearl-app-shell [data-slot="dialog-content"] :is(
    .hover\:bg-gray-50:hover,
    .bg-gray-50,
    .bg-white
  ) {
    color: #eef7fb !important;
    border-color: #3d5260 !important;
    background: #182630 !important;
  }

  body.pearl-app-shell [data-slot="dialog-content"] button.bg-white,
  body.pearl-app-shell [data-slot="dialog-content"] button.border-gray-300 {
    color: #d8e7ef !important;
    -webkit-text-fill-color: #d8e7ef !important;
    border-color: #4b6270 !important;
    background: #1b2a34 !important;
  }

  body.pearl-app-shell main :is(
    [class*="bg-cyan-50"],
    [class*="bg-blue-50"],
    [class*="bg-green-50"],
    [class*="bg-emerald-50"],
    [class*="bg-purple-50"],
    [class*="bg-pink-50"],
    [class*="bg-orange-50"],
    [class*="bg-yellow-50"]
  ) {
    color: #edf6fa !important;
    border-color: #38505e !important;
    background-color: #172833 !important;
    background-image: none !important;
  }

  body.pearl-app-shell main :is(
    [class*="bg-cyan-50"],
    [class*="bg-blue-50"],
    [class*="bg-green-50"],
    [class*="bg-emerald-50"],
    [class*="bg-purple-50"],
    [class*="bg-pink-50"],
    [class*="bg-orange-50"],
    [class*="bg-yellow-50"]
  ) :is(p, span, label, strong, h3, h4) {
    color: #e6f0f5 !important;
    -webkit-text-fill-color: #e6f0f5 !important;
  }

  body.pearl-app-shell main :is(
    [class*="bg-cyan-50"],
    [class*="bg-blue-50"],
    [class*="bg-green-50"],
    [class*="bg-emerald-50"],
    [class*="bg-purple-50"],
    [class*="bg-pink-50"],
    [class*="bg-orange-50"],
    [class*="bg-yellow-50"]
  ) button {
    border-color: #4b6877 !important;
  }

  body.pearl-app-shell :is([role="switch"], [data-slot="switch"]) {
    border: 1px solid #536a77 !important;
    background: #2a3b45 !important;
  }

  body.pearl-app-shell :is([role="switch"], [data-slot="switch"])[data-state="checked"] {
    border-color: #20b9e5 !important;
    background: #078fc4 !important;
  }

  body.pearl-app-shell :is([role="switch"], [data-slot="switch"]) > span {
    background: #f4f8fb !important;
  }
}

/* Safari-safe explicit Light mode overrides for the persisted theme control. */
html[data-shopping-theme="light"],
html[data-shopping-theme="light"] body.pearl-app-shell,
html[data-shopping-theme="light"] body.pearl-app-shell #root,
html[data-shopping-theme="light"] body.pearl-app-shell #root > .flex.h-screen,
html[data-shopping-theme="light"] body.pearl-app-shell #root > .flex.h-screen > main {
  color: #12283c !important;
  background: #f6f9fc !important;
  color-scheme: light !important;
}

html[data-shopping-theme="light"] body.pearl-app-shell :is(
  [data-slot="card"],
  [data-slot="card-header"],
  [data-slot="card-content"],
  [data-slot="dialog-content"],
  .shopping-admin-nav-panel,
  .bg-white,
  .bg-gray-50,
  .bg-gray-100
) {
  color: #12283c !important;
  border-color: #d9e3e9 !important;
  background: #ffffff !important;
}

html[data-shopping-theme="light"] body.pearl-app-shell :is(
  h1,
  h2,
  h3,
  h4,
  label,
  strong,
  .text-gray-900,
  .text-gray-800,
  .text-gray-700
) {
  color: #12283c !important;
  -webkit-text-fill-color: #12283c !important;
}

html[data-shopping-theme="light"] body.pearl-app-shell :is(
  p,
  .text-gray-600,
  .text-gray-500,
  .text-gray-400
) {
  color: #607789 !important;
  -webkit-text-fill-color: #607789 !important;
}

html[data-shopping-theme="light"] body.pearl-app-shell :is(
  input,
  textarea,
  select,
  [role="combobox"],
  [data-slot="select-trigger"]
) {
  color: #12283c !important;
  -webkit-text-fill-color: #12283c !important;
  border-color: #c8d8e1 !important;
  background: #ffffff !important;
  color-scheme: light !important;
}

html[data-shopping-theme="light"] body.pearl-app-shell .shopping-playlist-photo-button {
  color: #077aa8 !important;
  -webkit-text-fill-color: #077aa8 !important;
  border-color: #b8e5f4 !important;
  background: #f3fbff !important;
}

/* Branch listening console: compact desktop layout with a mobile-safe fallback. */
body.pearl-app-shell .shopping-branch-player {
  --player-bg: #eef8fc;
  --player-panel: #ffffff;
  --player-panel-soft: #f3f8fb;
  --player-panel-active: #e4f7fd;
  --player-border: #d6e5ed;
  --player-text: #10283e;
  --player-muted: #607789;
  --player-accent: #0797c8;
  --player-shadow: 0 16px 42px rgba(20, 57, 79, 0.1);
}

html[data-shopping-theme="dark"] body.pearl-app-shell .shopping-branch-player {
  --player-bg: #09131b;
  --player-panel: #111f29;
  --player-panel-soft: #172833;
  --player-panel-active: #123544;
  --player-border: #304653;
  --player-text: #f3f9fc;
  --player-muted: #a9bac5;
  --player-accent: #38c8f4;
  --player-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

body.pearl-app-shell .shopping-branch-original-logout {
  display: none !important;
}

body.pearl-app-shell .shopping-branch-profile {
  position: relative;
  z-index: 35;
  margin-left: auto;
}

body.pearl-app-shell .shopping-branch-profile-trigger {
  display: inline-flex;
  min-width: 3.2rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.25rem 0.45rem 0.25rem 0.3rem;
  color: var(--player-text);
  background: var(--player-panel-soft);
  border: 1px solid var(--player-border);
  border-radius: 999px;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.08);
  cursor: pointer;
}

body.pearl-app-shell .shopping-branch-profile-avatar {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 800;
  background: linear-gradient(135deg, #06afd6, #1765e8);
  border-radius: 50%;
}

body.pearl-app-shell .shopping-branch-profile-chevron {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--player-muted);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.pearl-app-shell .shopping-branch-profile-menu {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  display: none;
  width: min(18rem, calc(100vw - 1.25rem));
  overflow: hidden;
  color: var(--player-text);
  background: var(--player-panel);
  border: 1px solid var(--player-border);
  border-radius: 0.85rem;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
}

body.pearl-app-shell .shopping-branch-profile.is-open .shopping-branch-profile-menu {
  display: block;
  animation: shopping-profile-enter 140ms ease-out;
}

body.pearl-app-shell .shopping-branch-profile-identity {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.85rem 0.9rem;
  border-bottom: 1px solid var(--player-border);
}

body.pearl-app-shell .shopping-branch-profile-identity strong,
body.pearl-app-shell .shopping-branch-profile-identity span {
  overflow: hidden;
  color: var(--player-text) !important;
  -webkit-text-fill-color: var(--player-text) !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.pearl-app-shell .shopping-branch-profile-identity span {
  color: var(--player-muted) !important;
  -webkit-text-fill-color: var(--player-muted) !important;
  font-size: 0.75rem;
}

body.pearl-app-shell .shopping-branch-profile-logout {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 0.9rem;
  color: #e43f52;
  -webkit-text-fill-color: #e43f52;
  background: transparent;
  border: 0;
  cursor: pointer;
}

body.pearl-app-shell .shopping-branch-profile-logout:hover {
  background: rgba(228, 63, 82, 0.09);
}

body.pearl-app-shell .shopping-branch-profile-logout svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes shopping-profile-enter {
  from { opacity: 0; transform: translateY(-0.3rem) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (min-width: 1024px) {
  body.pearl-app-shell .shopping-branch-player {
    min-height: 100dvh !important;
    color: var(--player-text) !important;
    background: var(--player-bg) !important;
    background-image: none !important;
  }

  body.pearl-app-shell .shopping-branch-player > header {
    background: var(--player-panel) !important;
    border-color: var(--player-border) !important;
  }

  body.pearl-app-shell .shopping-branch-player > header > div {
    width: 100% !important;
    max-width: none !important;
    padding-top: 0.65rem !important;
    padding-bottom: 0.65rem !important;
    padding-left: clamp(1rem, 2vw, 2rem) !important;
    padding-right: clamp(1rem, 2vw, 2rem) !important;
  }

  body.pearl-app-shell .shopping-branch-player > header .h-14.w-24 {
    width: 4.2rem !important;
    height: 3rem !important;
  }

  body.pearl-app-shell .shopping-branch-player > header h1 {
    color: var(--player-text) !important;
    -webkit-text-fill-color: var(--player-text) !important;
    font-size: 1rem !important;
  }

  body.pearl-app-shell .shopping-branch-player > header p {
    color: var(--player-muted) !important;
    -webkit-text-fill-color: var(--player-muted) !important;
    font-size: 0.72rem !important;
  }

  body.pearl-app-shell .shopping-player-shell {
    width: 100% !important;
    max-width: none !important;
    padding-top: 0.9rem !important;
    padding-bottom: 0.55rem !important;
    padding-left: clamp(1rem, 2vw, 2rem) !important;
    padding-right: clamp(1rem, 2vw, 2rem) !important;
  }

  body.pearl-app-shell .shopping-welcome-bar {
    margin-bottom: 0.8rem !important;
    border-radius: 0.8rem !important;
  }

  body.pearl-app-shell .shopping-welcome-bar [data-slot="card-content"] {
    padding: 0.65rem 0.9rem !important;
  }

  body.pearl-app-shell .shopping-welcome-bar h2 {
    margin-bottom: 0.18rem !important;
    font-size: 0.94rem !important;
  }

  body.pearl-app-shell .shopping-welcome-bar .text-cyan-50,
  body.pearl-app-shell .shopping-welcome-bar [data-slot="badge"] {
    font-size: 0.65rem !important;
  }

  body.pearl-app-shell .shopping-player-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(20rem, 0.85fr) !important;
    gap: 0.9rem !important;
    height: max(34rem, calc(100dvh - 10.8rem));
    align-items: stretch;
  }

  body.pearl-app-shell .shopping-player-layout > div:first-child,
  body.pearl-app-shell .shopping-branch-player .grid.grid-cols-1.lg\:grid-cols-3 > div:first-child {
    grid-column: auto !important;
  }

  body.pearl-app-shell .shopping-branch-player .grid.grid-cols-1.lg\:grid-cols-3 {
    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(20rem, 0.85fr) !important;
    gap: 0.9rem !important;
  }

  body.pearl-app-shell .shopping-branch-player .grid.grid-cols-1.lg\:grid-cols-3 > div:last-child {
    min-width: 0;
    min-height: 0;
  }

  body.pearl-app-shell .shopping-player-layout > div,
  body.pearl-app-shell .shopping-now-card,
  body.pearl-app-shell .shopping-player-side {
    min-width: 0;
    min-height: 0;
  }

  body.pearl-app-shell .shopping-now-card {
    display: flex;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    background: var(--player-panel) !important;
    border-color: var(--player-border) !important;
    box-shadow: var(--player-shadow) !important;
  }

  body.pearl-app-shell .shopping-now-card [data-slot="card-header"] {
    padding: 0.72rem 0.9rem !important;
  }

  body.pearl-app-shell .shopping-now-card [data-slot="card-content"] {
    display: grid !important;
    flex: 1;
    grid-template-columns: minmax(15rem, 0.92fr) minmax(18rem, 1.08fr);
    grid-auto-rows: min-content;
    align-content: center;
    align-items: center;
    gap: 0.85rem 1.15rem !important;
    min-height: 0;
    padding: 0.9rem !important;
  }

  body.pearl-app-shell .shopping-now-card [data-slot="card-content"] > * {
    min-width: 0;
    margin-top: 0 !important;
  }

  body.pearl-app-shell .shopping-now-card [data-slot="card-content"] > :not(.shopping-player-artwork) {
    grid-column: 2;
  }

  body.pearl-app-shell .shopping-now-card .shopping-player-artwork {
    grid-column: 1;
    grid-row: 1 / span 8;
    width: min(100%, 25rem) !important;
    max-width: 25rem !important;
    max-height: min(58dvh, 25rem);
    aspect-ratio: 1;
    object-fit: contain !important;
    border-radius: 0.8rem !important;
  }

  body.pearl-app-shell .shopping-now-card [data-shopping-track-title] {
    display: -webkit-box;
    overflow: hidden;
    margin-bottom: 0.25rem !important;
    color: var(--player-text) !important;
    -webkit-text-fill-color: var(--player-text) !important;
    font-size: clamp(1.05rem, 1.45vw, 1.45rem) !important;
    line-height: 1.18 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body.pearl-app-shell .shopping-now-card [data-shopping-track-title] + p,
  body.pearl-app-shell .shopping-now-card .text-gray-600 {
    color: var(--player-muted) !important;
    -webkit-text-fill-color: var(--player-muted) !important;
  }

  body.pearl-app-shell .shopping-now-card .shopping-manual-skip {
    display: none !important;
  }

  body.pearl-app-shell .shopping-now-card .size-16 {
    width: 3.4rem !important;
    height: 3.4rem !important;
  }

  body.pearl-app-shell .shopping-player-side {
    display: grid !important;
    height: 100%;
    grid-template-rows: minmax(13rem, 0.9fr) minmax(14rem, 1.1fr);
    gap: 0.9rem;
    overflow: hidden;
  }

  body.pearl-app-shell .shopping-player-side > [data-slot="card"] {
    display: flex;
    min-height: 0;
    flex-direction: column;
    margin-top: 0 !important;
    overflow: hidden;
    background: var(--player-panel) !important;
    border-color: var(--player-border) !important;
    box-shadow: var(--player-shadow) !important;
  }

  body.pearl-app-shell .shopping-player-side [data-slot="card-header"] {
    flex: none;
    padding: 0.72rem 0.85rem !important;
  }

  body.pearl-app-shell .shopping-player-side [data-slot="card-content"] {
    min-height: 0;
    padding: 0.75rem !important;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  body.pearl-app-shell .shopping-player-side .shopping-playlist-tile {
    min-height: 3.5rem;
    padding: 0.55rem !important;
    color: var(--player-text) !important;
    background: var(--player-panel-soft) !important;
    border: 1px solid var(--player-border) !important;
  }

  body.pearl-app-shell .shopping-player-side .shopping-playlist-tile.bg-gradient-to-r {
    color: #ffffff !important;
    background: linear-gradient(105deg, #06a9d1 0%, #087fc8 50%, #155eef 100%) !important;
    border-color: transparent !important;
  }

  body.pearl-app-shell .shopping-player-side .shopping-playlist-tile h4,
  body.pearl-app-shell .shopping-player-side .shopping-playlist-tile p {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
  }

  body.pearl-app-shell .shopping-queue-card [data-slot="card-content"] > .space-y-2 {
    max-height: none !important;
    overflow: visible !important;
  }

  body.pearl-app-shell .shopping-queue-card .bg-gray-50,
  body.pearl-app-shell .shopping-queue-card .bg-cyan-50,
  body.pearl-app-shell .shopping-queue-card .bg-blue-50,
  body.pearl-app-shell .shopping-queue-card .bg-amber-50 {
    color: var(--player-text) !important;
    background: var(--player-panel-soft) !important;
    border-color: var(--player-border) !important;
  }

  body.pearl-app-shell .shopping-queue-card .bg-cyan-50 {
    background: var(--player-panel-active) !important;
    border-color: var(--player-accent) !important;
  }

  body.pearl-app-shell .shopping-queue-card :is(h5, p, span) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
  }

  body.pearl-app-shell .shopping-tone-control {
    width: 100%;
    color: var(--player-text) !important;
    background: var(--player-panel-soft) !important;
    border-color: var(--player-border) !important;
  }

  body.pearl-app-shell .shopping-tone-control > span {
    color: var(--player-text) !important;
    -webkit-text-fill-color: var(--player-text) !important;
  }

  body.pearl-app-shell .shopping-tone-control select,
  body.pearl-app-shell .shopping-tone-control option {
    color: var(--player-text) !important;
    -webkit-text-fill-color: var(--player-text) !important;
    background: var(--player-panel) !important;
    border-color: var(--player-border) !important;
    color-scheme: light;
  }

  html[data-shopping-theme="dark"] body.pearl-app-shell .shopping-tone-control select,
  html[data-shopping-theme="dark"] body.pearl-app-shell .shopping-tone-control option {
    color-scheme: dark;
  }

  body.pearl-app-shell .shopping-radio-footer {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0.45rem 1rem 0.6rem !important;
    color: var(--player-muted) !important;
    background: var(--player-bg) !important;
    border: 0 !important;
    font-size: 0.68rem !important;
  }
}

/* Login registration: keep Radix Select and payment details readable in the
 * resolved dark theme. These controls live outside dashboard main/dialogs. */
body.pearl-app-shell.shopping-theme-is-dark
  .shopping-login-page
  #shopping-radio-register
  [role="combobox"] {
  width: 100% !important;
  min-height: 2.65rem !important;
  color: #eef7fb !important;
  -webkit-text-fill-color: #eef7fb !important;
  border-color: #486272 !important;
  background: #0f1c25 !important;
  box-shadow: none !important;
  color-scheme: dark !important;
}

body.pearl-app-shell.shopping-theme-is-dark
  .shopping-login-page
  #shopping-radio-register
  [role="combobox"] :is(span, svg) {
  color: #dceaf1 !important;
  -webkit-text-fill-color: #dceaf1 !important;
  opacity: 1 !important;
}

body.pearl-app-shell.shopping-theme-is-dark [data-radix-popper-content-wrapper] {
  z-index: 100000 !important;
}

body.pearl-app-shell.shopping-theme-is-dark :is(
  [data-radix-select-content],
  [data-radix-popper-content-wrapper] [role="listbox"],
  [role="listbox"]
) {
  max-height: min(18rem, 55vh) !important;
  overflow-y: auto !important;
  color: #edf6fa !important;
  border: 1px solid #486272 !important;
  background: #101c24 !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.48) !important;
  color-scheme: dark !important;
}

body.pearl-app-shell.shopping-theme-is-dark :is([role="option"], [data-slot="select-item"]) {
  color: #e7f1f6 !important;
  -webkit-text-fill-color: #e7f1f6 !important;
  background: #101c24 !important;
}

body.pearl-app-shell.shopping-theme-is-dark
  :is([role="option"], [data-slot="select-item"]):is(:hover, :focus, [data-highlighted]) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #17435a !important;
}

body.pearl-app-shell.shopping-theme-is-dark
  .shopping-login-page
  #shopping-radio-register + .mt-6 {
  border-color: #314956 !important;
}

body.pearl-app-shell.shopping-theme-is-dark
  .shopping-login-page
  #shopping-radio-register + .mt-6 > p {
  color: #b9cbd5 !important;
  -webkit-text-fill-color: #b9cbd5 !important;
}

body.pearl-app-shell.shopping-theme-is-dark
  .shopping-login-page
  #shopping-radio-register + .mt-6 > div {
  color: #eaf3f7 !important;
  border-color: #3f5b69 !important;
  background: #12222c !important;
  background-image: none !important;
}

body.pearl-app-shell.shopping-theme-is-dark
  .shopping-login-page
  #shopping-radio-register + .mt-6 > div > div {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 0.75rem !important;
  align-items: start !important;
}

body.pearl-app-shell.shopping-theme-is-dark
  .shopping-login-page
  #shopping-radio-register + .mt-6 span {
  color: #dce9ef !important;
  -webkit-text-fill-color: #dce9ef !important;
}

body.pearl-app-shell.shopping-theme-is-dark
  .shopping-login-page
  #shopping-radio-register + .mt-6 span:last-child {
  min-width: 0 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-align: right !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 1023px) {
  body.pearl-app-shell .shopping-player-layout,
  body.pearl-app-shell .shopping-player-side {
    display: grid !important;
    height: auto !important;
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    overflow: visible !important;
  }

  body.pearl-app-shell .shopping-now-card [data-slot="card-content"] {
    display: block !important;
  }

  body.pearl-app-shell .shopping-now-card [data-slot="card-content"] > * + * {
    margin-top: 1rem !important;
  }

  body.pearl-app-shell .shopping-player-side > [data-slot="card"] + [data-slot="card"] {
    margin-top: 0.8rem !important;
  }

  body.pearl-app-shell .shopping-branch-profile-trigger {
    min-width: 2.75rem;
    height: 2.5rem;
  }

  body.pearl-app-shell .shopping-branch-profile-avatar {
    width: 1.8rem;
    height: 1.8rem;
  }
}

@media (max-width: 767px) {
  body.pearl-app-shell .shopping-branch-profile {
    display: none !important;
  }
}

@media (prefers-color-scheme: dark) {
  html:not([data-shopping-theme="light"]) body.pearl-app-shell .shopping-branch-player {
    --player-bg: #09131b;
    --player-panel: #111f29;
    --player-panel-soft: #172833;
    --player-panel-active: #123544;
    --player-border: #304653;
    --player-text: #f3f9fc;
    --player-muted: #a9bac5;
    --player-accent: #38c8f4;
    --player-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  }

  html:not([data-shopping-theme="light"]) body.pearl-app-shell .shopping-tone-control select,
  html:not([data-shopping-theme="light"]) body.pearl-app-shell .shopping-tone-control option {
    color-scheme: dark;
  }
}