/* EmpireConnections approved visual direction — September 2026.
   This is the final presentation authority for the representative workspace,
   Campaign Command Center, and Playlist Studio. It follows the two approved
   focused-workspace concepts: pale-blue canvas, white work surfaces, compact
   vertical navigation, electric-blue actions, green readiness, and restrained
   red/gold operational accents. */

body.empire-focused-advisor {
  --approved-page: #f3f6fb;
  --approved-surface: #ffffff;
  --approved-module: #f7f9fc;
  --approved-soft: #eef3fb;
  --approved-blue-soft: #eaf2ff;
  --approved-ink: #13213d;
  --approved-muted: #66738b;
  --approved-line: #d9e1ee;
  --approved-blue: #1261e8;
  --approved-blue-strong: #084ec6;
  --approved-navy: #10284a;
  --approved-green: #137b4a;
  --approved-green-soft: #e5f7ed;
  --approved-red: #bb3243;
  --approved-red-soft: #fff0f2;
  --approved-gold: #a66a00;
  --approved-shadow: 0 18px 42px rgba(18, 38, 74, .12);
  background: var(--approved-page) !important;
}

/* Page-title hierarchy: H1 is Empire navy; section-level H2 is charcoal.
   The global dark header and custom playlist banners keep their own contrast. */
:is(.content-heading h1, #workspace-title),
body #workspace > .content-heading #workspace-title {
  color: #10233d !important;
}

body :is(.panel h2, .content-heading h2, .ecs-head h2) {
  color: #343b46 !important;
}

/* The approved concept uses a light application bar, not a dark banner. */
body.empire-focused-advisor .topbar.empireos-unified-header,
body:has(#admin-panel:not([hidden])) .topbar.empireos-unified-header {
  display: grid !important;
  grid-template-columns: minmax(190px, auto) minmax(240px, 1fr) auto !important;
  align-items: center !important;
  gap: 16px !important;
  min-height: 66px !important;
  padding: 10px 18px !important;
  border-bottom: 1px solid var(--approved-line) !important;
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: 0 7px 24px rgba(18, 38, 74, .08) !important;
}

body.empire-focused-advisor .topbar #workspace-brand-logo,
body:has(#admin-panel:not([hidden])) .topbar #workspace-brand-logo {
  height: 38px !important;
  max-width: 235px !important;
  filter: brightness(0) saturate(100%) invert(13%) sepia(24%) saturate(1518%) hue-rotate(179deg) brightness(91%) contrast(96%);
}

body.empire-focused-advisor .topbar .top-actions,
body:has(#admin-panel:not([hidden])) .topbar .top-actions {
  gap: 8px !important;
}

body.empire-focused-advisor .topbar :is(#system-health, #customer-data-custody),
body:has(#admin-panel:not([hidden])) .topbar :is(#system-health, #customer-data-custody) {
  border-color: #b9dfcb !important;
  background: var(--approved-green-soft) !important;
  color: var(--approved-green) !important;
}

body.empire-focused-advisor .topbar :is(.text-button, .dual-view-admin),
body:has(#admin-panel:not([hidden])) .topbar :is(.text-button, .dual-view-admin) {
  border-color: var(--approved-line) !important;
  background: transparent !important;
  color: #42536d !important;
}

body.empire-focused-advisor .topbar .dual-view-admin,
body:has(#admin-panel:not([hidden])) .topbar .dual-view-admin {
  border: 1px solid #b8cff0 !important;
  border-radius: 9px !important;
  background: var(--approved-blue-soft) !important;
  color: var(--approved-blue-strong) !important;
}

.empire-focused-global-search {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  max-width: 620px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--approved-line);
  border-radius: 10px;
  background: var(--approved-page);
  color: var(--approved-muted);
}

.empire-focused-global-search .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body.empire-focused-advisor .topbar #empireos-header-refresh,
body:has(#admin-panel:not([hidden])) .topbar #empireos-header-refresh {
  border-color: #c9d9ed !important;
  background: var(--approved-blue-soft) !important;
  color: var(--approved-blue) !important;
}

body:has(#admin-panel:not([hidden])) .topbar .empireos-header-copy h1 {
  color: #10233d !important;
}

body:has(#admin-panel:not([hidden])) .topbar .empireos-header-copy p {
  color: #66758a !important;
}

/* Retire the remaining dark legacy heading surfaces in the admin workspace so
   every H2 can consistently use charcoal without losing contrast. */
body:has(#admin-panel:not([hidden])) #admin-panel :is(
  .empire-vendor-hero,
  .empire-vendor-results-head,
  .empire-phone-v4-hero,
  .empire-dialer-overview,
  .empire-calling-window
) {
  border: 1px solid #d7e0ea !important;
  border-radius: 13px !important;
  background: #f1f4f8 !important;
  box-shadow: 0 9px 24px rgba(18, 38, 74, .07) !important;
}

body:has(#admin-panel:not([hidden])) #admin-panel .empire-vendor-results-head {
  padding: 14px 16px !important;
}

body:has(#admin-panel:not([hidden])) #admin-panel :is(
  .empire-vendor-hero,
  .empire-vendor-results-head,
  .empire-phone-v4-hero,
  .empire-dialer-overview,
  .empire-calling-window
) h2 {
  color: #343b46 !important;
}

body:has(#admin-panel:not([hidden])) #admin-panel :is(
  .empire-vendor-hero,
  .empire-phone-v4-hero,
  .empire-dialer-overview,
  .empire-calling-window
) p {
  color: #66758a !important;
}

.empire-focused-global-search input {
  width: 100%;
  min-width: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--approved-ink) !important;
}

body.empire-focused-advisor #workspace.content {
  padding: 14px !important;
}

/* The live workspace is one app frame, matching the approved full-screen mockup. */
body.empire-focused-advisor #advisor-panel#advisor-panel #empire-mode-workspace-root {
  position: relative !important;
  min-height: 610px !important;
  padding: 0 0 0 78px !important;
  overflow: hidden !important;
  border: 1px solid var(--approved-line) !important;
  border-radius: 16px !important;
  background: var(--approved-page) !important;
  box-shadow: var(--approved-shadow) !important;
}

body.empire-focused-advisor #empire-focused-context {
  min-height: 74px !important;
  padding: 12px 18px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--approved-line) !important;
  border-radius: 0 !important;
  background: var(--approved-surface) !important;
}

.empire-focused-person-mark {
  background: var(--approved-blue-soft) !important;
  color: var(--approved-blue) !important;
}

.empire-focused-navigation {
  position: absolute !important;
  z-index: 15 !important;
  inset: 0 auto 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  width: 78px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 14px 8px !important;
  border: 0 !important;
  border-right: 1px solid var(--approved-line) !important;
  border-radius: 0 !important;
  background: var(--approved-surface) !important;
  box-shadow: none !important;
}

.empire-focused-primary-nav,
.empire-focused-utility-nav {
  display: flex !important;
  width: 100% !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.empire-focused-utility-nav {
  margin-top: auto !important;
}

.empire-focused-navigation button,
.empire-focused-navigation summary {
  display: flex !important;
  width: 60px !important;
  min-height: 56px !important;
  padding: 7px 4px !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 3px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: var(--approved-muted) !important;
  line-height: 1 !important;
}

.empire-focused-navigation button > span,
.empire-focused-navigation summary > span {
  font-size: 17px;
}

.empire-focused-navigation button > small,
.empire-focused-navigation summary > small {
  color: inherit !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

.empire-focused-navigation button:hover,
.empire-focused-navigation summary:hover,
.empire-focused-navigation button.is-active,
.empire-focused-navigation button[aria-pressed="true"] {
  background: var(--approved-blue-soft) !important;
  color: var(--approved-blue) !important;
}

.empire-focused-more-menu {
  top: auto !important;
  right: auto !important;
  bottom: 0 !important;
  left: calc(100% + 9px) !important;
  width: 226px !important;
  padding: 7px !important;
  border: 1px solid var(--approved-line) !important;
  background: var(--approved-surface) !important;
  box-shadow: var(--approved-shadow) !important;
}

.empire-focused-more-menu button {
  width: 100% !important;
  min-height: 40px !important;
  padding: 8px 11px !important;
  align-items: flex-start !important;
  text-align: left !important;
}

.empire-focused-tabs {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 49px;
  padding: 0 18px;
  overflow-x: auto;
  border-bottom: 1px solid var(--approved-line);
  background: var(--approved-surface);
}

.empire-focused-tabs button {
  min-height: 49px;
  padding: 0 1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--approved-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.empire-focused-tabs button:hover,
.empire-focused-tabs button.is-active,
.empire-focused-tabs button[aria-pressed="true"] {
  border-bottom-color: var(--approved-blue);
  color: var(--approved-blue);
}

body.empire-focused-advisor #advisor-panel#advisor-panel #empire-mode-workspace-root > :is(.empire-mode-kpis, .empire-mode-grid, .empire-mode-lower, .empire-mode-tools-lower) {
  margin: 0 !important;
  padding: 14px !important;
}

body.empire-focused-advisor #advisor-panel#advisor-panel #empire-mode-workspace-root > .empire-mode-grid {
  min-height: 0 !important;
  height: auto !important;
  align-content: start !important;
  background: var(--approved-page) !important;
}

body.empire-focused-advisor[data-empire-focus-view="work"][data-empire-call-phase="ready"] #empire-mode-workspace-root > .empire-mode-grid {
  grid-template-rows: minmax(280px, 1fr) auto !important;
}

body.empire-focused-advisor #advisor-panel#advisor-panel #empire-mode-workspace-root > .empire-mode-grid > .empire-mode-phone {
  grid-row: 2 !important;
}

.empire-focused-ready {
  min-height: 280px !important;
  padding: clamp(24px, 4vw, 46px) !important;
  border: 1px solid #cddbf0 !important;
  border-left: 5px solid var(--approved-blue) !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, #ffffff 0%, #f7faff 64%, #edf4ff 100%) !important;
  box-shadow: 0 12px 30px rgba(18, 38, 74, .08) !important;
}

.empire-focused-ready-copy h2 {
  font-size: clamp(24px, 2.4vw, 34px) !important;
  letter-spacing: -.035em !important;
}

.empire-focused-ready-actions .primary:not(:disabled) {
  background: var(--approved-blue) !important;
}

.empire-focused-ready-actions .manual {
  border-color: #b9dfcb !important;
  background: var(--approved-green-soft) !important;
  color: var(--approved-green) !important;
}

body.empire-focused-advisor #advisor-panel#advisor-panel #empire-mode-workspace-root :is(.panel, #call-history, #advisor-messages, #mason-ai) {
  border-color: var(--approved-line) !important;
  border-radius: 13px !important;
  background: var(--approved-module) !important;
  color: var(--approved-ink) !important;
  box-shadow: 0 10px 28px rgba(18, 38, 74, .08) !important;
}

body.empire-focused-advisor #campaign-workspace > .panel,
body.empire-focused-advisor #customer-card,
body.empire-focused-advisor #disposition-center {
  border-top: 4px solid #2d6cb5 !important;
}

body.empire-focused-advisor .script-panel .script-copy,
body.empire-focused-advisor #campaign-workspace :is(.package-content, .tenant-resource-card),
body.empire-focused-advisor #customer-card .empire-customer-field {
  border: 1px solid #d9e5f6 !important;
  background: var(--approved-blue-soft) !important;
}

/* The call controls are a compact footer, not a second full workspace. */
body.empire-focused-advisor #advisor-panel#advisor-panel #empire-mode-workspace-root > .empire-mode-grid > .empire-mode-phone,
body.empire-focused-advisor #advisor-panel#advisor-panel #empire-mode-workspace-root .empire-mode-phone > .phone-panel {
  border-color: var(--approved-line) !important;
  background: var(--approved-surface) !important;
  box-shadow: none !important;
}

body.empire-focused-advisor #empire-mode-workspace-root .empire-mode-phone .phone-panel {
  display: grid !important;
  grid-template-columns: minmax(240px, .72fr) minmax(500px, 1.28fr) !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 11px 14px !important;
}

body.empire-focused-advisor #empire-mode-workspace-root .empire-mode-phone .phone-panel > .panel-heading {
  margin: 0 !important;
}

body.empire-focused-advisor #empire-mode-workspace-root .empire-mode-phone .phone-panel-heading-actions {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
}

body.empire-focused-advisor #empire-mode-workspace-root .empire-mode-phone #phone-campaign-command {
  flex: 1 1 auto !important;
  width: auto !important;
}

body.empire-focused-advisor #empire-mode-workspace-root .empire-mode-phone .phone-action-stack > button {
  border-color: var(--approved-line) !important;
  background: var(--approved-page) !important;
  color: var(--approved-ink) !important;
  text-shadow: none !important;
}

body.empire-focused-advisor #empire-mode-workspace-root .empire-mode-phone .phone-action-stack > #call-button:not(:disabled) {
  border-color: var(--approved-blue) !important;
  background: var(--approved-blue) !important;
  color: #ffffff !important;
}

body.empire-focused-advisor #empire-mode-workspace-root .empire-mode-phone .phone-action-stack > #hangup-button:not(:disabled) {
  border-color: #ecc4ca !important;
  background: var(--approved-red-soft) !important;
  color: var(--approved-red) !important;
}

/* Campaign Command Center — same approved surfaces with deliberate hierarchy. */
.ecs-overlay {
  padding: 18px !important;
  background: rgba(16, 40, 74, .48) !important;
  backdrop-filter: blur(5px) !important;
}

.ecs-drawer {
  position: relative !important;
  inset: auto !important;
  width: min(1500px, 100%) !important;
  height: 100% !important;
  margin-left: auto !important;
  padding: clamp(22px, 3vw, 38px) !important;
  border: 1px solid #cdd9e8 !important;
  border-radius: 16px !important;
  background: #f3f6fb !important;
  color: #13213d !important;
  box-shadow: 0 24px 80px rgba(4, 17, 36, .28) !important;
  animation: none !important;
}

.ecs-head {
  min-height: 78px !important;
  padding: 0 0 18px 17px !important;
  border-bottom: 1px solid #d8e1ee !important;
  border-left: 5px solid #1261e8 !important;
}

.ecs-head span,
.ecs-builder > * > span,
.ecs-sources header span,
.ecs-yesterday-card > span {
  color: #2865aa !important;
}

.ecs-yesterday-card,
.ecs-spiff,
.ecs-builder > section,
.ecs-builder > aside {
  border: 1px solid #d8e1ee !important;
  border-radius: 13px !important;
  background: #f7f9fc !important;
  color: #13213d !important;
  box-shadow: 0 10px 28px rgba(18, 38, 74, .07) !important;
}

.ecs-yesterday-card {
  border-left: 5px solid #2d6cb5 !important;
}

.ecs-spiff {
  border-top: 4px solid #d5aa3d !important;
  background: linear-gradient(145deg, #ffffff 0%, #fffaf0 100%) !important;
}

.ecs-spiff header span {
  color: #946100 !important;
}

.ecs-progress em {
  background: linear-gradient(90deg, #1261e8, #4d91f2) !important;
}

.ecs-spiff .ecs-progress em {
  background: linear-gradient(90deg, #bd7d08, #efc45e) !important;
}

/* Solid performance cards, matching the confidence of the active Call Mode. */
.ecs-yesterday-card {
  border-color: #285b8c !important;
  background: #173b61 !important;
  background-image: none !important;
  box-shadow: 0 12px 28px rgba(23, 59, 97, .24) !important;
}

#ecs-spiffs > .ecs-spiff:nth-child(1) {
  border-color: #1d7655 !important;
  background: #145a3f !important;
  background-image: none !important;
  box-shadow: 0 12px 28px rgba(20, 90, 63, .24) !important;
}

#ecs-spiffs > .ecs-spiff:nth-child(2) {
  border-color: #4b5665 !important;
  background: #343d49 !important;
  background-image: none !important;
  box-shadow: 0 12px 28px rgba(35, 43, 54, .24) !important;
}

.ecs-yesterday-card::before,
.ecs-spiff::before {
  display: none !important;
}

.ecs-yesterday-card :is(h3, strong, small),
.ecs-spiff :is(header strong, .ecs-progress small, .ecs-progress b) {
  color: #ffffff !important;
}

.ecs-yesterday-card > span {
  color: #b9dcff !important;
}

.ecs-progress b i {
  color: rgba(255, 255, 255, .66) !important;
}

.ecs-progress > span {
  background: rgba(255, 255, 255, .20) !important;
}

#ecs-spiffs > .ecs-spiff:nth-child(1) header span {
  color: #b9f0d5 !important;
}

#ecs-spiffs > .ecs-spiff:nth-child(1) .ecs-progress em {
  background: #79dfac !important;
}

#ecs-spiffs > .ecs-spiff:nth-child(2) header span {
  color: #f2d17d !important;
}

#ecs-spiffs > .ecs-spiff:nth-child(2) .ecs-progress em {
  background: #e7ba4f !important;
}

.ecs-builder > section:first-child {
  border-top: 4px solid #2d6cb5 !important;
}

.ecs-mode-buttons button {
  border-color: #cedae8 !important;
  background: #f7f9fc !important;
  color: #42536d !important;
}

.ecs-mode-buttons button.active {
  border-color: #1261e8 !important;
  background: linear-gradient(145deg, #1261e8, #0b4ea9) !important;
  color: #ffffff !important;
  box-shadow: 0 9px 20px rgba(18, 97, 232, .23) !important;
}

.ecs-mode-buttons button.active small {
  color: #dceaff !important;
}

#ecs-summary {
  border: 1px solid #153b68 !important;
  background: linear-gradient(145deg, #173f6d, #102c50) !important;
  box-shadow: 0 10px 24px rgba(16, 44, 80, .18) !important;
}

#ecs-summary :is(strong, span) {
  color: #ffffff !important;
}

#ecs-summary .ready { color: #7be1ad !important; }
#ecs-summary .blocked { color: #ffc1ca !important; }

.ecs-manual-option {
  border-color: #b6dfca !important;
  background: #e8f7ef !important;
}

.ecs-manual-option button,
.ecs-incoming button {
  border-color: #137b4a !important;
  background: #16865f !important;
  color: #ffffff !important;
}

.ecs-sources {
  border-top: 4px solid #1261e8 !important;
}

.ecs-source {
  border-color: #d5dfeb !important;
  background: #f9fbfe !important;
}

.ecs-source.selected {
  border-color: #1261e8 !important;
  background: #eaf2ff !important;
  box-shadow: inset 4px 0 0 #1261e8 !important;
}

.ecs-incoming {
  border-top: 4px solid #16865f !important;
  background: linear-gradient(145deg, #ffffff, #f0faf5) !important;
}

/* Playlist Studio carries the same clear blue/green score hierarchy. */
.campaign-health-monitor,
.live-playlist-card {
  border-color: #d2deeb !important;
  border-radius: 13px !important;
  background: #f7f9fc !important;
  box-shadow: 0 10px 28px rgba(18, 38, 74, .07) !important;
}

/* Keep the studio heading quiet; the actual collapsible playlist rows carry
   the selected banner color. */
#live-playlists > .section-title {
  align-items: center !important;
  padding: 18px 20px !important;
  border: 1px solid #d8e1eb !important;
  border-radius: 13px !important;
  background: #f7f9fc !important;
  box-shadow: 0 9px 24px rgba(18, 38, 74, .07) !important;
}

#live-playlists > .section-title .eyebrow {
  color: #245f9f !important;
}

#live-playlists > .section-title h2 {
  color: #343b46 !important;
}

#live-playlists > .section-title p {
  color: #66758a !important;
}

#live-playlists > .section-title .status {
  border-color: #c8d8e8 !important;
  background: #ffffff !important;
  color: #245f9f !important;
  box-shadow: none !important;
}

/* Lead acquisition economics is its own administrator workspace, not part of Playlist Studio. */
#admin-panel > .lead-vendors-roi-workspace {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 28px;
  padding-top: 28px;
  border-top: 2px solid rgba(16, 35, 61, .14);
  scroll-margin-top: 24px;
}

#lead-vendors-roi > .empire-vendor-library {
  width: 100%;
  margin: 0;
}

/* The expanded management menu uses one solid Empire navy field so its white
   labels and electric-green icons keep consistent contrast at every height. */
.app-layout > .sidebar {
  border-right-color: #2f6da8 !important;
  background: #10233d !important;
  box-shadow: 12px 0 34px rgba(4, 18, 36, .28) !important;
  color: #ffffff !important;
}

.app-layout > .sidebar :is(.sidebar-title, .nav-section) {
  color: #cbd7e5 !important;
}

.app-layout > .sidebar .nav-item:is(:hover, :focus-visible, .active) {
  background: #1c5f9e !important;
}

/* ROI keeps its charcoal shell, while the working modules use a warm off-white
   surface so economics, forms, and scorecards remain easy to scan. */
body:has(#admin-panel:not([hidden])) #lead-vendors-roi .empire-vendor-body {
  background: #e9edf2 !important;
  color: #343b46 !important;
}

body:has(#admin-panel:not([hidden])) #lead-vendors-roi :is(
  .empire-vendor-hero,
  .empire-vendor-summary-grid article,
  .empire-vendor-control,
  .empire-vendor-card,
  .empire-vendor-metrics article,
  .empire-vendor-roi-card,
  .empire-vendor-table-wrap,
  .empire-vendor-empty
) {
  border-color: #d8d2c6 !important;
  background: #f7f4ed !important;
  box-shadow: 0 7px 20px rgba(18, 38, 74, .07) !important;
}

body:has(#admin-panel:not([hidden])) #lead-vendors-roi :is(
  .empire-vendor-hero h2,
  .empire-vendor-control h3,
  .empire-vendor-card-head h3,
  .empire-vendor-summary-grid strong,
  .empire-vendor-metrics strong,
  .empire-vendor-empty strong,
  .empire-vendor-table td strong
) {
  color: #10233d !important;
}

body:has(#admin-panel:not([hidden])) #lead-vendors-roi :is(
  .empire-vendor-hero p,
  .empire-vendor-status,
  .empire-vendor-card-head p,
  .empire-vendor-summary-grid small,
  .empire-vendor-metrics small,
  .empire-vendor-range span,
  .empire-vendor-table td,
  .empire-vendor-table td small,
  .empire-vendor-notes,
  .empire-vendor-empty span
) {
  color: #5f6d7d !important;
}

body:has(#admin-panel:not([hidden])) #lead-vendors-roi :is(
  .empire-vendor-label,
  .empire-vendor-hero span,
  .empire-vendor-control legend,
  .empire-vendor-table th,
  .empire-vendor-card-badge,
  .empire-vendor-roi-card strong
) {
  color: #167554 !important;
}

body:has(#admin-panel:not([hidden])) #lead-vendors-roi .empire-vendor-table th {
  background: #ece8df !important;
}

body:has(#admin-panel:not([hidden])) #lead-vendors-roi .empire-vendor-table td {
  border-bottom-color: #ddd8ce !important;
  background: #fbf9f4 !important;
}

body:has(#admin-panel:not([hidden])) #lead-vendors-roi :is(input, select, textarea) {
  border-color: #cbd3dc !important;
  background: #ffffff !important;
  color: #24364d !important;
}

/* Labor Day, Free Bali, and every other collapsible playlist use this banner.
   The custom properties are set from the playlist's saved hex color. */
.playlist-studio-card .campaign-admin-card-heading {
  border-color: var(--playlist-banner-chrome-border, rgba(255, 255, 255, .42)) !important;
  background: linear-gradient(145deg,
    var(--playlist-banner-start, #3a89c9) 0%,
    var(--playlist-banner-color, #176fb8) 48%,
    var(--playlist-banner-end, #0d416b) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13) !important;
}

.playlist-studio-card .campaign-admin-card-heading :is(strong, span, small, b) {
  color: var(--playlist-banner-ink, #ffffff) !important;
}

.playlist-studio-card .campaign-admin-card-heading .playlist-card-heading-copy span {
  color: var(--playlist-banner-muted, rgba(239, 247, 255, .82)) !important;
}

.playlist-studio-card .campaign-admin-card-heading::after {
  border-color: var(--playlist-banner-chrome-border, rgba(255, 255, 255, .42)) !important;
  background: var(--playlist-banner-chrome, rgba(255, 255, 255, .17)) !important;
  color: var(--playlist-banner-ink, #ffffff) !important;
}

.playlist-studio-card[open] .campaign-admin-card-heading {
  border-bottom-color: var(--playlist-banner-chrome-border, rgba(255, 255, 255, .42)) !important;
}

.playlist-banner-color-label {
  align-content: start;
}

.playlist-color-control {
  display: grid;
  grid-template-columns: 46px minmax(112px, 1fr);
  gap: 9px;
  align-items: center;
}

.playlist-studio-panel .playlist-color-control input[type="color"] {
  width: 46px !important;
  height: 42px;
  padding: 3px !important;
  overflow: hidden;
  border: 1px solid #b8c7d8 !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  cursor: pointer;
}

.playlist-color-control input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.playlist-color-control input[type="color"]::-webkit-color-swatch {
  border: 0;
  border-radius: 50%;
}

.playlist-color-control input[type="color"]::-moz-color-swatch {
  border: 0;
  border-radius: 50%;
}

.playlist-banner-color-label > small {
  color: #728096 !important;
  font-size: 10px;
  font-weight: 600;
}

.playlist-color-control input[type="text"]:invalid {
  border-color: #ba4f5f !important;
  box-shadow: 0 0 0 3px rgba(186, 79, 95, .12) !important;
}

.playlist-builder-step:first-child {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.campaign-health-monitor {
  border-top: 4px solid #1261e8 !important;
}

.live-playlist-card[open] {
  border-left: 5px solid #1261e8 !important;
}

.live-playlist-health > span,
.campaign-health-status {
  border-color: #b7dfca !important;
  background: #e8f7ef !important;
  color: #137b4a !important;
}

.live-playlist-health strong,
.campaign-health-status strong {
  color: #0f6d41 !important;
}

@media (max-width: 1100px) {
  body.empire-focused-advisor .topbar.empireos-unified-header {
    grid-template-columns: auto minmax(180px, 1fr) auto !important;
  }

  body.empire-focused-advisor .topbar .top-actions :is([data-travel-empire-only]:not(.dual-view-admin), #customer-data-custody) {
    display: none !important;
  }

  body.empire-focused-advisor #empire-mode-workspace-root .empire-mode-phone .phone-panel {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .playlist-builder-step:first-child {
    grid-template-columns: 1fr;
  }

  body.empire-focused-advisor .topbar.empireos-unified-header {
    grid-template-columns: minmax(150px, 1fr) auto !important;
  }

  .empire-focused-global-search {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: none;
  }

  body.empire-focused-advisor #advisor-panel#advisor-panel #empire-mode-workspace-root {
    min-height: 0 !important;
    padding-left: 0 !important;
  }

  .empire-focused-navigation {
    position: static !important;
    display: flex !important;
    width: 100% !important;
    min-height: 64px !important;
    padding: 7px !important;
    flex-direction: row !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--approved-line) !important;
  }

  .empire-focused-primary-nav,
  .empire-focused-utility-nav {
    width: auto !important;
    flex: 1 1 auto !important;
    flex-direction: row !important;
  }

  .empire-focused-utility-nav { margin-top: 0 !important; }

  .empire-focused-navigation button,
  .empire-focused-navigation summary {
    width: auto !important;
    min-width: 52px !important;
    min-height: 48px !important;
    flex: 1 1 auto !important;
  }

  .empire-focused-more-menu {
    inset: calc(100% + 7px) 0 auto auto !important;
  }

  .empire-focused-context {
    border-top: 0 !important;
  }

  body.empire-focused-advisor #empire-mode-workspace-root .empire-mode-phone .phone-panel {
    grid-template-columns: 1fr !important;
  }

  .ecs-overlay { padding: 0 !important; }
  .ecs-drawer { border-radius: 0 !important; }
}

@media (max-width: 560px) {
  body.empire-focused-advisor .topbar.empireos-unified-header {
    padding: 8px 10px !important;
  }

  body.empire-focused-advisor .topbar .top-actions .text-button:not(.dual-view-admin),
  body.empire-focused-advisor .topbar #system-health {
    display: none !important;
  }

  .empire-focused-tabs { gap: 16px; padding: 0 13px; }
  .empire-focused-ready { border-left-width: 1px !important; border-top: 5px solid var(--approved-blue) !important; }

  .ecs-head {
    padding-left: 12px !important;
  }
}