.customer-portal {
  --cp-navy: var(--ss-ocean-950);
  --cp-navy-2: var(--ss-ocean-900);
  --cp-navy-3: var(--ss-ocean-850);
  --cp-bg: var(--app-bg);
  --cp-card: var(--card-bg);
  --cp-ink: var(--text-primary);
  --cp-muted: var(--text-secondary);
  --cp-soft: var(--os-accent-pale);
  --cp-accent: var(--os-accent);
  --cp-accent-dark: var(--os-accent-dark);
  --cp-pink: var(--ss-magenta-500, #d957cc);
  --cp-purple: var(--ss-purple-600, #7c3aed);
  --cp-border: var(--border-light);
  --cp-border-strong: var(--border-medium);
  --cp-blue: var(--ss-info);
  --cp-green: var(--ss-success);
  --cp-orange: var(--ss-warning);
  --cp-red: var(--ss-danger);
  --cp-radius: 12px;
  --cp-radius-sm: 8px;
  --cp-shadow: 0 14px 34px rgba(3, 25, 31, 0.08);
  --cp-shadow-soft: 0 5px 18px rgba(3, 25, 31, 0.06);
  margin: 0;
  min-height: 100vh;
  background: var(--cp-bg);
  color: var(--cp-ink);
  font-family: var(--font-main);
}

/* CP dashboard premium surface. Scoped to the overview route to protect other CP tools. */
.cp-dashboard-page {
  --cp-dash-pink: #d946c4;
  --cp-dash-pink-hover: #c737b0;
  --cp-dash-pink-soft: #fdf4fb;
  --cp-dash-lilac-soft: #f7f2ff;
  --cp-dash-neutral: #f8f9fc;
  --cp-dash-surface: #ffffff;
  --cp-dash-heading: #172042;
  --cp-dash-text: #5b6280;
  --cp-dash-muted: #7a819b;
  --cp-dash-border: #e9eaf3;
  --cp-dash-success: #208665;
  --cp-dash-success-soft: #eaf8f2;
  --cp-dash-warning: #b86a21;
  --cp-dash-warning-soft: #fff6e9;
  --cp-dash-danger: #c9475b;
  --cp-dash-danger-soft: #fff0f3;
  --cp-dash-shadow: 0 10px 28px rgba(33, 31, 64, 0.055);
  --cp-dash-shadow-hover: 0 14px 34px rgba(46, 39, 79, 0.085);
  width: min(100%, 1580px);
  margin: 0 auto;
  color: var(--cp-dash-text);
}

.cp-dashboard-page,
.cp-dashboard-page * {
  min-width: 0;
}

.cp-dashboard-page > section {
  margin-top: 20px;
}

.cp-dashboard-page > section:first-child {
  margin-top: 0;
}

.cp-dashboard-page h1,
.cp-dashboard-page h2,
.cp-dashboard-page h3,
.cp-dashboard-page strong {
  color: var(--cp-dash-heading);
}

.cp-dashboard-page .cp-dashboard-v1-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(440px, 0.95fr);
  height: clamp(216px, 14.5vw, 238px);
  min-height: 0;
  padding: 24px clamp(28px, 2.4vw, 38px);
  overflow: hidden;
  border: 1px solid var(--cp-dash-border);
  border-radius: 18px;
  background: linear-gradient(110deg, #ffffff 0%, #fffdfd 54%, #fdf6fb 78%, #f8f1fb 100%);
  box-shadow: 0 8px 24px rgba(33, 31, 64, 0.045);
}

.cp-dashboard-page .cp-dashboard-v1-hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  opacity: 0.62;
  background: linear-gradient(90deg, transparent 48%, rgba(217, 70, 196, 0.018) 72%, rgba(124, 58, 237, 0.025) 100%);
}

.cp-dashboard-page .cp-dashboard-v1-copy {
  align-self: center;
  display: block;
  max-width: 760px;
}

.cp-dashboard-page .cp-hero-eyebrow,
.cp-dashboard-page .cp-section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--cp-dash-pink-hover);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}

.cp-dashboard-page .cp-hero-eyebrow {
  margin-bottom: 9px;
  padding: 0;
}

.cp-dashboard-page .cp-dashboard-v1-copy h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(38px, 2.75vw, 46px);
  line-height: 1.03;
  letter-spacing: 0;
}

.cp-dashboard-page .cp-dashboard-v1-copy > p {
  max-width: 620px;
  margin: 12px 0 0;
  color: var(--cp-dash-text);
  font-size: 14px;
  line-height: 1.52;
}

.cp-dashboard-page .cp-btn,
.cp-dashboard-page .cp-dashboard-section-link {
  min-height: 38px;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.cp-dashboard-page .cp-btn-primary {
  border-color: transparent;
  color: #ffffff;
  background: var(--cp-dash-heading);
  box-shadow: 0 6px 15px rgba(23, 32, 66, 0.16);
}

.cp-dashboard-page .cp-btn-primary:hover {
  color: #ffffff;
  background: #242d50;
  box-shadow: 0 9px 19px rgba(23, 32, 66, 0.2);
  transform: translateY(-1px);
}

.cp-dashboard-page .cp-btn-secondary {
  border-color: var(--cp-dash-border);
  color: var(--cp-dash-heading);
  background: rgba(255, 255, 255, 0.9);
}

.cp-dashboard-page .cp-btn-secondary:hover {
  border-color: rgba(217, 70, 196, 0.32);
  color: var(--cp-dash-pink-hover);
  box-shadow: 0 10px 22px rgba(34, 31, 68, 0.08);
  transform: translateY(-1px);
}

.cp-dashboard-page a:focus-visible,
.cp-dashboard-page button:focus-visible,
.cp-dashboard-page [tabindex="0"]:focus-visible {
  outline: 3px solid rgba(217, 70, 196, 0.28);
  outline-offset: 3px;
}

.cp-dashboard-page .cp-dashboard-v1-visual {
  position: relative;
  align-self: stretch;
  display: grid;
  place-items: center;
  min-height: 0;
  margin: -24px -38px -24px 16px;
  overflow: hidden;
  border-radius: 0 17px 17px 0;
}

.cp-dashboard-page .cp-dashboard-hero-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  opacity: 0.96;
  mix-blend-mode: multiply;
}

.cp-dashboard-page .cp-dashboard-hero-mark {
  position: absolute;
  left: 60.5%;
  top: 51%;
  width: clamp(36px, 3.3vw, 50px);
  height: auto;
  opacity: 0.76;
  transform: translate(-50%, -50%);
  filter: saturate(0.9);
}

.cp-dashboard-page .cp-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 11px;
}

.cp-dashboard-page .cp-section-heading h2 {
  margin: 4px 0 0;
  font-size: 22px;
  line-height: 1.2;
}

.cp-dashboard-page .cp-section-heading p {
  max-width: 620px;
  margin: 7px 0 0;
  color: var(--cp-dash-muted);
  font-size: 13px;
  line-height: 1.55;
}

.cp-dashboard-page .cp-dashboard-section-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 32px;
  padding: 5px 8px;
  color: var(--cp-dash-pink-hover);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.cp-dashboard-page .cp-dashboard-section-link:hover {
  color: #a92993;
  background: var(--cp-dash-pink-soft);
}

.cp-dashboard-page .cp-dashboard-recommendations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.cp-dashboard-page .cp-recommendation-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 13px;
  min-height: 174px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--cp-dash-border);
  border-radius: 16px;
  background: var(--cp-dash-surface);
  box-shadow: 0 7px 20px rgba(35, 32, 69, 0.04);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.cp-dashboard-page .cp-recommendation-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  content: "";
  background: var(--rec-accent, var(--cp-dash-pink));
}

.cp-dashboard-page .cp-recommendation-card:hover,
.cp-dashboard-page .cp-recommendation-card:focus-visible {
  border-color: color-mix(in srgb, var(--rec-accent, var(--cp-dash-pink)) 28%, var(--cp-dash-border));
  box-shadow: var(--cp-dash-shadow-hover);
  transform: translateY(-1px);
}

.cp-dashboard-page .cp-recommendation-card.is-danger {
  --rec-accent: var(--cp-dash-danger);
  --rec-soft: var(--cp-dash-danger-soft);
}

.cp-dashboard-page .cp-recommendation-card.is-warning {
  --rec-accent: var(--cp-dash-warning);
  --rec-soft: var(--cp-dash-warning-soft);
}

.cp-dashboard-page .cp-recommendation-card.is-info,
.cp-dashboard-page .cp-recommendation-card.is-premium {
  --rec-accent: var(--cp-dash-pink-hover);
  --rec-soft: var(--cp-dash-lilac-soft);
}

.cp-dashboard-page .cp-recommendation-card.is-success {
  --rec-accent: var(--cp-dash-success);
  --rec-soft: var(--cp-dash-success-soft);
}

.cp-dashboard-page .cp-recommendation-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: var(--rec-accent, var(--cp-dash-pink-hover));
  background: var(--rec-soft, var(--cp-dash-pink-soft));
}

.cp-dashboard-page .cp-recommendation-icon svg {
  width: 18px;
  height: 18px;
}

.cp-dashboard-page .cp-recommendation-card > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.cp-dashboard-page .cp-recommendation-label {
  margin-bottom: 6px;
  padding: 4px 7px;
  border-radius: 999px;
  color: var(--rec-accent, var(--cp-dash-pink-hover));
  background: var(--rec-soft, var(--cp-dash-pink-soft));
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.cp-dashboard-page .cp-recommendation-card h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.32;
}

.cp-dashboard-page .cp-recommendation-card p {
  margin: 6px 0 12px;
  color: var(--cp-dash-text);
  font-size: 13px;
  line-height: 1.45;
}

.cp-dashboard-page .cp-recommendation-cta {
  width: auto;
  min-height: 32px;
  padding: 6px 10px;
  margin-top: auto;
  border: 1px solid color-mix(in srgb, var(--rec-accent, var(--cp-dash-pink)) 22%, transparent);
  color: var(--rec-accent, var(--cp-dash-pink-hover));
  background: var(--rec-soft, var(--cp-dash-pink-soft));
  box-shadow: none;
}

.cp-dashboard-page .cp-recommendation-cta:hover {
  border-color: var(--rec-accent, var(--cp-dash-pink));
  color: var(--rec-accent, var(--cp-dash-pink-hover));
  background: color-mix(in srgb, var(--rec-soft, var(--cp-dash-pink-soft)) 82%, #ffffff);
  transform: translateY(-1px);
}

.cp-dashboard-page .cp-dashboard-summary-section {
  margin-top: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.cp-dashboard-page .cp-dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.cp-dashboard-page .cp-dashboard-kpi-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-height: 88px;
  padding: 13px 15px;
  border: 1px solid var(--cp-dash-border);
  border-radius: 14px;
  background: var(--cp-dash-surface);
  box-shadow: 0 5px 16px rgba(38, 35, 72, 0.035);
}

.cp-dashboard-page .cp-kpi-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  color: var(--cp-dash-pink-hover);
  background: var(--cp-dash-pink-soft);
}

.cp-dashboard-page .cp-kpi-icon.green {
  color: var(--cp-dash-success);
  background: var(--cp-dash-success-soft);
}

.cp-dashboard-page .cp-kpi-icon.orange {
  color: var(--cp-dash-warning);
  background: var(--cp-dash-warning-soft);
}

.cp-dashboard-page .cp-kpi-icon.red {
  color: var(--cp-dash-danger);
  background: var(--cp-dash-danger-soft);
}

.cp-dashboard-page .cp-dashboard-kpi-card div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 3px 10px;
}

.cp-dashboard-page .cp-dashboard-kpi-card div > span {
  color: var(--cp-dash-text);
  font-size: 12px;
  font-weight: 750;
}

.cp-dashboard-page .cp-dashboard-kpi-card strong {
  grid-row: 1 / span 2;
  grid-column: 2;
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.cp-dashboard-page .cp-dashboard-kpi-card small {
  color: var(--cp-dash-muted);
  font-size: 11px;
}

.cp-dashboard-page .cp-dashboard-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(340px, 0.85fr);
  align-items: stretch;
  gap: 18px;
}

.cp-dashboard-page .cp-dashboard-main-grid.is-attention {
  grid-template-columns: minmax(0, 1.5fr) minmax(330px, 0.9fr);
}

.cp-dashboard-page .cp-dashboard-main-stack,
.cp-dashboard-page .cp-dashboard-side-stack {
  display: grid;
  gap: 18px;
}

.cp-dashboard-page .cp-panel {
  border: 1px solid var(--cp-dash-border);
  border-radius: 18px;
  background: var(--cp-dash-surface);
  box-shadow: 0 7px 22px rgba(35, 32, 69, 0.04);
}

.cp-dashboard-page .cp-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.cp-dashboard-page .cp-panel-header h2 {
  margin: 0;
  font-size: 19px;
  line-height: 1.3;
}

.cp-dashboard-page .cp-panel-header p {
  margin: 6px 0 0;
  color: var(--cp-dash-muted);
  font-size: 13px;
  line-height: 1.5;
}

.cp-dashboard-page .cp-next-card,
.cp-dashboard-page .cp-promote-card,
.cp-dashboard-page .cp-return-summary,
.cp-dashboard-page .cp-premium-card,
.cp-dashboard-page .cp-attention-card,
.cp-dashboard-page .cp-shipshark-tip {
  padding: 21px;
}

.cp-dashboard-page .cp-next-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
}

.cp-dashboard-page .cp-next-list a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 11px;
  padding: 15px 3px;
  border-bottom: 1px solid var(--cp-dash-border);
  color: var(--cp-dash-heading);
  text-decoration: none;
  transition: color 160ms ease, padding 160ms ease, background-color 160ms ease;
}

.cp-dashboard-page .cp-next-list a:hover {
  padding-right: 8px;
  padding-left: 8px;
  color: var(--cp-dash-pink-hover);
  background: var(--cp-dash-pink-soft);
}

.cp-dashboard-page .cp-next-list a > span {
  display: grid;
  grid-row: 1 / span 2;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  color: var(--cp-dash-pink-hover);
  background: var(--cp-dash-pink-soft);
}

.cp-dashboard-page .cp-next-list strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-dashboard-page .cp-next-list small {
  color: var(--cp-dash-muted);
  font-size: 11px;
}

.cp-dashboard-page .cp-promote-body {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.cp-dashboard-page .cp-promote-thumb {
  display: grid;
  place-items: center;
  width: 112px;
  aspect-ratio: 1;
  border: 1px solid rgba(217, 70, 196, 0.13);
  border-radius: 18px;
  color: var(--cp-dash-pink-hover);
  background: linear-gradient(145deg, var(--cp-dash-pink-soft), var(--cp-dash-lilac-soft));
}

.cp-dashboard-page .cp-promote-body h3 {
  margin: 8px 0 12px;
  font-size: 20px;
}

.cp-dashboard-page .cp-promote-body dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 15px;
}

.cp-dashboard-page .cp-promote-body dl > div {
  padding: 11px 12px;
  border-radius: 12px;
  background: var(--cp-dash-neutral);
}

.cp-dashboard-page .cp-promote-body dt {
  color: var(--cp-dash-muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.cp-dashboard-page .cp-promote-body dd {
  margin: 5px 0 0;
  color: var(--cp-dash-heading);
  font-size: 13px;
  font-weight: 800;
}

.cp-dashboard-page .cp-promote-body p {
  color: var(--cp-dash-text);
  font-size: 13px;
  line-height: 1.55;
}

.cp-dashboard-page .cp-promote-actions,
.cp-dashboard-page .cp-premium-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.cp-dashboard-page .cp-return-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 20px;
  border-top: 1px solid var(--cp-dash-border);
  border-bottom: 1px solid var(--cp-dash-border);
}

.cp-dashboard-page .cp-return-summary-grid > div {
  padding: 18px 11px;
  border-right: 1px solid var(--cp-dash-border);
  text-align: center;
}

.cp-dashboard-page .cp-return-summary-grid > div:last-child {
  border-right: 0;
}

.cp-dashboard-page .cp-return-summary-grid strong {
  display: block;
  font-size: 24px;
  font-variant-numeric: tabular-nums;
}

.cp-dashboard-page .cp-return-summary-grid span {
  display: block;
  margin-top: 4px;
  color: var(--cp-dash-muted);
  font-size: 10px;
  font-weight: 750;
}

.cp-dashboard-page .cp-return-summary-grid .is-warning strong {
  color: var(--cp-dash-warning);
}

.cp-dashboard-page .cp-planning-readiness-card {
  background: linear-gradient(145deg, #ffffff, #fdf8fc);
}

.cp-dashboard-page .cp-readiness-list {
  display: grid;
  gap: 16px;
}

.cp-dashboard-page .cp-readiness-item {
  padding: 15px 16px;
  border: 1px solid var(--cp-dash-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
}

.cp-dashboard-page .cp-readiness-item > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.cp-dashboard-page .cp-readiness-item span,
.cp-dashboard-page .cp-readiness-item small {
  color: var(--cp-dash-muted);
  font-size: 12px;
}

.cp-dashboard-page .cp-readiness-item strong {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.cp-dashboard-page .cp-readiness-track {
  height: 7px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #eeeaf1;
}

.cp-dashboard-page .cp-readiness-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cp-dash-pink-hover), var(--cp-dash-pink));
}

.cp-dashboard-page .cp-readiness-item.is-campaign small {
  display: block;
  margin-top: 5px;
  line-height: 1.45;
}

.cp-dashboard-page .cp-attention-list {
  display: grid;
}

.cp-dashboard-page .cp-attention-list a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 13px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--cp-dash-border);
  color: var(--cp-dash-heading);
  text-decoration: none;
  transition: padding 160ms ease, color 160ms ease, background-color 160ms ease;
}

.cp-dashboard-page .cp-attention-list a:last-child {
  border-bottom: 0;
}

.cp-dashboard-page .cp-attention-list a:hover {
  padding-right: 9px;
  padding-left: 9px;
  color: var(--cp-dash-pink-hover);
  background: var(--cp-dash-pink-soft);
}

.cp-dashboard-page .cp-row-thumb {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--cp-dash-pink-hover);
  background: var(--cp-dash-pink-soft);
}

.cp-dashboard-page .cp-attention-list strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-dashboard-page .cp-attention-list strong small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--cp-dash-muted);
  font-size: 10px;
  font-weight: 600;
  text-overflow: ellipsis;
}

.cp-dashboard-page .cp-attention-list > a > span:last-child {
  color: var(--cp-dash-heading);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.cp-dashboard-page .cp-shipshark-tip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  background: linear-gradient(145deg, #fffafd, #f8f3ff);
}

.cp-dashboard-page .cp-tip-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  color: var(--cp-dash-pink-hover);
  background: #ffffff;
  box-shadow: 0 12px 26px rgba(199, 55, 176, 0.12);
}

.cp-dashboard-page .cp-shipshark-tip h2 {
  margin: 5px 0 8px;
  font-size: 20px;
}

.cp-dashboard-page .cp-shipshark-tip p {
  margin: 0 0 18px;
  color: var(--cp-dash-text);
  font-size: 14px;
  line-height: 1.6;
}

.cp-dashboard-page .cp-empty {
  padding: 24px;
  border: 1px dashed var(--cp-dash-border);
  border-radius: 14px;
  color: var(--cp-dash-muted);
  background: var(--cp-dash-neutral);
  text-align: center;
}

@media (max-width: 1180px) {
  .cp-dashboard-page .cp-dashboard-v1-hero {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.78fr);
    height: 224px;
    padding: 22px 30px;
  }

  .cp-dashboard-page .cp-dashboard-v1-visual {
    margin: -22px -30px -22px 12px;
  }

  .cp-dashboard-page .cp-dashboard-main-grid,
  .cp-dashboard-page .cp-dashboard-main-grid.is-attention {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
  }

  .cp-dashboard-page .cp-promote-body dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1000px) {
  .cp-dashboard-page .cp-dashboard-recommendations,
  .cp-dashboard-page .cp-dashboard-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .cp-dashboard-page > section {
    margin-top: 20px;
  }

  .cp-dashboard-page .cp-dashboard-v1-hero,
  .cp-dashboard-page .cp-dashboard-main-grid,
  .cp-dashboard-page .cp-dashboard-main-grid.is-attention {
    grid-template-columns: 1fr;
  }

  .cp-dashboard-page .cp-dashboard-v1-hero {
    height: auto;
    min-height: 0;
    padding: 26px 28px;
  }

  .cp-dashboard-page .cp-dashboard-v1-visual {
    display: none;
  }

  .cp-dashboard-page .cp-dashboard-side-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .cp-dashboard-page .cp-dashboard-v1-hero {
    padding: 22px 20px;
    border-radius: 16px;
  }

  .cp-dashboard-page .cp-dashboard-v1-copy h1 {
    font-size: clamp(32px, 10vw, 38px);
  }

  .cp-dashboard-page .cp-dashboard-v1-copy > p {
    font-size: 14px;
  }

  .cp-dashboard-page .cp-promote-actions,
  .cp-dashboard-page .cp-premium-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .cp-dashboard-page .cp-promote-actions .cp-btn,
  .cp-dashboard-page .cp-premium-actions .cp-btn {
    width: 100%;
  }

  .cp-dashboard-page .cp-section-heading,
  .cp-dashboard-page .cp-panel-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .cp-dashboard-page .cp-dashboard-recommendations,
  .cp-dashboard-page .cp-dashboard-kpi-grid,
  .cp-dashboard-page .cp-dashboard-side-stack,
  .cp-dashboard-page .cp-next-list,
  .cp-dashboard-page .cp-promote-body,
  .cp-dashboard-page .cp-promote-body dl {
    grid-template-columns: 1fr;
  }

  .cp-dashboard-page .cp-dashboard-recommendations > :last-child:nth-child(odd) {
    grid-column: auto;
  }

  .cp-dashboard-page .cp-dashboard-summary-section,
  .cp-dashboard-page .cp-next-card,
  .cp-dashboard-page .cp-promote-card,
  .cp-dashboard-page .cp-return-summary,
  .cp-dashboard-page .cp-premium-card,
  .cp-dashboard-page .cp-attention-card,
  .cp-dashboard-page .cp-shipshark-tip {
    padding: 18px;
  }

  .cp-dashboard-page .cp-dashboard-summary-section {
    padding: 0;
  }

  .cp-dashboard-page .cp-recommendation-card {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 17px;
  }

  .cp-dashboard-page .cp-dashboard-kpi-card div {
    grid-template-columns: 1fr auto;
  }

  .cp-dashboard-page .cp-promote-thumb {
    width: 100%;
    max-width: 160px;
  }

  .cp-dashboard-page .cp-return-summary-grid {
    grid-template-columns: 1fr;
  }

  .cp-dashboard-page .cp-return-summary-grid > div {
    border-right: 0;
    border-bottom: 1px solid var(--cp-dash-border);
  }

  .cp-dashboard-page .cp-return-summary-grid > div:last-child {
    border-bottom: 0;
  }

  .cp-dashboard-page .cp-attention-list a {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .cp-dashboard-page .cp-attention-list a > em,
  .cp-dashboard-page .cp-attention-list a > span:last-child {
    grid-column: 2;
    justify-self: start;
  }

  .cp-dashboard-page .cp-shipshark-tip {
    grid-template-columns: 1fr;
  }
}

/* Purchase Planner decision workspace */
.cp-planner-workspace {
  display: grid;
  gap: 16px;
}

.cp-planner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.cp-planner-header h1 {
  margin: 0;
  color: var(--cp-ink);
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.1;
}

.cp-planner-header p {
  margin: 6px 0 0;
  color: var(--cp-muted);
  font-size: 14px;
  font-weight: 650;
}

.cp-planner-header-actions,
.cp-planner-toolbar-fields,
.cp-planner-risk-chips,
.cp-planner-row-actions,
.cp-planner-pagination nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cp-planner-toolbar-fields {
  flex: 0 1 520px;
  min-width: min(500px, 45vw);
}

.cp-planner-source-notice {
  min-height: 44px;
  padding-block: 10px;
}

.cp-planner-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.cp-planner-kpi {
  display: grid;
  gap: 5px;
  min-height: 112px;
  padding: 18px 20px;
  border: 1px solid var(--cp-border);
  border-radius: 18px;
  color: var(--cp-ink);
  background: #fff;
  box-shadow: var(--cp-shadow-soft);
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.cp-planner-kpi:hover,
.cp-planner-kpi:focus-visible,
.cp-planner-kpi.is-active {
  border-color: rgba(219, 39, 119, 0.38);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.1);
  transform: translateY(-1px);
}

.cp-planner-kpi span {
  color: #52647a;
  font-size: 13px;
  font-weight: 900;
}

.cp-planner-kpi strong {
  font-size: 30px;
  line-height: 1;
}

.cp-planner-kpi small {
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 700;
}

.cp-planner-kpi.is-critical {
  background: linear-gradient(135deg, #fff, #fff5f8);
}

.cp-planner-kpi.is-warning {
  background: linear-gradient(135deg, #fff, #fffbef);
}

.cp-planner-kpi.is-horizon {
  background: linear-gradient(135deg, #fff, #f3f8ff);
}

.cp-planner-list-card {
  position: relative;
  min-width: 0;
  border: 1px solid var(--cp-border);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--cp-shadow-soft);
}

.cp-planner-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--cp-border);
}

.cp-planner-risk-chips {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.cp-planner-risk-chips::-webkit-scrollbar {
  display: none;
}

.cp-planner-risk-chips a {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid var(--cp-border);
  border-radius: 999px;
  color: #475569;
  background: #fff;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

.cp-planner-risk-chips a.is-active {
  border-color: rgba(219, 39, 119, 0.3);
  color: var(--cp-brand-pink-dark);
  background: var(--cp-brand-pink-soft);
}

.cp-planner-search input,
.cp-planner-secondary-filter select,
.cp-planner-pagination select {
  min-height: 38px;
  border: 1px solid var(--cp-border);
  border-radius: 11px;
  color: var(--cp-ink);
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}

.cp-planner-search input {
  width: 100%;
  padding: 8px 12px;
}

.cp-planner-search {
  flex: 1 1 250px;
  min-width: 230px;
}

.cp-planner-secondary-filter {
  flex: 0 1 158px;
  min-width: 142px;
}

.cp-planner-secondary-filter select {
  width: 100%;
}

.cp-planner-toolbar-fields > .cp-btn {
  flex: 0 0 auto;
  padding-inline: 12px;
  white-space: nowrap;
}

.cp-planner-secondary-filter select,
.cp-planner-pagination select {
  padding: 7px 30px 7px 10px;
}

.cp-planner-table-wrap {
  min-width: 0;
  overflow: visible;
}

.cp-planner-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.cp-planner-table th,
.cp-planner-table td {
  border-bottom: 1px solid var(--cp-border);
  text-align: left;
  vertical-align: middle;
}

.cp-planner-table th {
  padding: 11px 10px;
  color: #5d6e85;
  background: #f8fafc;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cp-planner-table td {
  height: 88px;
  padding: 10px;
  color: var(--cp-ink);
  font-size: 13px;
}

.cp-planner-table th:nth-child(1) { width: 22%; }
.cp-planner-table th:nth-child(2) { width: 12%; }
.cp-planner-table th:nth-child(3) { width: 12%; }
.cp-planner-table th:nth-child(4) { width: 13%; }
.cp-planner-table th:nth-child(5) { width: 16%; }
.cp-planner-table th:nth-child(6) { width: 12%; }
.cp-planner-table th:nth-child(7) { width: 13%; }

.cp-planner-table tr.is-selected td,
.cp-planner-table tr:has([aria-expanded="true"]) td {
  background: #fff8fc;
}

.cp-planner-table tr.is-selected td:first-child,
.cp-planner-table tr:has([aria-expanded="true"]) td:first-child {
  box-shadow: inset 3px 0 0 var(--cp-brand-pink);
}

.cp-planner-table td strong {
  font-weight: 900;
}

.cp-planner-table td small {
  display: block;
  margin-top: 4px;
  color: var(--cp-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.cp-planner-product {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  gap: 10px;
  padding: 0 28px 0 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.cp-planner-product-cell {
  position: relative;
  min-width: 0;
}

.cp-planner-product::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 40;
  left: 60px;
  bottom: calc(100% + 8px);
  width: max-content;
  max-width: min(320px, 65vw);
  padding: 7px 9px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  color: #fff;
  background: #172042;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 120ms ease, transform 120ms ease;
}

.cp-planner-product:hover::after,
.cp-planner-product:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

.cp-planner-copy-sku {
  position: absolute;
  right: 0;
  bottom: -1px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  color: #64748b;
  background: #fff;
  cursor: pointer;
  opacity: 0;
  transition: color 120ms ease, background 120ms ease, opacity 120ms ease;
}

.cp-planner-copy-sku svg {
  width: 14px;
  height: 14px;
}

.cp-planner-product-cell:hover .cp-planner-copy-sku,
.cp-planner-product-cell:focus-within .cp-planner-copy-sku {
  opacity: 1;
}

.cp-planner-copy-sku:hover,
.cp-planner-copy-sku:focus-visible {
  color: var(--cp-brand-pink-dark);
  background: var(--cp-brand-pink-soft);
  outline: none;
}

.cp-planner-product-image {
  display: grid;
  place-items: center;
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  border-radius: 11px;
  color: var(--cp-brand-pink-dark);
  background: linear-gradient(145deg, #f8fafc, #f4eefa);
}

.cp-planner-product-image svg {
  width: 22px;
  height: 22px;
}

.cp-planner-product > span:last-child {
  min-width: 0;
}

.cp-planner-product strong,
.cp-planner-product small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-planner-product strong {
  display: block;
  color: var(--cp-ink);
  font-size: 13px;
}

.cp-planner-product small {
  color: #5d6e85;
  font-size: 11px;
}

.cp-planner-metric {
  display: block;
}

.cp-planner-metric.is-negative,
.cp-planner-metric.is-negative strong,
.cp-planner-coverage.is-critical {
  color: #c81e4f;
}

.cp-planner-coverage.is-warning {
  color: #b66a00;
}

.cp-planner-coverage.is-info,
.cp-planner-coverage.is-success {
  color: #087a4b;
}

.cp-planner-text-button {
  display: block;
  margin-top: 5px;
  padding: 0;
  border: 0;
  color: var(--cp-brand-pink-dark);
  background: transparent;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.cp-planner-row-actions {
  position: relative;
  justify-content: flex-end;
}

.cp-planner-row-actions form {
  margin: 0;
}

.cp-planner-more {
  display: inline-grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--cp-border);
  border-radius: 10px;
  color: var(--cp-ink);
  background: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.cp-planner-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  right: 0;
  width: 210px;
  padding: 6px;
  border: 1px solid var(--cp-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
}

.cp-planner-menu a,
.cp-planner-menu button {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  color: var(--cp-ink);
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.cp-planner-menu a:hover,
.cp-planner-menu button:hover,
.cp-planner-menu a:focus-visible,
.cp-planner-menu button:focus-visible {
  background: var(--cp-brand-pink-soft);
}

.cp-planner-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
  padding: 12px 16px;
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 750;
}

.cp-planner-pagination nav > a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--cp-border);
  border-radius: 9px;
  color: var(--cp-ink);
  text-decoration: none;
}

.cp-planner-pagination a.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

.cp-planner-scrim {
  position: fixed;
  z-index: 90;
  inset: 0;
  background: rgba(15, 23, 42, 0.28);
}

.cp-planner-toast {
  position: fixed;
  z-index: 120;
  right: 24px;
  bottom: 24px;
  max-width: min(320px, calc(100vw - 32px));
  padding: 11px 14px;
  border: 1px solid rgba(16, 185, 129, 0.24);
  border-radius: 11px;
  color: #087a4b;
  background: #effcf5;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16);
  font-size: 13px;
  font-weight: 850;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 140ms ease, transform 140ms ease;
}

.cp-planner-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.cp-planner-toast.is-error {
  border-color: rgba(234, 88, 12, 0.24);
  color: #b45309;
  background: #fff8ed;
}

.cp-planner-drawer {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: min(430px, 94vw);
  height: 100dvh;
  border-left: 1px solid var(--cp-border);
  background: #fff;
  box-shadow: -18px 0 48px rgba(15, 23, 42, 0.16);
  transform: translateX(102%);
  visibility: hidden;
  transition: transform 220ms ease, visibility 220ms ease;
}

.cp-planner-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}

.cp-planner-drawer > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  border-bottom: 1px solid var(--cp-border);
}

.cp-planner-drawer > header h3 {
  margin: 0;
  color: var(--cp-ink);
  font-size: 20px;
}

.cp-planner-drawer > header p {
  margin: 4px 0 8px;
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 800;
}

.cp-planner-drawer > header button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  color: var(--cp-ink);
  background: #f1f5f9;
  font-size: 24px;
  cursor: pointer;
}

.cp-planner-drawer-body {
  display: grid;
  gap: 0;
  overflow-y: auto;
}

.cp-planner-drawer-body > section {
  padding: 18px 20px;
  border-bottom: 1px solid var(--cp-border);
}

.cp-planner-drawer-body h4 {
  margin: 0 0 12px;
  color: var(--cp-ink);
  font-size: 14px;
}

.cp-planner-drawer-body p {
  margin: 0 0 12px;
  color: var(--cp-muted);
  font-size: 13px;
  line-height: 1.5;
}

.cp-planner-drawer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.cp-planner-drawer-grid div {
  padding: 10px;
  border: 1px solid var(--cp-border);
  border-radius: 10px;
  background: #f8fafc;
}

.cp-planner-drawer-grid div:last-child {
  grid-column: span 3;
}

.cp-planner-drawer dt,
.cp-planner-drawer-grid small {
  color: var(--cp-muted);
  font-size: 10px;
  font-weight: 850;
}

.cp-planner-drawer dd {
  margin: 4px 0 0;
  color: var(--cp-ink);
  font-size: 13px;
  font-weight: 900;
}

.cp-planner-drawer-list {
  display: grid;
  gap: 0;
  margin: 0;
}

.cp-planner-drawer-list > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid #edf1f6;
}

.cp-planner-drawer-list > div:last-child {
  border-bottom: 0;
}

.cp-planner-drawer-list > div.is-total {
  margin-top: 6px;
  padding: 12px;
  border: 0;
  border-radius: 10px;
  background: var(--cp-brand-pink-soft);
}

.cp-planner-why {
  background: linear-gradient(135deg, #fff, #f8fbff);
}

.cp-planner-calculation-reason:empty {
  display: none;
}

.cp-planner-drawer > footer {
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding: 16px 20px;
  border-top: 1px solid var(--cp-border);
  background: #fff;
}

.cp-planner-drawer > footer form,
.cp-planner-drawer > footer .cp-btn {
  width: 100%;
  margin: 0;
}

body.cp-planner-drawer-open {
  overflow: hidden;
}

@media (max-width: 1180px) {
  .cp-planner-header {
    align-items: flex-start;
  }

  .cp-planner-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .cp-planner-risk-chips {
    width: 100%;
  }

  .cp-planner-toolbar-fields {
    justify-content: flex-end;
    width: 100%;
    min-width: 0;
  }

  .cp-planner-table th:nth-child(1) { width: 24%; }
  .cp-planner-table th:nth-child(2) { width: 13%; }
  .cp-planner-table th:nth-child(3) { width: 12%; }
  .cp-planner-table th:nth-child(4) { width: 14%; }
  .cp-planner-table th:nth-child(5) { width: 15%; }
  .cp-planner-table th:nth-child(6) { width: 11%; }
  .cp-planner-table th:nth-child(7) { width: 11%; }

  .cp-planner-row-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .cp-planner-more {
    width: 100%;
  }
}

@media (max-width: 900px) {
  .cp-planner-header {
    flex-direction: column;
  }

  .cp-planner-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cp-planner-table thead {
    display: none;
  }

  .cp-planner-table,
  .cp-planner-table tbody,
  .cp-planner-table tr,
  .cp-planner-table td {
    display: block;
    width: 100%;
  }

  .cp-planner-table tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 14px;
    border-bottom: 1px solid var(--cp-border);
  }

  .cp-planner-table td {
    height: auto;
    min-width: 0;
    padding: 9px;
    border: 0;
  }

  .cp-planner-table td:first-child {
    grid-column: span 2;
  }

  .cp-planner-table td:last-child {
    grid-column: span 3;
  }

  .cp-planner-table td:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 5px;
    color: #76869b;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
  }

  .cp-planner-row-actions {
    flex-direction: row;
    justify-content: flex-start;
  }

  .cp-planner-more {
    width: 34px;
  }

  .cp-planner-copy-sku {
    opacity: 1;
  }
}

@media (max-width: 640px) {
  .cp-planner-header-actions,
  .cp-planner-toolbar-fields {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  .cp-planner-header-actions .cp-btn,
  .cp-planner-search,
  .cp-planner-search input,
  .cp-planner-secondary-filter select,
  .cp-planner-toolbar-fields .cp-btn {
    width: 100%;
  }

  .cp-planner-kpis {
    grid-template-columns: 1fr;
  }

  .cp-planner-kpi {
    min-height: 96px;
  }

  .cp-planner-table tr {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cp-planner-table td:first-child,
  .cp-planner-table td:last-child {
    grid-column: span 2;
  }

  .cp-planner-table td:nth-child(5) {
    grid-column: span 2;
  }

  .cp-planner-pagination {
    align-items: flex-start;
    flex-direction: column;
  }

  .cp-planner-drawer {
    width: 100vw;
  }

  .cp-planner-drawer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cp-planner-drawer-grid div:last-child {
    grid-column: span 2;
  }

  .cp-planner-toast {
    right: 16px;
    bottom: 16px;
  }
}

/* Products workspace */
.customer-portal.cp-signed-in .cp-products-workspace-page {
  --cp-products-navy: #172042;
  --cp-products-text: #5b6280;
  --cp-products-border: #e7e9f2;
  --cp-products-brand: #d946c4;
  width: min(1600px, calc(100% - clamp(32px, 4vw, 72px)));
  max-width: none;
  margin: 0 auto;
  padding: 28px 0 48px;
  color: var(--cp-products-navy);
  overflow-x: clip;
}

.cp-products-workspace-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.cp-products-workspace-header h1,
.cp-products-workspace-header p {
  margin: 0;
}

.cp-products-workspace-header h1 {
  color: var(--cp-products-navy);
  font-size: clamp(28px, 2.3vw, 38px);
  line-height: 1.1;
}

.cp-products-workspace-header p {
  margin-top: 7px;
  color: var(--cp-products-text);
  font-size: 14px;
}

.cp-products-workspace-header span {
  display: block;
  margin-top: 6px;
  color: #8188a1;
  font-size: 12px;
}

.cp-products-source-notice {
  margin-bottom: 14px;
  padding: 10px 13px;
  border: 1px solid #eadff0;
  border-radius: 10px;
  background: #fdf8fc;
  color: #6f5d73;
  font-size: 12px;
}

.cp-products-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.cp-products-kpi {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  min-height: 112px;
  padding: 17px;
  border: 1px solid var(--cp-products-border);
  border-radius: 15px;
  background: #fff;
  color: inherit;
  box-shadow: 0 8px 24px rgba(23, 32, 66, 0.045);
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.cp-products-kpi:hover,
.cp-products-kpi:focus-visible {
  border-color: #e7badd;
  box-shadow: 0 11px 28px rgba(23, 32, 66, 0.075);
  transform: translateY(-1px);
}

.cp-products-kpi.is-active {
  border-color: rgba(217, 70, 196, 0.42);
}

.cp-products-kpi-icon,
.cp-products-actions-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: #fdf0fa;
  color: var(--cp-products-brand);
}

.cp-products-kpi-icon.is-warning { background: #fff5e6; color: #ca7811; }
.cp-products-kpi-icon.is-danger { background: #fff0f2; color: #d84958; }
.cp-products-kpi-icon.is-info { background: #f2efff; color: #7255d9; }

.cp-products-kpi small,
.cp-products-kpi em,
.cp-products-kpi strong {
  display: block;
  font-style: normal;
}

.cp-products-kpi small {
  color: #59617d;
  font-size: 12px;
  font-weight: 700;
}

.cp-products-kpi strong {
  margin-top: 2px;
  color: var(--cp-products-navy);
  font-size: 27px;
  line-height: 1.05;
}

.cp-products-kpi em {
  margin-top: 5px;
  color: #80869d;
  font-size: 11px;
}

.cp-products-filter-card,
.cp-products-list-card,
.cp-products-actions-panel {
  border: 1px solid var(--cp-products-border);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(23, 32, 66, 0.04);
}

.cp-products-filter-card {
  margin-bottom: 14px;
  padding: 13px;
}

.cp-products-search-form {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(190px, 250px) 150px;
  align-items: end;
  gap: 10px;
}

.cp-products-search-field {
  position: relative;
  display: block;
  min-height: 46px;
  padding: 0;
  border: 1px solid #dfe2ec;
  border-radius: 10px;
  background: #fff;
  color: #8b91a7;
}

.cp-products-search-field > svg {
  position: absolute;
  top: 50%;
  left: 14px;
  z-index: 1;
  width: 18px;
  height: 18px;
  pointer-events: none;
  transform: translateY(-50%);
}
.cp-products-search-field input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 14px 0 44px;
  border: 0;
  border-radius: inherit;
  outline: 0;
  background: transparent;
  color: var(--cp-products-navy);
  font: inherit;
}

/* Keep the search affordance intact when the shared CP form rules load later. */
.customer-portal label.cp-products-search-field {
  position: relative;
  display: block;
  min-height: 46px;
  padding: 0;
  gap: 0;
  border: 1px solid #dfe2ec;
  border-radius: 10px;
  background: #fff;
}

.customer-portal .cp-products-search-field > svg {
  position: absolute;
  top: 50%;
  left: 16px;
  z-index: 2;
  width: 18px;
  height: 18px;
  pointer-events: none;
  transform: translateY(-50%);
}

.customer-portal .cp-products-search-field input[type="search"] {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 14px 0 48px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
}

.customer-portal label.cp-products-search-field:focus-within {
  border-color: var(--cp-accent);
  box-shadow: 0 0 0 3px rgba(217, 87, 204, 0.13);
}

.customer-portal .cp-products-search-field input[type="search"]:focus {
  border: 0;
  box-shadow: none;
}

.cp-products-status-field {
  display: grid;
  gap: 4px;
}

.cp-products-status-field > span {
  color: #6a718a;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.cp-products-status-field select,
.cp-products-list-footer select {
  min-height: 46px;
  border: 1px solid #dfe2ec;
  border-radius: 10px;
  background: #fff;
  color: var(--cp-products-navy);
  padding: 0 36px 0 12px;
}

.cp-products-search-submit { min-height: 46px; }

.cp-products-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.cp-products-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 6px 11px;
  border: 1px solid #e4e6ee;
  border-radius: 999px;
  background: #fff;
  color: #404860;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 3px 9px rgba(23, 32, 66, 0.035);
}

.cp-products-filter-chip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #f2f3f8;
  color: #69708a;
  font-size: 10px;
}

.cp-products-filter-chip.is-active {
  border-color: var(--cp-products-navy);
  background: var(--cp-products-navy);
  color: #fff;
}

.cp-products-filter-chip.is-active span { background: rgba(255, 255, 255, 0.16); color: #fff; }

.cp-products-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 360px);
  align-items: start;
  gap: 14px;
}

.cp-products-list-card { min-width: 0; overflow: hidden; }

.cp-products-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid #eceef4;
}

.cp-products-list-header h2,
.cp-products-actions-panel h2 {
  margin: 0;
  color: var(--cp-products-navy);
  font-size: 17px;
}

.cp-products-list-header p,
.cp-products-actions-panel header p {
  margin: 3px 0 0;
  color: #7a8197;
  font-size: 11px;
}

.cp-products-list-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}

.cp-products-list-tools .cp-btn {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 11px;
}

.cp-products-list-tools .cp-btn svg { width: 15px; height: 15px; }
.cp-products-list-tools button:disabled { cursor: not-allowed; opacity: 0.5; }

.cp-products-column-menu { position: relative; }
.cp-products-column-menu summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.cp-products-column-menu summary::-webkit-details-marker { display: none; }
.cp-products-column-menu[open] summary {
  border-color: rgba(217, 70, 196, 0.34);
  background: #fdf4fb;
  color: #a92c99;
}

.cp-products-column-menu summary:focus-visible {
  outline: 2px solid rgba(217, 70, 196, 0.34);
  outline-offset: 2px;
}

.cp-products-column-popover {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  gap: 4px;
  min-width: 184px;
  padding: 7px;
  border: 1px solid var(--cp-products-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(23, 32, 66, 0.12);
}

.cp-products-column-option {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 7px 9px;
  border-radius: 8px;
  color: #414960;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}

.cp-products-column-option:hover { background: #f8f9fc; }

.cp-products-column-option input[type="checkbox"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.cp-products-column-check {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid #cfd3df;
  border-radius: 5px;
  background: #fff;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.cp-products-column-check::after {
  width: 5px;
  height: 9px;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  content: '';
  opacity: 0;
  transform: translateY(-1px) rotate(45deg);
}

.cp-products-column-option input:checked + .cp-products-column-check {
  border-color: var(--cp-products-brand);
  background: var(--cp-products-brand);
}

.cp-products-column-option input:checked + .cp-products-column-check::after { opacity: 1; }

.cp-products-column-option input:focus-visible + .cp-products-column-check {
  box-shadow: 0 0 0 3px rgba(217, 70, 196, 0.18);
}

.cp-products-table-wrap {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.cp-products-table {
  width: 100%;
  min-width: 1040px;
  border-collapse: collapse;
  font-size: 12px;
}

.cp-products-table [data-product-column].is-column-hidden { display: none !important; }

.cp-products-table th {
  padding: 11px 12px;
  background: #f8f9fc;
  color: #667087;
  font-size: 9px;
  font-weight: 800;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.cp-products-table th a { color: inherit; text-decoration: none; }
.cp-products-table th a:hover { color: var(--cp-products-brand); }

.cp-products-table td {
  padding: 11px 12px;
  border-top: 1px solid #eceef4;
  color: #30384f;
  vertical-align: middle;
}

.cp-products-table tbody tr { transition: background-color 150ms ease; }
.cp-products-table tbody tr:hover { background: #fcfafd; }
.cp-products-table td > small,
.cp-products-table td > a > small {
  display: block;
  margin-top: 3px;
  color: #7c849a;
  font-size: 10px;
  line-height: 1.25;
}

.cp-products-product-cell {
  display: grid;
  grid-template-columns: 38px minmax(150px, 1fr);
  align-items: center;
  gap: 10px;
  color: var(--cp-products-navy);
  text-decoration: none;
}

.cp-products-product-cell strong { display: block; line-height: 1.25; }

.cp-products-product-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 1px solid #ece8f1;
  border-radius: 9px;
  background: #faf7fb;
  color: var(--cp-products-brand);
}

.cp-products-product-thumb svg { width: 17px; height: 17px; }
.cp-products-stock.is-negative { color: #d82f4b; }

.cp-products-status,
.cp-products-plus-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f1f2f6;
  color: #626980;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.cp-products-status.is-good,
.cp-products-status.is-success { background: #e5f8ed; color: #168451; }
.cp-products-status.is-low,
.cp-products-status.is-warning { background: #fff3d9; color: #a66300; }
.cp-products-status.is-out,
.cp-products-status.is-danger { background: #ffe7eb; color: #c72f47; }
.cp-products-status.is-overstock,
.cp-products-status.is-info { background: #eeeaff; color: #6143c7; }
.cp-products-status.is-data { background: #f1f2f6; color: #646b80; }
.cp-products-plus-badge { margin-left: 5px; background: #f9e8f6; color: #b72ca4; }

.cp-products-action-link,
.cp-products-action-button,
.cp-products-see-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid #dce2ef;
  border-radius: 8px;
  background: #f7f9fe;
  color: #294f9a;
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.cp-products-action-link.is-critical,
.cp-products-action-button.is-critical { border-color: #f2c5cd; background: #fff2f4; color: #c52b44; }
.cp-products-action-link.is-high,
.cp-products-action-button.is-high { border-color: #f2d4ad; background: #fff7ec; color: #b56609; }
.cp-products-action-link.is-medium,
.cp-products-action-button.is-medium { border-color: #e7c7e2; background: #fdf4fb; color: #b52da3; }
.cp-products-action-link.is-low,
.cp-products-action-button.is-low { border-color: #d9e1f2; background: #f4f7fd; color: #3f5d94; }

.cp-products-open-button { min-height: 31px; padding: 5px 9px; font-size: 10px; }
.cp-products-no-data { color: #8b91a3; font-style: italic; }

.cp-products-list-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid #eceef4;
  color: #737a90;
  font-size: 11px;
}

.cp-products-list-footer nav { display: flex; align-items: center; gap: 8px; }
.cp-products-list-footer nav .cp-btn { min-height: 31px; padding: 5px 9px; font-size: 10px; }
.cp-products-list-footer form { justify-self: end; }
.cp-products-list-footer label { display: flex; align-items: center; gap: 7px; }
.cp-products-list-footer select { min-height: 32px; padding-left: 8px; }

.cp-products-actions-panel {
  position: sticky;
  top: 84px;
  overflow: hidden;
}

.cp-products-actions-panel > header {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 15px;
  border-bottom: 1px solid #eceef4;
}

.cp-products-actions-icon { width: 38px; height: 38px; border-radius: 11px; }
.cp-products-actions-icon svg { width: 17px; height: 17px; }
.cp-products-actions-list { display: grid; gap: 9px; padding: 12px; }

.cp-products-action-card {
  padding: 11px;
  border: 1px solid #e8eaf2;
  border-radius: 11px;
  background: #fff;
}

.cp-products-action-card-top {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.cp-products-action-card-top strong { display: block; color: var(--cp-products-navy); font-size: 12px; line-height: 1.25; }
.cp-products-action-card-top small {
  display: inline-flex;
  margin-top: 4px;
  padding: 3px 6px;
  border-radius: 999px;
  background: #f4f0f7;
  color: #7b5682;
  font-size: 9px;
  font-weight: 800;
}

.cp-products-action-card p,
.cp-products-action-card em {
  display: block;
  margin: 8px 0 0;
  color: #666e84;
  font-size: 10px;
  font-style: normal;
  line-height: 1.4;
}

.cp-products-action-card em { color: #30384f; font-weight: 700; }
.cp-products-action-card .cp-products-action-button { margin-top: 9px; }
.cp-products-action-card.is-critical { border-left: 3px solid #db4058; }
.cp-products-action-card.is-high { border-left: 3px solid #df8a21; }
.cp-products-action-card.is-medium { border-left: 3px solid #d946c4; }
.cp-products-action-card.is-low { border-left: 3px solid #8870db; }

.cp-products-see-all {
  margin: 0 12px 13px;
  border: 0;
  background: transparent;
  color: #c52eaf;
}

.cp-products-empty-state {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 240px;
  padding: 40px 20px;
  color: #737b91;
  text-align: center;
}

.cp-products-empty-state > span { color: var(--cp-products-brand); }
.cp-products-empty-state strong { color: var(--cp-products-navy); }
.cp-products-empty-state p { margin: 0; }
.cp-products-empty-state.is-compact { min-height: 90px; padding: 24px 14px; }

@media (max-width: 1180px) {
  .cp-products-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-products-workspace-grid { grid-template-columns: minmax(0, 1fr); }
  .cp-products-actions-panel { position: static; }
  .cp-products-actions-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .customer-portal.cp-signed-in .cp-products-workspace-page {
    width: calc(100% - 32px);
    padding-top: 20px;
  }
  .cp-products-kpis { grid-template-columns: 1fr; }
  .cp-products-kpi { min-height: 98px; }
  .cp-products-search-form { grid-template-columns: 1fr; }
  .cp-products-filter-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; }
  .cp-products-filter-chip { flex: 0 0 auto; }
  .cp-products-list-header,
  .cp-products-list-footer { align-items: flex-start; grid-template-columns: 1fr; }
  .cp-products-list-header { flex-direction: column; }
  .cp-products-list-tools { justify-content: flex-start; }
  .cp-products-list-footer nav,
  .cp-products-list-footer form { justify-self: start; }
  .cp-products-actions-list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .cp-products-kpi,
  .cp-products-table tbody tr { transition: none; }
  .cp-products-kpi:hover { transform: none; }
}

/* Dashboard: compact product promotion decision card. */
.customer-portal.cp-signed-in .cp-dashboard-page .cp-promote-card--compact {
  padding: 18px;
}

.customer-portal.cp-signed-in .cp-dashboard-page .cp-promote-card-title {
  margin: 0 0 14px;
}

.customer-portal.cp-signed-in .cp-dashboard-page .cp-promote-card-title h2 {
  margin: 0;
  color: var(--cp-dash-heading);
  font-size: 18px;
  line-height: 1.3;
}

.customer-portal.cp-signed-in .cp-dashboard-page .cp-promote-compact {
  display: grid;
  gap: 12px;
}

.customer-portal.cp-signed-in .cp-dashboard-page .cp-promote-product {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.customer-portal.cp-signed-in .cp-dashboard-page .cp-promote-product-visual {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(217, 70, 196, 0.12);
  border-radius: 13px;
  color: var(--cp-dash-pink-hover);
  background: linear-gradient(145deg, var(--cp-dash-pink-soft), #fff);
}

.customer-portal.cp-signed-in .cp-dashboard-page .cp-promote-product-visual svg {
  width: 24px;
  height: 24px;
}

.customer-portal.cp-signed-in .cp-dashboard-page .cp-promote-product-copy {
  min-width: 0;
}

.customer-portal.cp-signed-in .cp-dashboard-page .cp-promote-product-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.customer-portal.cp-signed-in .cp-dashboard-page .cp-promote-product-heading h3 {
  min-width: 0;
  margin: 0;
  color: var(--cp-dash-heading);
  font-size: 17px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.customer-portal.cp-signed-in .cp-dashboard-page .cp-promote-status {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  color: #b45309;
  background: #fff3e4;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.customer-portal.cp-signed-in .cp-dashboard-page .cp-promote-product-copy > p {
  margin: 5px 0 0;
  color: var(--cp-dash-text);
  font-size: 12px;
  line-height: 1.45;
}

.customer-portal.cp-signed-in .cp-dashboard-page .cp-promote-recommendation {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid #ffead5;
  border-radius: 12px;
  background: #fff8f0;
}

.customer-portal.cp-signed-in .cp-dashboard-page .cp-promote-recommendation-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  color: #ea580c;
  background: #fff0dd;
}

.customer-portal.cp-signed-in .cp-dashboard-page .cp-promote-recommendation-icon svg {
  width: 18px;
  height: 18px;
}

.customer-portal.cp-signed-in .cp-dashboard-page .cp-promote-recommendation-copy {
  min-width: 0;
}

.customer-portal.cp-signed-in .cp-dashboard-page .cp-promote-recommendation-copy strong {
  display: block;
  color: #d75b0c;
  font-size: 11px;
  line-height: 1.2;
}

.customer-portal.cp-signed-in .cp-dashboard-page .cp-promote-recommendation-copy p {
  margin: 3px 0 0;
  color: var(--cp-dash-text);
  font-size: 11px;
  line-height: 1.4;
}

.customer-portal.cp-signed-in .cp-dashboard-page .cp-promote-detail-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid #fdba74;
  border-radius: 9px;
  color: #d75b0c;
  background: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.customer-portal.cp-signed-in .cp-dashboard-page .cp-promote-detail-link:hover {
  border-color: #f97316;
  background: #fff;
  transform: translateY(-1px);
}

.customer-portal.cp-signed-in .cp-dashboard-page .cp-promote-detail-link:focus-visible {
  outline: 3px solid rgba(217, 70, 196, 0.22);
  outline-offset: 2px;
}

.customer-portal.cp-signed-in .cp-dashboard-page .cp-promote-detail-link svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 720px) {
  .customer-portal.cp-signed-in .cp-dashboard-page .cp-promote-product {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 12px;
  }

  .customer-portal.cp-signed-in .cp-dashboard-page .cp-promote-product-visual {
    width: 62px;
    height: 62px;
  }

  .customer-portal.cp-signed-in .cp-dashboard-page .cp-promote-product-heading {
    align-items: flex-start;
    flex-direction: column-reverse;
    gap: 7px;
  }

  .customer-portal.cp-signed-in .cp-dashboard-page .cp-promote-recommendation {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .customer-portal.cp-signed-in .cp-dashboard-page .cp-promote-detail-link {
    grid-column: 2;
    justify-self: start;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .customer-portal.cp-signed-in .cp-dashboard-page .cp-promote-detail-link {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cp-dashboard-page *,
  .cp-dashboard-page *::before,
  .cp-dashboard-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Slow Movers / Overstock */
.cp-slow-movers-page {
  display: grid;
  gap: 22px;
}

.cp-slow-movers-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(250px, 0.55fr);
  gap: 22px;
  align-items: stretch;
  padding: 30px;
  border: 1px solid rgba(205, 53, 190, 0.16);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 20px 52px rgba(15, 35, 68, 0.07);
}

.cp-slow-movers-hero h1 {
  margin: 10px 0;
  color: var(--cp-ink);
  font-size: 42px;
  line-height: 1.05;
  letter-spacing: 0;
}

.cp-slow-movers-hero p,
.cp-slow-movers-hero aside span {
  margin: 0;
  color: var(--cp-muted);
  font-weight: 800;
}

.cp-slow-movers-hero aside {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 20px;
  border-left: 4px solid #0d6efd;
  background: #eef7ff;
}

.cp-slow-movers-source-notice {
  display: grid;
  gap: 5px;
  padding: 16px 18px;
  border: 1px solid #cfe5ff;
  border-radius: 12px;
  background: #eef7ff;
  color: var(--cp-ink);
}

.cp-slow-movers-source-notice span {
  color: var(--cp-muted);
  font-weight: 800;
}

.cp-slow-movers-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.cp-slow-movers-kpis article {
  display: grid;
  gap: 8px;
  min-height: 112px;
  padding: 18px;
  border: 1px solid var(--cp-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(15, 35, 68, 0.05);
}

.cp-slow-movers-kpis article.is-critical {
  border-color: #f2c8d7;
  background: #fff3f7;
}

.cp-slow-movers-kpis article.is-warning {
  border-color: #f8dda5;
  background: #fff8e8;
}

.cp-slow-movers-kpis span {
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.cp-slow-movers-kpis strong {
  color: var(--cp-ink);
  font-size: 32px;
  line-height: 1;
}

.cp-slow-movers-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding: 14px;
  border: 1px solid var(--cp-border);
  border-radius: 12px;
  background: #fff;
}

.cp-slow-movers-filters a {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  padding: 7px 11px;
  border: 1px solid var(--cp-border);
  border-radius: 999px;
  color: var(--cp-ink);
  background: #fff;
  font-weight: 900;
  text-decoration: none;
}

.cp-slow-movers-filters a.active {
  border-color: rgba(205, 53, 190, 0.35);
  color: var(--ss-pink);
  background: #fff7fd;
}

.cp-slow-movers-table td {
  vertical-align: top;
}

.cp-slow-movers-table td > small {
  display: block;
  margin-top: 5px;
  color: var(--cp-muted);
  font-weight: 800;
}

.cp-slow-movers-classification,
.cp-slow-movers-campaign {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 5px 9px;
  border: 1px solid var(--cp-border);
  border-radius: 999px;
  background: #f7fbff;
  color: var(--cp-ink);
  font-size: 12px;
  font-weight: 900;
}

.cp-slow-movers-classification.is-critical {
  border-color: #f2c8d7;
  color: #9f1239;
  background: #fff3f7;
}

.cp-slow-movers-classification.is-warning {
  border-color: #f8dda5;
  color: #925700;
  background: #fff8e8;
}

.cp-slow-movers-classification.is-info {
  border-color: #cfe5ff;
  color: #15519b;
  background: #eef7ff;
}

.cp-slow-movers-classification.is-healthy {
  border-color: #bdf3d1;
  color: #08723f;
  background: #ecfff3;
}

.cp-slow-movers-campaign {
  margin-top: 7px;
  border-color: rgba(205, 53, 190, 0.25);
  color: #a51a90;
  background: #fff7fd;
}

.cp-slow-movers-recommendation {
  min-width: 220px;
  color: var(--cp-ink);
  font-weight: 800;
}

.cp-slow-movers-recommendation small {
  display: block;
  margin-top: 6px;
  color: var(--cp-muted);
}

.cp-slow-movers-actions {
  display: grid;
  gap: 7px;
  min-width: 150px;
}

.cp-slow-movers-actions a {
  color: var(--ss-pink);
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.cp-slow-movers-actions a:hover {
  text-decoration: underline;
}

@media (max-width: 980px) {
  .cp-slow-movers-hero {
    grid-template-columns: 1fr;
  }

  .cp-slow-movers-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .cp-slow-movers-hero {
    padding: 20px;
  }

  .cp-slow-movers-hero h1 {
    font-size: 32px;
  }

  .cp-slow-movers-source-notice,
  .cp-slow-movers-kpis {
    grid-template-columns: 1fr;
  }
}

/* Return Intelligence */
.cp-return-intelligence-page {
  display: grid;
  gap: 22px;
}

.cp-return-intelligence-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.55fr);
  gap: 22px;
  padding: 30px;
  border: 1px solid #d7e5f5;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 20px 52px rgba(15, 35, 68, 0.07);
}

.cp-return-intelligence-hero h1 {
  margin: 10px 0;
  color: var(--cp-ink);
  font-size: 42px;
  line-height: 1.05;
  letter-spacing: 0;
}

.cp-return-intelligence-hero p {
  margin: 0;
  color: var(--cp-muted);
  font-weight: 800;
}

.cp-return-intelligence-hero aside {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 20px;
  border-left: 4px solid #0c7a68;
  background: #effaf7;
}

.cp-return-intelligence-hero aside span,
.cp-return-intelligence-hero aside small {
  color: var(--cp-muted);
  font-weight: 800;
}

.cp-return-intelligence-notice {
  display: grid;
  gap: 5px;
  padding: 16px 18px;
  border: 1px solid #cfe5ff;
  border-radius: 12px;
  background: #eef7ff;
}

.cp-return-intelligence-notice span {
  color: var(--cp-muted);
  font-weight: 800;
}

.cp-return-intelligence-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.cp-return-intelligence-kpis article {
  display: grid;
  gap: 8px;
  min-height: 112px;
  padding: 18px;
  border: 1px solid var(--cp-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(15, 35, 68, 0.05);
}

.cp-return-intelligence-kpis article.is-critical {
  border-color: #f2c8d7;
  background: #fff3f7;
}

.cp-return-intelligence-kpis article.is-warning {
  border-color: #f8dda5;
  background: #fff8e8;
}

.cp-return-intelligence-kpis span {
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.cp-return-intelligence-kpis strong {
  color: var(--cp-ink);
  font-size: 32px;
  line-height: 1;
}

.cp-return-intelligence-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding: 14px;
  border: 1px solid var(--cp-border);
  border-radius: 12px;
  background: #fff;
}

.cp-return-intelligence-filters a {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  padding: 7px 11px;
  border: 1px solid var(--cp-border);
  border-radius: 999px;
  color: var(--cp-ink);
  background: #fff;
  font-weight: 900;
}

.cp-return-intelligence-filters a.active {
  border-color: #7bc9bc;
  color: #075f52;
  background: #effaf7;
}

.cp-return-intelligence-trend {
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--cp-border);
  border-radius: 12px;
  background: #fff;
}

.cp-return-intelligence-trend header h2,
.cp-return-intelligence-trend header p {
  margin: 0;
}

.cp-return-intelligence-trend header p {
  margin-top: 5px;
  color: var(--cp-muted);
}

.cp-return-intelligence-trend > div {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.cp-return-intelligence-trend article {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border-left: 3px solid #0c7a68;
  background: #f7fbfb;
}

.cp-return-intelligence-trend article span,
.cp-return-intelligence-trend article small {
  color: var(--cp-muted);
  overflow-wrap: anywhere;
}

.cp-return-intelligence-table td {
  vertical-align: top;
}

.cp-return-intelligence-table td > small {
  display: block;
  margin-top: 5px;
  color: var(--cp-muted);
}

.cp-return-intelligence-classification,
.cp-return-intelligence-secondary {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 5px 9px;
  border: 1px solid var(--cp-border);
  border-radius: 999px;
  background: #f7fbff;
  color: var(--cp-ink);
  font-size: 12px;
  font-weight: 900;
}

.cp-return-intelligence-classification.is-critical {
  border-color: #f2c8d7;
  color: #9f1239;
  background: #fff3f7;
}

.cp-return-intelligence-classification.is-warning {
  border-color: #f8dda5;
  color: #925700;
  background: #fff8e8;
}

.cp-return-intelligence-classification.is-info {
  border-color: #cfe5ff;
  color: #15519b;
  background: #eef7ff;
}

.cp-return-intelligence-classification.is-healthy {
  border-color: #bdf3d1;
  color: #08723f;
  background: #ecfff3;
}

.cp-return-intelligence-secondary {
  display: flex;
  width: max-content;
  margin-top: 6px;
  border-color: #d7e5f5;
  color: #3b5878;
  background: #f6f9fc;
}

.cp-return-intelligence-recommendation {
  min-width: 220px;
  color: var(--cp-ink);
  font-weight: 800;
}

.cp-return-intelligence-recommendation small {
  display: block;
  margin-top: 6px;
  color: var(--cp-muted);
}

.cp-return-intelligence-actions {
  display: grid;
  gap: 7px;
  min-width: 130px;
}

.cp-return-intelligence-actions a {
  color: #075f52;
  font-size: 13px;
  font-weight: 900;
}

.cp-return-intelligence-actions a:hover {
  text-decoration: underline;
}

@media (max-width: 980px) {
  .cp-return-intelligence-hero {
    grid-template-columns: 1fr;
  }

  .cp-return-intelligence-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cp-return-intelligence-trend > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .cp-return-intelligence-hero {
    padding: 20px;
  }

  .cp-return-intelligence-hero h1 {
    font-size: 32px;
  }

  .cp-return-intelligence-kpis,
  .cp-return-intelligence-trend > div {
    grid-template-columns: 1fr;
  }
}

.customer-portal *,
.customer-portal *::before,
.customer-portal *::after {
  box-sizing: border-box;
}

.customer-portal a {
  color: inherit;
  text-decoration: none;
}

.cp-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(3, 25, 31, 0.58);
  backdrop-filter: blur(7px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.cp-loading-overlay[hidden] {
  display: none;
}

.cp-loading-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.cp-loading-card {
  display: grid;
  justify-items: center;
  gap: 12px;
  width: min(420px, 100%);
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--cp-radius);
  background:
    radial-gradient(circle at top, rgba(217, 87, 204, 0.24), transparent 44%),
    var(--cp-navy-2);
  box-shadow: 0 24px 70px rgba(3, 25, 31, 0.34);
  color: var(--text-inverse);
  text-align: center;
}

.cp-loading-spinner {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  border: 5px solid rgba(255, 255, 255, 0.18);
  border-right-color: var(--cp-accent);
  border-bottom-color: var(--cp-accent);
  animation: cp-loading-spin 760ms linear infinite;
}

.cp-loading-card strong {
  font-size: 20px;
  line-height: 1.25;
}

.cp-loading-card small {
  color: rgba(255, 255, 255, 0.76);
  line-height: 1.45;
}

body.is-cp-loading {
  cursor: progress;
}

@keyframes cp-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.customer-portal button,
.customer-portal input,
.customer-portal select,
.customer-portal textarea {
  font: inherit;
}

.cp-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 100vh;
  background: var(--cp-bg);
}

.cp-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 22px 14px;
  background: linear-gradient(180deg, var(--cp-navy) 0%, var(--cp-navy-2) 100%);
  color: var(--text-inverse);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.cp-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  margin: 0 8px 32px;
}

.cp-brand-mark {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-inverse);
}

.cp-brand-mark svg {
  width: 34px;
  height: 34px;
  stroke-width: 2.4;
}

.cp-brand-mark img {
  width: 38px;
  height: 34px;
  object-fit: contain;
}

.cp-sidebar-brand strong {
  display: block;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.cp-sidebar-brand small {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
}

.cp-sidebar-nav {
  display: grid;
  gap: 6px;
}

.cp-sidebar-nav a {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--cp-radius-sm);
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  font-weight: 700;
}

.cp-sidebar-nav a svg {
  width: 20px;
  height: 20px;
}

.cp-sidebar-nav a:hover,
.cp-sidebar-nav a.active {
  color: var(--text-inverse);
  background: linear-gradient(90deg, rgba(217, 87, 204, 0.22), rgba(217, 87, 204, 0.08));
  border-color: rgba(217, 87, 204, 0.22);
  box-shadow: inset 3px 0 0 var(--cp-accent);
}

.cp-sidebar-help {
  display: grid;
  gap: 12px;
  margin-top: auto;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--cp-radius);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.cp-sidebar-help h3 {
  margin: 0;
  color: var(--os-accent-soft);
  font-size: 15px;
}

.cp-sidebar-help p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.5;
}

.cp-sidebar-help .cp-btn {
  width: 100%;
}

.cp-app {
  min-width: 0;
}

.cp-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 28px;
  background: var(--topbar-bg);
  color: var(--text-inverse);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cp-beta-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(217, 87, 204, 0.28);
  border-radius: var(--cp-radius-sm);
  color: var(--text-inverse);
  background: linear-gradient(135deg, rgba(217, 87, 204, 0.18), rgba(255, 255, 255, 0.045));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.cp-beta-pill span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  color: var(--text-inverse);
  background: linear-gradient(135deg, var(--cp-accent-dark), var(--cp-accent));
  font-size: 12px;
  font-weight: 900;
}

.cp-beta-pill strong {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
}

.cp-search {
  width: min(560px, 44vw);
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--cp-radius-sm);
  color: rgba(255, 255, 255, 0.76);
  background: rgba(0, 0, 0, 0.16);
}

.cp-search input {
  width: 100%;
  min-height: auto;
  padding: 0;
  border: 0;
  color: var(--text-inverse);
  background: transparent;
  outline: none;
}

.cp-search input::placeholder {
  color: rgba(255, 255, 255, 0.72);
}

.cp-search kbd {
  min-width: 40px;
  padding: 4px 8px;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.08);
  font-size: 12px;
  font-family: inherit;
  text-align: center;
}

.cp-topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.cp-owner-select,
.cp-profile-pill,
.cp-notification {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--cp-radius-sm);
  background: rgba(255, 255, 255, 0.035);
}

.cp-owner-select {
  padding: 0 14px;
  font-size: 14px;
}

.cp-owner-select svg {
  width: 18px;
  height: 18px;
}

.cp-owner-switcher {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 4px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--cp-radius-sm);
  background: rgba(255, 255, 255, 0.055);
}

.cp-owner-switcher label {
  margin: 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cp-owner-switcher select {
  width: min(280px, 28vw);
  min-height: 34px;
  padding: 0 32px 0 10px;
  border: 0;
  border-radius: 8px;
  color: var(--text-inverse);
  background: rgba(0, 0, 0, 0.18);
  font-size: 13px;
  font-weight: 800;
  outline: none;
}

.cp-owner-switcher option {
  color: var(--cp-ink);
  background: #fff;
}

.cp-notification {
  width: 42px;
  justify-content: center;
  border-color: transparent;
  background: transparent;
}

.cp-profile-pill {
  padding: 4px 10px 4px 4px;
  border-color: transparent;
  background: transparent;
}

.cp-profile-pill > span {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--text-inverse);
  background: linear-gradient(135deg, var(--cp-accent-dark), var(--cp-accent));
  font-size: 12px;
  font-weight: 900;
}

.cp-profile-pill em {
  display: grid;
  gap: 2px;
  font-style: normal;
}

.cp-profile-pill strong {
  font-size: 13px;
}

.cp-profile-pill small,
.cp-logout-link {
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
}

.cp-main {
  width: min(1640px, 100%);
  margin: 0 auto;
  padding: 28px;
}

.cp-auth-main {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  background: var(--cp-bg);
}

.cp-page-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.cp-page-intro p,
.cp-eyebrow {
  margin: 0 0 5px;
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.cp-page-intro h1 {
  margin: 0;
  color: var(--cp-ink);
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.1;
}

.cp-page-intro span {
  display: block;
  margin-top: 6px;
  color: var(--cp-muted);
  font-size: 15px;
}

.cp-page-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.cp-page-toolbar h1 {
  margin: 0;
  color: var(--cp-ink);
  font-size: 30px;
  font-weight: 900;
  line-height: 1.1;
}

.cp-page-toolbar p {
  margin: 8px 0 0;
  color: var(--cp-muted);
  font-size: 15px;
}

.cp-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.cp-year-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cp-year-tabs a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-sm);
  color: var(--cp-muted);
  background: var(--cp-card);
  font-size: 13px;
  font-weight: 800;
}

.cp-year-tabs a.active {
  color: var(--cp-accent-dark);
  border-color: color-mix(in srgb, var(--cp-accent) 38%, var(--cp-border));
  background: var(--cp-soft);
}

.cp-card,
.cp-panel,
.cp-auth-card,
.cp-kpi-card,
.cp-hero,
.cp-ticket-card,
.cp-product-row,
.cp-product-card,
.cp-month-card,
.cp-campaign-card {
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
  background: var(--cp-card);
  box-shadow: var(--cp-shadow-soft);
}

.cp-panel,
.cp-card {
  padding: 20px;
}

.cp-auth-card {
  width: min(480px, 100%);
  padding: 28px;
}

.cp-hero {
  min-height: 164px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  gap: 24px;
  align-items: center;
  padding: 26px 32px;
  background: linear-gradient(105deg, #fff 0%, #fff 48%, var(--cp-soft) 100%);
  overflow: hidden;
}

.cp-hero h2 {
  margin: 0;
  color: var(--cp-ink);
  font-size: 27px;
  font-weight: 900;
  line-height: 1.12;
}

.cp-hero p {
  max-width: 720px;
  margin: 10px 0 0;
  color: var(--cp-muted);
  font-size: 15px;
  line-height: 1.55;
}

.cp-dashboard-hero {
  position: relative;
  min-height: 176px;
  grid-template-columns: minmax(0, 660px) 1fr;
  padding: 30px 34px;
  border-color: rgba(217, 87, 204, 0.2);
  background:
    radial-gradient(circle at 82% 24%, rgba(217, 87, 204, 0.24), transparent 34%),
    radial-gradient(circle at 58% 88%, rgba(124, 58, 237, 0.12), transparent 36%),
    linear-gradient(105deg, #fff 0%, #fff7fd 48%, #f7f1ff 100%);
  box-shadow: 0 18px 44px rgba(217, 87, 204, 0.09);
  isolation: isolate;
}

.cp-dashboard-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 0 38%;
  z-index: -1;
  background:
    radial-gradient(circle, rgba(217, 87, 204, 0.32) 1px, transparent 1.4px),
    radial-gradient(circle, rgba(124, 58, 237, 0.18) 1px, transparent 1.4px);
  background-position: 0 0, 12px 12px;
  background-size: 18px 18px, 24px 24px;
  opacity: 0.62;
  mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 78%, transparent 100%);
}

.cp-dashboard-hero::after {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: -1;
  border-radius: calc(var(--cp-radius) - 3px);
  background:
    repeating-radial-gradient(ellipse at 78% 28%, rgba(217, 87, 204, 0.18) 0 1px, transparent 2px 13px);
  opacity: 0.55;
  mask-image: linear-gradient(90deg, transparent 0%, #000 42%, #000 92%);
}

.cp-hero-eyebrow {
  display: inline-flex;
  margin-bottom: 12px;
  color: var(--cp-pink, var(--cp-accent, #d957cc));
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.cp-dashboard-hero h2 {
  max-width: 760px;
  color: var(--cp-ink);
  font-size: 34px;
}

.cp-dashboard-hero p {
  color: var(--cp-muted);
}

.cp-hero-actions,
.cp-card-actions,
.cp-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.cp-hero-visual {
  min-height: 118px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.cp-visual-tile {
  width: 118px;
  min-height: 86px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
  color: var(--cp-accent-dark);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--cp-shadow-soft);
}

.cp-visual-tile svg {
  width: 38px;
  height: 38px;
}

.cp-visual-tile.is-large {
  width: 152px;
  min-height: 108px;
  color: var(--cp-accent);
}

.cp-hero-stat {
  display: grid;
  gap: 10px;
  padding: 18px;
  border-radius: var(--cp-radius);
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid var(--cp-border);
}

.cp-hero-stat span,
.cp-hero-stat small {
  color: var(--cp-muted);
}

.cp-hero-stat strong {
  color: var(--cp-ink);
  font-size: 24px;
  line-height: 1;
}

.cp-btn,
.customer-portal .cp-btn,
.customer-portal .btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.cp-btn svg {
  width: 16px;
  height: 16px;
}

.cp-btn-primary,
.customer-portal .cp-btn-primary,
.customer-portal .btn-primary {
  background: linear-gradient(135deg, var(--ss-magenta-700), var(--ss-magenta-500));
  color: white;
  box-shadow: 0 10px 24px rgba(217, 87, 204, 0.22);
}

.cp-btn-primary:hover,
.customer-portal .cp-btn-primary:hover,
.customer-portal .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(217, 87, 204, 0.3);
}

.cp-btn-primary svg,
.customer-portal .cp-btn-primary svg,
.customer-portal .btn-primary svg {
  color: currentColor;
}

.cp-btn-secondary,
.customer-portal .cp-btn-secondary,
.customer-portal .btn-secondary {
  color: var(--text-primary);
  background: white;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}

.cp-btn-danger,
.customer-portal .cp-btn-danger,
.customer-portal .btn-danger {
  color: white;
  background: linear-gradient(135deg, var(--ss-danger-dark), var(--ss-danger));
  box-shadow: 0 10px 24px rgba(220, 53, 69, 0.18);
}

.cp-btn-danger:hover,
.customer-portal .cp-btn-danger:hover,
.customer-portal .btn-danger:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(220, 53, 69, 0.24);
}

.cp-btn[disabled],
.cp-btn.is-disabled,
.customer-portal .cp-btn[disabled],
.customer-portal .cp-btn.is-disabled,
.customer-portal .btn:disabled,
.customer-portal .btn[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
  box-shadow: none;
}

.cp-kpi-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.cp-kpi-row.is-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cp-kpi-row.is-five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.cp-kpi-row.is-seven {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.cp-kpi-card {
  min-height: 104px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 18px 20px;
}

.cp-kpi-icon,
.cp-row-thumb,
.cp-timeline-icon,
.cp-campaign-icon {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: var(--cp-accent-dark);
  background: var(--cp-soft);
  flex: 0 0 auto;
}

.cp-kpi-icon svg,
.cp-row-thumb svg,
.cp-timeline-icon svg,
.cp-campaign-icon svg {
  width: 21px;
  height: 21px;
  display: block;
  stroke: currentColor;
}

.cp-kpi-icon.blue,
.cp-row-thumb.blue,
.cp-timeline-icon.blue { color: var(--cp-blue); background: var(--ss-info-bg); }
.cp-kpi-icon.green,
.cp-row-thumb.green,
.cp-timeline-icon.green { color: var(--cp-green); background: var(--ss-success-bg); }
.cp-kpi-icon.orange,
.cp-row-thumb.orange,
.cp-timeline-icon.orange { color: var(--cp-orange); background: var(--ss-warning-bg); }
.cp-kpi-icon.red,
.cp-row-thumb.red,
.cp-timeline-icon.red { color: var(--cp-red); background: var(--ss-danger-bg); }

.cp-kpi-copy span,
.cp-kpi-card > span:not(.cp-kpi-icon) {
  display: block;
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 600;
}

.cp-kpi-copy strong,
.cp-kpi-card > strong {
  display: block;
  margin: 4px 0;
  color: var(--cp-ink);
  font-size: 23px;
  font-weight: 900;
  line-height: 1;
}

.cp-kpi-copy small,
.cp-kpi-card > small {
  color: var(--cp-muted);
  font-size: 12px;
}

.cp-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.cp-panel-header h2,
.cp-panel h2,
.cp-card h2 {
  margin: 0;
  color: var(--cp-ink);
  font-size: 18px;
  font-weight: 900;
}

.cp-panel-header p,
.cp-panel p,
.cp-card p {
  color: var(--cp-muted);
  line-height: 1.5;
}

.cp-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(360px, 0.95fr);
  gap: 14px;
}

.cp-dashboard-grid.is-even {
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.75fr);
}

.cp-dashboard-grid.is-single {
  grid-template-columns: 1fr;
}

.cp-stack {
  display: grid;
  gap: 14px;
}

.cp-section-gap {
  margin-top: 14px;
}

.cp-progress {
  overflow: hidden;
  height: 9px;
  border-radius: 999px;
  background: #edf2f2;
}

.cp-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cp-accent-dark), var(--cp-accent));
}

.cp-dashboard-forecast-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(217, 87, 204, 0.16);
  background:
    radial-gradient(circle at 92% 4%, rgba(217, 87, 204, 0.12), transparent 30%),
    linear-gradient(135deg, #fff, #fffafd 58%, #faf5ff);
}

.cp-dashboard-forecast-card::after {
  content: "";
  position: absolute;
  inset: auto -80px -120px auto;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 87, 204, 0.13), transparent 68%);
  pointer-events: none;
}

.cp-dashboard-forecast-body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}

.cp-dashboard-forecast-ring {
  --forecast-progress: 0;
  width: 122px;
  height: 122px;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #fff 0 58%, transparent 59%),
    conic-gradient(var(--cp-accent) calc(var(--forecast-progress) * 1%), #edf2f2 0);
  box-shadow: 0 16px 34px rgba(217, 87, 204, 0.12);
}

.cp-dashboard-forecast-ring strong {
  color: var(--cp-ink);
  font-size: 26px;
  line-height: 1;
}

.cp-dashboard-forecast-ring span {
  margin-top: 4px;
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 700;
}

.cp-dashboard-forecast-copy {
  display: grid;
  gap: 16px;
}

.cp-dashboard-forecast-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.cp-dashboard-forecast-stats span {
  display: grid;
  gap: 4px;
  min-height: 66px;
  padding: 12px;
  border: 1px solid rgba(217, 87, 204, 0.12);
  border-radius: var(--cp-radius-sm);
  color: var(--cp-muted);
  background: rgba(255, 255, 255, 0.74);
  font-size: 12px;
}

.cp-dashboard-forecast-stats strong {
  color: var(--cp-ink);
  font-size: 18px;
  line-height: 1;
}

.cp-dashboard-forecast-card .cp-btn {
  justify-self: start;
}

.cp-dashboard-forecast-card .cp-btn-primary {
  min-width: 168px;
}

.cp-dashboard-forecast-card .cp-btn-primary svg {
  color: currentColor;
  width: 17px;
  height: 17px;
}

.cp-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cp-action-grid .cp-action-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-sm);
  color: inherit;
  background: var(--cp-card);
  text-align: left;
  cursor: pointer;
}

.cp-action-card span {
  color: var(--cp-muted);
  font-size: 13px;
}

.cp-action-card strong {
  display: block;
  margin-bottom: 2px;
}

.cp-action-card[disabled] {
  opacity: 0.62;
  cursor: not-allowed;
}

.cp-empty,
.empty-state {
  display: grid;
  place-items: center;
  min-height: 110px;
  padding: 20px;
  border: 1px dashed var(--cp-border-strong);
  border-radius: var(--cp-radius-sm);
  color: var(--cp-muted);
  background: #fbfdfd;
  text-align: center;
}

.cp-product-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.cp-product-stats div {
  padding: 12px;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-sm);
  background: #fbfdfd;
}

.cp-product-stats strong,
.cp-product-stats span {
  display: block;
}

.cp-product-stats strong {
  color: var(--cp-ink);
  font-size: 18px;
}

.cp-product-stats span {
  margin-top: 4px;
  color: var(--cp-muted);
  font-size: 12px;
}

.cp-sales-preview small {
  display: block;
  min-height: 16px;
  margin-top: 4px;
  color: var(--cp-muted);
  font-size: 11px;
}

.cp-sales-diagnostics {
  margin-top: 12px;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-sm);
  background: #fbfdfd;
}

.cp-sales-diagnostics summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  color: var(--cp-ink);
  font-weight: 800;
  cursor: pointer;
}

.cp-sales-diagnostics-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.6fr);
  gap: 14px;
  padding: 0 14px 14px;
}

.cp-sales-diagnostics h3 {
  margin: 0 0 10px;
  font-size: 14px;
}

.cp-sales-diagnostics ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-sales-diagnostics li {
  display: grid;
  grid-template-columns: 10px minmax(120px, 0.4fr) minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  color: var(--cp-muted);
  font-size: 12px;
}

.cp-sales-diagnostics li strong {
  color: var(--cp-ink);
}

.cp-source-dot {
  width: 8px;
  height: 8px;
  margin-top: 4px;
  border-radius: 999px;
  background: var(--cp-orange);
}

.cp-source-dot.is-success { background: var(--cp-green); }
.cp-source-dot.is-warning { background: var(--cp-orange); }
.cp-source-dot.is-missing { background: var(--cp-muted); }

.cp-muted {
  color: var(--cp-muted);
}

.cp-notice,
.cp-data-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
  background: var(--cp-card);
  color: var(--cp-muted);
}

.cp-data-footer {
  margin: 18px 0 0;
  color: #475569;
  font-weight: 400;
}

.cp-data-footer svg {
  width: 18px;
  height: 18px;
  color: var(--cp-blue);
}

.cp-data-footer strong {
  color: var(--cp-accent-dark);
  font-weight: 500;
}

.cp-notice.danger { color: var(--ss-danger-dark); background: var(--ss-danger-bg); }
.cp-notice.warning { color: var(--ss-warning-dark); background: var(--ss-warning-bg); }
.cp-notice.success { color: var(--ss-success-dark); background: var(--ss-success-bg); }
.cp-notice.info { color: var(--ss-navy); background: #eef7ff; border-color: #cfe6ff; }

.status-pill,
.cp-badge {
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.status-success,
.cp-badge-success,
.cp-badge.success { color: var(--ss-success-dark); background: var(--ss-success-bg); }
.status-warning,
.cp-badge-warning,
.cp-badge.warning { color: var(--ss-warning-dark); background: var(--ss-warning-bg); }
.status-danger,
.cp-badge-danger,
.cp-badge.danger { color: var(--ss-danger-dark); background: var(--ss-danger-bg); }
.status-info,
.cp-badge-info,
.cp-badge.info { color: var(--ss-info-dark); background: var(--ss-info-bg); }
.cp-badge.accent { color: var(--cp-accent-dark); background: var(--cp-soft); }

.customer-portal label {
  display: grid;
  gap: 7px;
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 700;
}

.customer-portal label small {
  color: var(--cp-muted);
  font-size: 11px;
  font-weight: 600;
}

.customer-portal input,
.customer-portal select,
.customer-portal textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--cp-border-strong);
  border-radius: var(--cp-radius-sm);
  color: var(--cp-ink);
  background: var(--cp-card);
  outline: none;
}

.customer-portal textarea {
  min-height: 102px;
  resize: vertical;
}

.customer-portal input:focus,
.customer-portal select:focus,
.customer-portal textarea:focus {
  border-color: var(--cp-accent);
  box-shadow: 0 0 0 3px rgba(217, 87, 204, 0.13);
}

.cp-login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(520px, 0.92fr) minmax(540px, 1.08fr);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 248, 251, 0.96)),
    var(--cp-bg);
  color: var(--cp-ink);
}

.cp-login-panel {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  padding: 28px 54px 30px;
  background: rgba(255, 255, 255, 0.78);
}

.cp-login-language {
  justify-self: end;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-sm);
  color: var(--cp-muted);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--cp-shadow-soft);
  font-size: 14px;
  font-weight: 700;
}

.cp-login-language svg {
  width: 18px;
  height: 18px;
}

.cp-login-card {
  width: min(560px, 100%);
  justify-self: center;
  display: grid;
  gap: 22px;
  padding: 46px 50px 42px;
  border: 1px solid var(--cp-border);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 24px 70px rgba(8, 24, 39, 0.10);
}

.cp-login-card-mark {
  width: 74px;
  height: 74px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  border: 1px solid color-mix(in srgb, var(--cp-accent) 18%, var(--cp-border));
  border-radius: 18px;
  color: var(--cp-accent);
  background: linear-gradient(135deg, #fff 0%, var(--cp-soft) 100%);
}

.cp-login-card-mark img {
  width: 43px;
  height: 38px;
  object-fit: contain;
}

.cp-login-card h1 {
  margin: 2px 0 0;
  color: var(--cp-ink);
  font-size: 30px;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
}

.cp-login-card > p {
  max-width: 360px;
  margin: -12px auto 6px;
  color: var(--cp-muted);
  font-size: 15px;
  line-height: 1.55;
  text-align: center;
}

.cp-login-form {
  display: grid;
  gap: 18px;
}

.cp-admin-login-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--cp-accent) 28%, var(--cp-border));
  border-radius: var(--cp-radius-sm);
  background: linear-gradient(135deg, rgba(217, 87, 204, 0.08), rgba(255, 255, 255, 0.82));
}

.cp-admin-login-card > div:first-child {
  display: grid;
  gap: 4px;
}

.cp-admin-login-card strong {
  color: var(--cp-ink);
  font-size: 15px;
  font-weight: 900;
}

.cp-admin-login-card span {
  color: var(--cp-muted);
  font-size: 13px;
  line-height: 1.45;
}

.cp-admin-login-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
}

.cp-admin-login-form label {
  display: grid;
  gap: 8px;
}

.cp-admin-login-form label > span {
  color: var(--cp-ink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cp-admin-login-form select {
  min-height: 44px;
  border-radius: var(--cp-radius-sm);
}

.cp-login-form label {
  gap: 8px;
}

.cp-login-form label > span:first-child {
  color: var(--cp-ink);
  font-size: 13px;
  font-weight: 800;
}

.cp-login-form input[type="email"],
.cp-login-form input[type="password"],
.cp-login-form input[type="text"] {
  min-height: 50px;
  border-radius: var(--cp-radius-sm);
  background: rgba(255, 255, 255, 0.86);
  font-size: 15px;
}

.cp-password-field {
  position: relative;
  display: block;
  min-height: 50px;
}

.cp-password-field input {
  width: 100%;
  height: 50px;
  padding-right: 48px;
}

.cp-password-field button {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--cp-radius-sm);
  color: var(--cp-muted);
  background: transparent;
  cursor: pointer;
  transform: none;
}

.cp-password-field button:hover,
.cp-password-field button:focus-visible {
  color: var(--cp-accent);
  background: var(--cp-soft);
  outline: none;
}

.cp-password-field svg {
  width: 20px;
  height: 20px;
}

.cp-login-options {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--cp-muted);
  font-size: 14px;
}

.cp-login-options a {
  color: var(--cp-accent);
  font-weight: 800;
}

.cp-login-remember {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--cp-ink);
  font-size: 14px;
  font-weight: 700;
}

.cp-login-remember input {
  width: 18px;
  height: 18px;
  min-height: 0;
  accent-color: var(--cp-accent);
}

.cp-login-submit {
  width: 100%;
}

.cp-login-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--cp-muted);
  font-size: 13px;
}

.cp-login-footer a,
.cp-footer-legal-links a {
  color: var(--cp-accent);
  font-weight: 500;
}

.cp-login-footer a::before {
  content: "";
  width: 3px;
  height: 3px;
  display: inline-block;
  margin: 0 14px 3px 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cp-accent) 52%, transparent);
}

.cp-footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: auto;
}

.cp-login-visual {
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  padding: 34px;
  background:
    linear-gradient(140deg, rgba(236, 11, 114, 0.18), transparent 28%),
    linear-gradient(180deg, #061522 0%, #081827 58%, #0b1220 100%);
  color: #fff;
  overflow: hidden;
}

.cp-login-visual-inner {
  position: relative;
  width: 100%;
  min-height: 100%;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 34px;
  padding: 18px 16px 14px;
}

.cp-login-visual-inner::before {
  content: "";
  position: absolute;
  inset: 70px 28px auto auto;
  width: 48%;
  height: 220px;
  border: 1px solid rgba(217, 70, 239, 0.16);
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(236, 11, 114, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(217, 70, 239, 0.08) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.6;
  transform: skewX(-8deg);
}

.cp-login-brand {
  position: relative;
  z-index: 1;
  width: max-content;
  display: grid;
  grid-template-columns: 56px auto;
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: center;
}

.cp-login-brand span {
  grid-row: 1 / span 2;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cp-login-brand span img {
  width: 44px;
  height: 39px;
  object-fit: contain;
}

.cp-login-brand strong {
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
}

.cp-login-brand small {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 16px;
}

.cp-login-copy {
  position: relative;
  z-index: 1;
  max-width: 650px;
  margin-top: 24px;
}

.cp-login-copy h2 {
  margin: 0;
  font-size: 40px;
  font-weight: 900;
  line-height: 1.16;
}

.cp-login-copy h2 span {
  color: var(--ss-magenta-500);
}

.cp-login-copy p {
  max-width: 560px;
  margin: 20px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 16px;
  line-height: 1.65;
}

.cp-login-feature-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: 700px;
}

.cp-login-feature-row span {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
}

.cp-login-feature-row i {
  grid-row: 1 / span 2;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #fff;
  background: rgba(126, 58, 237, 0.26);
  font-style: normal;
}

.cp-login-feature-row strong {
  font-size: 13px;
  font-weight: 900;
}

.cp-login-feature-row small {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
}

.cp-login-preview {
  position: relative;
  z-index: 1;
  align-self: end;
  min-height: 310px;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.32);
}

.cp-login-preview-sidebar {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 18px;
  background: rgba(4, 15, 28, 0.84);
}

.cp-login-preview-logo {
  width: 34px;
  height: 34px;
  display: inline-flex;
}

.cp-login-preview-logo img {
  width: 30px;
  height: 27px;
  object-fit: contain;
}

.cp-login-preview-sidebar b {
  font-size: 15px;
}

.cp-login-preview-sidebar small {
  color: rgba(255, 255, 255, 0.68);
  font-size: 11px;
}

.cp-login-preview-sidebar em {
  height: 30px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.cp-login-preview-sidebar em:first-of-type {
  background: rgba(217, 70, 239, 0.28);
  box-shadow: inset 3px 0 0 var(--ss-magenta-500);
}

.cp-login-preview-main {
  padding: 18px;
  background: #f8fafc;
  color: var(--cp-ink);
}

.cp-login-preview-top {
  height: 34px;
  margin: -18px -18px 16px;
  background: #061522;
}

.cp-login-preview-main h3 {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 900;
}

.cp-login-preview-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.cp-login-preview-kpis span,
.cp-login-preview-grid span {
  min-height: 70px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(236, 11, 114, 0.12), transparent 44%),
    #fff;
}

.cp-login-preview-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 0.9fr;
  gap: 12px;
}

.cp-login-preview-grid span {
  min-height: 122px;
}

.cp-activate-page {
  grid-template-columns: minmax(520px, 0.86fr) minmax(560px, 1.14fr);
}

.cp-activate-panel {
  align-items: stretch;
}

.cp-activate-mini-brand {
  width: max-content;
  display: inline-grid;
  grid-template-columns: 38px auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  color: var(--cp-ink);
}

.cp-activate-mini-brand span {
  grid-row: 1 / span 2;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cp-activate-mini-brand img {
  width: 31px;
  height: 28px;
  object-fit: contain;
}

.cp-activate-mini-brand strong {
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.cp-activate-mini-brand small {
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 800;
}

.cp-activate-card {
  align-self: center;
  gap: 18px;
  padding-top: 42px;
}

.cp-activate-kicker {
  justify-self: center;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--cp-accent) 22%, var(--cp-border));
  border-radius: var(--cp-radius-pill);
  color: var(--cp-accent-dark);
  background: var(--cp-soft);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cp-activation-form input[readonly] {
  color: var(--cp-ink);
  background: #f8fbfb;
  font-weight: 800;
}

.cp-activation-rules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.cp-activation-rules span {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-sm);
  color: var(--cp-muted);
  background: #fbfdfd;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.cp-activation-rules svg,
.cp-login-submit svg {
  width: 17px;
  height: 17px;
}

.cp-activate-link-button {
  text-decoration: none;
}

.cp-activate-preview {
  position: relative;
  z-index: 1;
  align-self: end;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  max-width: 760px;
}

.cp-activate-preview div {
  min-height: 170px;
  display: grid;
  align-content: end;
  gap: 8px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(217, 87, 204, 0.18), transparent 54%),
    rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.20);
}

.cp-activate-preview small {
  color: rgba(255, 255, 255, 0.64);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cp-activate-preview strong {
  color: #fff;
  font-size: 24px;
  font-weight: 900;
}

.cp-activate-preview span {
  color: rgba(255, 255, 255, 0.74);
  font-size: 14px;
  line-height: 1.45;
}

@media (max-width: 1100px) {
  .cp-login-page,
  .cp-activate-page {
    grid-template-columns: 1fr;
  }

  .cp-login-visual {
    min-height: auto;
    padding: 30px;
  }

  .cp-login-visual-inner {
    min-height: 620px;
  }
}

@media (max-width: 720px) {
  .cp-login-panel {
    min-height: auto;
    padding: 20px;
  }

  .cp-login-language {
    justify-self: start;
  }

  .cp-login-card {
    padding: 32px 22px;
  }

  .cp-login-options,
  .cp-login-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .cp-admin-login-form {
    grid-template-columns: 1fr;
  }

  .cp-login-footer a::before {
    display: none;
  }

  .cp-login-visual {
    padding: 20px;
  }

  .cp-login-visual-inner {
    min-height: 560px;
    padding: 8px;
  }

  .cp-login-copy h2 {
    font-size: 30px;
  }

  .cp-login-feature-row {
    grid-template-columns: 1fr;
  }

  .cp-login-preview {
    grid-template-columns: 1fr;
  }

  .cp-login-preview-sidebar {
    display: none;
  }

  .cp-activation-rules,
  .cp-activate-preview {
    grid-template-columns: 1fr;
  }
}

/* CP designrunde 2026-07: lys Shipshark kundeportal shell. */
.customer-portal {
  --cp-navy: #071a3d;
  --cp-blue: #2563eb;
  --cp-blue-dark: #1645bd;
  --cp-blue-soft: #eaf3ff;
  --cp-sky: #f4f9ff;
  --cp-bg: #f7fbff;
  --cp-card: #ffffff;
  --cp-ink: #081735;
  --cp-muted: #60708a;
  --cp-soft: #eef6ff;
  --cp-accent: #2563eb;
  --cp-accent-dark: #1645bd;
  --cp-pink: #d946b8;
  --cp-border: #dce8f6;
  --cp-border-strong: #c8d8ea;
  --cp-radius: 18px;
  --cp-radius-sm: 12px;
  --cp-shadow: 0 22px 55px rgba(8, 23, 53, 0.10);
  --cp-shadow-soft: 0 10px 28px rgba(8, 23, 53, 0.07);
  background:
    radial-gradient(circle at 8% -4%, rgba(37, 99, 235, 0.10), transparent 34%),
    linear-gradient(180deg, #fbfdff 0%, var(--cp-bg) 42%, #ffffff 100%);
  color: var(--cp-ink);
}

.cp-shell {
  display: block;
  min-height: 100vh;
  background: transparent;
}

.cp-app {
  min-width: 0;
}

.cp-topbar {
  position: sticky;
  top: 0;
  z-index: 80;
  height: auto;
  min-height: 76px;
  display: block;
  padding: 0;
  color: var(--cp-ink);
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(220, 232, 246, 0.94);
  box-shadow: 0 8px 30px rgba(8, 23, 53, 0.05);
  backdrop-filter: blur(18px);
}

.cp-topbar-inner {
  width: min(1760px, 100%);
  min-height: 76px;
  display: grid;
  grid-template-columns: max-content minmax(360px, 1fr) minmax(280px, 460px) max-content;
  gap: 18px;
  align-items: center;
  margin: 0 auto;
  padding: 12px 28px;
}

.cp-topbar-brand,
.cp-sidebar-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: max-content;
  margin: 0;
  color: var(--cp-ink);
}

.cp-brand-mark {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cp-brand-mark img {
  width: 38px;
  height: 34px;
  object-fit: contain;
}

.cp-topbar-brand strong,
.cp-sidebar-brand strong {
  display: block;
  color: var(--cp-ink);
  font-size: 21px;
  font-weight: 900;
  line-height: 1;
}

.cp-topbar-brand small,
.cp-sidebar-brand small {
  display: block;
  margin-top: 3px;
  color: var(--cp-blue);
  font-size: 12px;
  font-weight: 800;
}

.cp-sidebar {
  position: static;
  height: auto;
  display: contents;
  padding: 0;
  background: transparent;
  color: inherit;
  border: 0;
}

.cp-sidebar-help,
.cp-sidebar-brand {
  display: none;
}

.cp-topnav,
.cp-sidebar-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.cp-topnav::-webkit-scrollbar,
.cp-sidebar-nav::-webkit-scrollbar {
  display: none;
}

.cp-topnav a,
.cp-sidebar-nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #24324d;
  background: transparent;
  box-shadow: none;
  font-size: 14px;
  font-weight: 800;
}

.cp-topnav a svg,
.cp-sidebar-nav a svg {
  width: 18px;
  height: 18px;
}

.cp-topnav a:hover,
.cp-topnav a.active,
.cp-sidebar-nav a:hover,
.cp-sidebar-nav a.active {
  color: var(--cp-blue-dark);
  border-color: #cfe0f7;
  background: linear-gradient(180deg, #ffffff, var(--cp-blue-soft));
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.10);
}

.cp-topbar-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.cp-search {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid var(--cp-border);
  border-radius: 14px;
  color: var(--cp-muted);
  background: #f9fbff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.80);
}

.cp-search svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.cp-search input {
  width: 100%;
  min-height: auto;
  padding: 0;
  border: 0;
  color: var(--cp-ink);
  background: transparent;
  outline: none;
}

.cp-search input::placeholder {
  color: #8090a8;
}

.cp-search kbd {
  min-width: 38px;
  padding: 4px 8px;
  border: 1px solid var(--cp-border);
  border-radius: 8px;
  color: #708098;
  background: #fff;
  font-size: 12px;
  font-family: inherit;
  text-align: center;
}

.cp-notification {
  position: relative;
  width: 44px;
  height: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--cp-border);
  border-radius: 999px;
  color: var(--cp-ink);
  background: #fff;
  cursor: default;
}

.cp-notification svg {
  width: 19px;
  height: 19px;
}

.cp-notification span {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 9px;
  height: 9px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--cp-pink);
}

.cp-topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.cp-owner-switcher {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 4px 12px;
  border: 1px solid var(--cp-border);
  border-radius: 14px;
  background: #fff;
}

.cp-owner-switcher label {
  margin: 0;
  color: var(--cp-muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.cp-owner-switcher select {
  width: min(260px, 24vw);
  min-height: 34px;
  padding: 0 30px 0 9px;
  border: 0;
  border-radius: 10px;
  color: var(--cp-ink);
  background: var(--cp-sky);
  font-size: 13px;
  font-weight: 800;
}

.cp-profile-pill {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 11px 4px 5px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--cp-ink);
  background: transparent;
}

.cp-profile-pill:hover {
  border-color: var(--cp-border);
  background: #fff;
}

.cp-profile-pill > span,
.cp-profile-pill .cp-avatar {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #0ea5a6, var(--cp-blue));
  font-size: 12px;
  font-weight: 900;
}

.cp-profile-pill em {
  display: grid;
  gap: 2px;
  min-width: 0;
  font-style: normal;
}

.cp-profile-pill strong {
  max-width: 190px;
  overflow: hidden;
  color: var(--cp-ink);
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-profile-pill small,
.cp-logout-link {
  color: var(--cp-muted);
  font-size: 12px;
}

.cp-profile-pill svg {
  width: 16px;
  height: 16px;
  color: var(--cp-muted);
}

.cp-logout-link {
  min-width: max-content;
  font-weight: 800;
}

.cp-main {
  width: min(1660px, 100%);
  margin: 0 auto;
  padding: 34px 28px 28px;
}

.cp-page-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.cp-page-intro p,
.cp-eyebrow {
  margin: 0 0 7px;
  color: var(--cp-blue);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.cp-page-intro h1,
.cp-page-toolbar h1 {
  margin: 0;
  color: var(--cp-ink);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 900;
  line-height: 1.04;
}

.cp-page-intro span,
.cp-page-toolbar p {
  display: block;
  margin-top: 8px;
  color: var(--cp-muted);
  font-size: 16px;
  line-height: 1.55;
}

.cp-card,
.cp-panel,
.cp-kpi-card,
.cp-hero,
.cp-ticket-card,
.cp-product-row,
.cp-product-card,
.cp-month-card,
.cp-campaign-card {
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--cp-shadow-soft);
}

.cp-panel,
.cp-card {
  padding: 22px;
}

.cp-dashboard-hero {
  position: relative;
  min-height: 280px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1fr);
  gap: 26px;
  align-items: center;
  padding: 46px 54px;
  overflow: hidden;
  border-color: #d9e8fb;
  border-radius: 24px;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.96) 0%, rgba(244, 249, 255, 0.96) 56%, rgba(232, 243, 255, 0.95) 100%);
  box-shadow: 0 26px 70px rgba(37, 99, 235, 0.11);
}

.cp-dashboard-hero-copy {
  position: relative;
  z-index: 2;
}

.cp-hero-eyebrow {
  display: inline-flex;
  margin-bottom: 14px;
  color: var(--cp-blue-dark);
  font-size: 18px;
  font-weight: 800;
  text-transform: none;
}

.cp-dashboard-hero h2 {
  max-width: 760px;
  margin: 0;
  color: var(--cp-ink);
  font-size: clamp(42px, 5vw, 70px);
  font-weight: 900;
  line-height: 0.98;
}

.cp-dashboard-hero p {
  max-width: 650px;
  margin: 18px 0 0;
  color: #31415f;
  font-size: 18px;
  line-height: 1.62;
}

.cp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.cp-dashboard-hero-visual {
  position: relative;
  min-height: 220px;
}

.cp-parcel-scene {
  position: absolute;
  inset: -20px 0 -16px 0;
}

.cp-scene-platform,
.cp-scene-box,
.cp-scene-chart,
.cp-scene-card,
.cp-scene-cloud {
  position: absolute;
  display: block;
}

.cp-scene-platform {
  right: 8%;
  bottom: 26px;
  width: 56%;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(37, 99, 235, 0.22), rgba(37, 99, 235, 0.04) 60%, transparent 72%);
}

.cp-scene-box {
  right: 21%;
  bottom: 60px;
  width: 230px;
  height: 150px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.28), transparent 36%),
    linear-gradient(145deg, #d99a52, #b86d2e);
  box-shadow: 0 32px 60px rgba(79, 49, 19, 0.18);
  transform: rotate(-2deg);
}

.cp-scene-box::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  width: 100%;
  height: 1px;
  background: rgba(93, 52, 17, 0.24);
}

.cp-scene-box img {
  position: absolute;
  left: 78px;
  top: 55px;
  width: 72px;
  height: 64px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(10%) sepia(63%) saturate(1554%) hue-rotate(198deg) brightness(92%) contrast(98%);
}

.cp-scene-chart {
  right: 6%;
  top: 38px;
  width: 190px;
  height: 130px;
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0.30)),
    repeating-linear-gradient(90deg, rgba(37, 99, 235, 0.10) 0 2px, transparent 2px 34px);
}

.cp-scene-chart::after {
  content: "";
  position: absolute;
  inset: 32px 26px;
  border-top: 4px solid #60a5fa;
  border-right: 4px solid #60a5fa;
  transform: skewY(-18deg);
}

.cp-scene-card {
  left: 11%;
  bottom: 56px;
  width: 150px;
  height: 96px;
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: var(--cp-shadow-soft);
}

.cp-scene-cloud.one {
  right: 42%;
  top: 22px;
  width: 150px;
  height: 70px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.70);
}

.cp-scene-cloud.two {
  right: 2%;
  bottom: 70px;
  width: 110px;
  height: 54px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
}

.cp-status-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.cp-status-strip article {
  min-height: 86px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
  background: #fff;
  box-shadow: var(--cp-shadow-soft);
}

.cp-status-strip svg,
.cp-status-dot {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 999px;
  color: var(--cp-blue);
  background: var(--cp-blue-soft);
}

.cp-status-dot::after {
  content: "";
  width: 13px;
  height: 13px;
  border-radius: inherit;
  background: var(--ss-warning);
}

.cp-status-dot.is-ready::after {
  background: var(--ss-success);
}

.cp-status-strip strong,
.cp-status-strip small {
  display: block;
}

.cp-status-strip strong {
  color: var(--cp-ink);
  font-size: 15px;
  font-weight: 900;
}

.cp-status-strip small {
  margin-top: 3px;
  color: var(--cp-muted);
  font-size: 12px;
  line-height: 1.3;
}

.cp-kpi-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}

.cp-kpi-row.is-five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.cp-kpi-card {
  min-height: 126px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 20px;
}

.cp-kpi-icon,
.cp-row-thumb,
.cp-timeline-icon,
.cp-campaign-icon {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  color: var(--cp-blue);
  background: var(--cp-blue-soft);
}

.cp-kpi-copy strong,
.cp-kpi-card > strong {
  font-size: 28px;
  letter-spacing: 0;
}

.cp-kpi-copy span,
.cp-kpi-copy small {
  line-height: 1.35;
}

.cp-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 28px 0 14px;
}

.cp-section-heading h2 {
  margin: 6px 0 0;
  color: var(--cp-ink);
  font-size: 26px;
  font-weight: 900;
}

.cp-section-heading > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--cp-blue-dark);
  font-size: 14px;
  font-weight: 900;
}

.cp-section-heading > a svg {
  width: 16px;
  height: 16px;
}

.cp-section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cp-blue-dark);
  font-size: 14px;
  font-weight: 900;
}

.cp-section-kicker svg {
  width: 18px;
  height: 18px;
}

.cp-recommendation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.cp-recommendation-card {
  min-height: 210px;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
  background: #fff;
  box-shadow: var(--cp-shadow-soft);
}

.cp-recommendation-icon {
  width: 66px;
  height: 66px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--cp-blue);
  background: var(--cp-blue-soft);
}

.cp-recommendation-icon svg {
  width: 30px;
  height: 30px;
}

.cp-recommendation-card.is-danger .cp-recommendation-icon { color: #dc2626; background: #fee2e2; }
.cp-recommendation-card.is-warning .cp-recommendation-icon { color: #ea580c; background: #ffedd5; }
.cp-recommendation-card.is-support .cp-recommendation-icon { color: #0f766e; background: #dff7f1; }

.cp-recommendation-label {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--cp-blue-dark);
  background: var(--cp-blue-soft);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.cp-recommendation-card.is-danger .cp-recommendation-label { color: #b91c1c; background: #fee2e2; }
.cp-recommendation-card.is-warning .cp-recommendation-label { color: #c2410c; background: #ffedd5; }
.cp-recommendation-card.is-support .cp-recommendation-label { color: #0f766e; background: #dff7f1; }

.cp-recommendation-card h3 {
  margin: 12px 0 0;
  color: var(--cp-ink);
  font-size: 18px;
  font-weight: 900;
}

.cp-recommendation-card p {
  margin: 8px 0 18px;
  color: var(--cp-muted);
  font-size: 14px;
  line-height: 1.55;
}

.cp-btn,
.customer-portal .cp-btn,
.customer-portal .btn {
  min-height: 44px;
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 900;
}

.cp-btn-primary,
.customer-portal .cp-btn-primary,
.customer-portal .btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--cp-blue), var(--cp-blue-dark));
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.24);
}

.cp-btn-primary:hover,
.customer-portal .cp-btn-primary:hover,
.customer-portal .btn-primary:hover {
  box-shadow: 0 18px 38px rgba(37, 99, 235, 0.30);
}

.cp-btn-secondary,
.customer-portal .cp-btn-secondary,
.customer-portal .btn-secondary,
.cp-btn-ghost {
  color: var(--cp-ink);
  background: #fff;
  border: 1px solid var(--cp-border);
  box-shadow: var(--cp-shadow-soft);
}

.cp-btn-ghost {
  color: var(--cp-blue-dark);
  background: rgba(255, 255, 255, 0.62);
}

.cp-dashboard-grid {
  grid-template-columns: minmax(0, 1.42fr) minmax(340px, 0.58fr);
  gap: 16px;
}

.cp-dashboard-grid.is-even {
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
}

.cp-dashboard-forecast-card {
  border-color: var(--cp-border);
  background:
    radial-gradient(circle at 92% 4%, rgba(37, 99, 235, 0.10), transparent 30%),
    linear-gradient(135deg, #fff, #f5faff 70%, #eef6ff);
}

.cp-progress span {
  background: linear-gradient(90deg, #0ea5a6, var(--cp-blue));
}

.cp-dashboard-forecast-ring {
  background:
    radial-gradient(circle at center, #fff 0 58%, transparent 59%),
    conic-gradient(var(--cp-blue) calc(var(--forecast-progress) * 1%), #e7eef8 0);
  box-shadow: 0 16px 34px rgba(37, 99, 235, 0.14);
}

.cp-data-footer {
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 22px 0 0;
  padding: 18px 20px;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--cp-shadow-soft);
}

.cp-footer-brand {
  display: grid;
  gap: 4px;
}

.cp-footer-brand strong {
  color: var(--cp-ink);
  font-size: 14px;
  font-weight: 900;
}

.cp-footer-brand span {
  color: var(--cp-muted);
  font-size: 13px;
  line-height: 1.4;
}

.cp-footer-brand em {
  color: var(--cp-blue-dark);
  font-style: normal;
  font-weight: 900;
}

.cp-footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 14px;
  margin-left: 0;
}

.cp-footer-legal-links a {
  color: var(--cp-blue-dark);
  font-size: 13px;
  font-weight: 800;
}

@media (max-width: 1380px) {
  .cp-topbar-inner {
    grid-template-columns: max-content minmax(320px, 1fr) max-content;
  }

  .cp-topbar-tools {
    grid-column: 2 / 3;
    grid-row: 2;
    justify-content: flex-start;
  }

  .cp-topbar-actions {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .cp-search {
    max-width: 560px;
  }
}

@media (max-width: 1100px) {
  .cp-topbar-inner {
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 12px 18px;
  }

  .cp-topnav {
    grid-column: 1 / -1;
    order: 3;
    width: 100%;
    padding-bottom: 2px;
  }

  .cp-topbar-tools {
    grid-column: 1 / -1;
    grid-row: auto;
    order: 4;
  }

  .cp-topbar-actions {
    grid-column: 2;
    grid-row: 1;
  }

  .cp-owner-switcher,
  .cp-profile-pill em,
  .cp-logout-link {
    display: none;
  }

  .cp-main {
    padding: 24px 18px;
  }

  .cp-dashboard-hero,
  .cp-dashboard-grid,
  .cp-dashboard-grid.is-even,
  .cp-products-layout,
  .cp-support-layout,
  .cp-help-layout,
  .cp-forecast-layout,
  .cp-campaign-layout,
  .cp-chat-shell,
  .cp-support-workspace {
    grid-template-columns: 1fr;
  }

  .cp-status-strip,
  .cp-kpi-row,
  .cp-kpi-row.is-four,
  .cp-kpi-row.is-five,
  .cp-kpi-row.is-seven {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cp-recommendation-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .cp-topbar-brand small {
    display: none;
  }

  .cp-topnav a {
    min-height: 40px;
    padding: 0 11px;
    font-size: 13px;
  }

  .cp-topnav a svg {
    width: 17px;
    height: 17px;
  }

  .cp-notification,
  .cp-search kbd {
    display: none;
  }

  .cp-dashboard-hero {
    min-height: auto;
    grid-template-columns: 1fr;
    padding: 30px 22px;
    border-radius: 18px;
  }

  .cp-dashboard-hero h2 {
    font-size: 42px;
  }

  .cp-dashboard-hero p {
    font-size: 16px;
  }

  .cp-dashboard-hero-visual {
    min-height: 165px;
  }

  .cp-scene-box {
    right: 17%;
    width: 170px;
    height: 112px;
  }

  .cp-scene-box img {
    left: 58px;
    top: 40px;
    width: 54px;
    height: 48px;
  }

  .cp-status-strip,
  .cp-kpi-row,
  .cp-kpi-row.is-four,
  .cp-kpi-row.is-five,
  .cp-kpi-row.is-seven,
  .cp-product-stats,
  .cp-dashboard-forecast-stats,
  .cp-action-grid {
    grid-template-columns: 1fr;
  }

  .cp-dashboard-forecast-body,
  .cp-recommendation-card {
    grid-template-columns: 1fr;
  }

  .cp-section-heading,
  .cp-data-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .cp-footer-legal-links {
    justify-content: flex-start;
  }

  .cp-product-row {
    min-width: 760px;
  }

  .cp-product-table {
    overflow-x: auto;
  }
}

.cp-filter-bar,
.cp-products-toolbar,
.cp-sales-basis-form {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) repeat(4, minmax(150px, 190px));
  gap: 12px;
  align-items: end;
}

.cp-products-filter-panel {
  margin-bottom: 18px;
}

.cp-products-toolbar {
  grid-template-columns: minmax(280px, 1fr) repeat(3, minmax(145px, 190px)) auto auto;
}

.cp-products-toolbar .cp-btn {
  min-height: 42px;
  white-space: nowrap;
}

.cp-products-layout,
.cp-support-layout,
.cp-help-layout,
.cp-forecast-layout,
.cp-campaign-layout,
.cp-chat-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 0.45fr);
  gap: 14px;
}

.cp-support-workspace {
  display: grid;
  grid-template-columns: minmax(330px, 0.54fr) minmax(0, 1fr) minmax(300px, 0.42fr);
  gap: 14px;
}

.cp-ticket-list,
.cp-product-list,
.cp-low-list,
.cp-campaign-list,
.cp-help-guide-list,
.cp-timeline {
  display: grid;
  gap: 10px;
}

.cp-tabs {
  display: flex;
  gap: 14px;
  margin: 12px 0 14px;
  border-bottom: 1px solid var(--cp-border);
}

.cp-tabs a,
.cp-tabs button {
  min-height: 34px;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--cp-muted);
  background: transparent;
  font-weight: 700;
  cursor: pointer;
}

.cp-tabs a.active,
.cp-tabs button.active {
  color: var(--cp-accent-dark);
  border-bottom-color: var(--cp-accent);
}

.cp-ticket-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: var(--cp-radius);
}

.cp-ticket-card.is-active,
.cp-ticket-card:hover {
  border-color: var(--cp-accent);
  box-shadow: 0 12px 32px rgba(217, 87, 204, 0.12);
}

.cp-ticket-card header,
.cp-product-row,
.cp-campaign-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cp-help-hero {
  margin-bottom: 18px;
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: center;
}

.cp-help-hero .cp-hero-actions {
  align-items: center;
}

.cp-help-hero .cp-hero-visual {
  justify-content: center;
  min-height: 126px;
}

.cp-help-hero .cp-visual-tile {
  width: 98px;
  min-height: 86px;
  border-color: rgba(217, 87, 204, 0.14);
  background: rgba(255, 255, 255, 0.8);
}

.cp-help-hero .cp-visual-tile.is-large {
  width: 118px;
  min-height: 104px;
}

.cp-help-hero .cp-visual-tile svg {
  width: 34px;
  height: 34px;
}

.cp-help-guide {
  display: grid;
  gap: 14px;
}

.cp-forecast-manual {
  gap: 22px;
}

.cp-help-callout {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: var(--cp-radius);
  background: linear-gradient(135deg, #fff, var(--cp-soft));
}

.cp-help-callout > strong,
.cp-help-section h3 {
  margin: 0;
  color: var(--cp-ink);
  font-size: 16px;
}

.cp-help-section {
  display: grid;
  gap: 12px;
}

.cp-help-recipe {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cp-help-recipe article,
.cp-help-definition-grid div,
.cp-help-table div,
.cp-help-example {
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-sm);
  background: #fbfdfd;
}

.cp-help-recipe article {
  padding: 14px;
}

.cp-help-recipe strong,
.cp-help-table strong,
.cp-help-definition-grid strong {
  display: block;
  color: var(--cp-ink);
}

.cp-help-recipe p,
.cp-help-example p {
  margin: 7px 0 0;
  color: var(--cp-muted);
  line-height: 1.55;
}

.cp-help-definition-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cp-help-definition-grid div {
  padding: 13px;
}

.cp-help-definition-grid span {
  display: block;
  margin-top: 5px;
  color: var(--cp-muted);
  font-size: 13px;
  line-height: 1.45;
}

.cp-help-table {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-sm);
}

.cp-help-table div {
  display: grid;
  grid-template-columns: minmax(150px, 0.3fr) minmax(0, 1fr);
  gap: 14px;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--cp-border);
  border-radius: 0;
}

.cp-help-table div:last-child {
  border-bottom: 0;
}

.cp-help-table span {
  color: var(--cp-muted);
  font-size: 13px;
  line-height: 1.5;
}

.cp-help-example {
  display: grid;
  gap: 10px;
  padding: 15px;
}

.cp-help-example p {
  margin: 0;
}

.cp-help-steps,
.cp-help-checklist {
  display: grid;
  gap: 9px;
  margin: 0;
  padding-left: 22px;
  color: var(--cp-muted);
  line-height: 1.6;
}

.cp-help-steps li::marker,
.cp-help-checklist li::marker {
  color: var(--cp-accent-dark);
  font-weight: 900;
}

.cp-help-status-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.cp-help-status-list div {
  padding: 12px;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-sm);
  background: #fbfdfd;
}

.cp-help-status-list strong,
.cp-help-status-list span {
  display: block;
}

.cp-help-status-list span {
  margin-top: 4px;
  color: var(--cp-muted);
  font-size: 13px;
  line-height: 1.45;
}

.cp-help-data-note {
  background: linear-gradient(135deg, var(--cp-card), var(--cp-soft));
}

.cp-ticket-card strong,
.cp-product-name,
.cp-campaign-card strong {
  color: var(--cp-ink);
}

.cp-ticket-card p {
  margin: 0;
  color: var(--cp-muted);
  font-size: 13px;
  line-height: 1.45;
}

.cp-ticket-meta,
.cp-product-meta,
.cp-campaign-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  color: var(--cp-muted);
  font-size: 12px;
}

.cp-chat-panel {
  display: flex;
  flex-direction: column;
  min-height: 620px;
}

.cp-chat-thread {
  flex: 1;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 16px;
  overflow: auto;
  background: linear-gradient(180deg, #fff, #fbfdfd);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-sm);
}

.cp-message-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.cp-message-row.from-customer {
  justify-content: flex-end;
}

.cp-message-avatar {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  border-radius: 999px;
  color: var(--text-inverse);
  background: linear-gradient(135deg, var(--cp-accent-dark), var(--cp-accent));
  font-size: 12px;
  font-weight: 900;
}

.cp-message-bubble {
  max-width: min(680px, 78%);
  padding: 14px 16px;
  border: 1px solid var(--cp-border);
  border-radius: 14px;
  background: var(--cp-card);
  box-shadow: var(--cp-shadow-soft);
}

.cp-message-row.from-customer .cp-message-bubble {
  background: var(--cp-soft);
  border-color: color-mix(in srgb, var(--cp-accent) 28%, var(--cp-border));
}

.cp-message-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--cp-muted);
  font-size: 12px;
}

.cp-message-head strong {
  color: var(--cp-ink);
}

.cp-message-bubble p {
  margin: 0;
  color: var(--cp-ink);
  font-size: 14px;
  line-height: 1.55;
}

.cp-attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.cp-attachment-pill {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-sm);
  background: rgba(255, 255, 255, 0.82);
  color: var(--cp-ink);
  font-size: 12px;
}

.cp-composer {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-sm);
  background: var(--cp-card);
}

.cp-emoji-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cp-emoji-row button {
  width: 30px;
  height: 30px;
  border: 1px solid var(--cp-border);
  border-radius: 999px;
  background: var(--cp-card);
  cursor: pointer;
}

.cp-product-table {
  overflow: hidden;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
  background: var(--cp-card);
}

.cp-product-row {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 130px 120px 120px 130px 36px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--cp-border);
  align-items: center;
}

.cp-product-row:last-child {
  border-bottom: 0;
}

.cp-product-row.is-head {
  min-height: 44px;
  color: var(--cp-muted);
  background: #fbfdfd;
  font-size: 12px;
  font-weight: 700;
}

.cp-table-sort {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: inherit;
  text-decoration: none;
}

.cp-table-sort small {
  color: var(--cp-muted);
  font-size: 11px;
}

.cp-table-sort.is-active {
  color: var(--cp-accent-dark);
}

.cp-product-title {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.cp-product-thumb {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--cp-accent-dark);
  background: var(--cp-soft);
}

.cp-product-title small,
.cp-product-row small {
  color: var(--cp-muted);
}

.cp-product-name {
  display: block;
  font-weight: 500;
}

.cp-product-value {
  display: grid;
  gap: 4px;
  align-content: center;
  color: var(--cp-ink);
  font-weight: 500;
}

.cp-product-title {
  color: var(--cp-ink);
  text-decoration: none;
}

.cp-product-value.success { color: var(--ss-success-dark); }
.cp-product-value.warning { color: var(--ss-warning-dark); }
.cp-product-value.danger { color: var(--ss-danger-dark); }
.cp-product-value.muted { color: var(--cp-muted); }

.cp-low-item,
.cp-timeline-item,
.cp-campaign-mini {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--cp-border);
}

.cp-low-item:last-child,
.cp-timeline-item:last-child,
.cp-campaign-mini:last-child {
  border-bottom: 0;
}

.cp-timeline-item strong,
.cp-low-item strong {
  display: block;
  margin-bottom: 3px;
  font-weight: 500;
}

.cp-timeline-item span,
.cp-low-item span,
.cp-campaign-mini span {
  color: var(--cp-muted);
  font-size: 12px;
}

.cp-adjustments-timeline .cp-timeline-item {
  grid-template-columns: minmax(0, 1fr) max-content;
  grid-template-areas:
    "title amount"
    "meta amount";
  column-gap: 20px;
  row-gap: 4px;
  align-items: center;
}

.cp-adjustments-timeline .cp-timeline-item > strong {
  grid-area: title;
  min-width: 0;
  margin-bottom: 0;
}

.cp-adjustments-timeline .cp-timeline-item > span {
  grid-area: meta;
  min-width: 0;
}

.cp-adjustments-timeline .cp-timeline-item > small {
  grid-area: amount;
  white-space: nowrap;
  text-align: right;
}

.cp-timeline-amount {
  justify-self: end;
  min-width: max-content;
  font-weight: 600;
  line-height: 1.25;
}

.cp-timeline-amount small {
  display: block;
  margin-top: 2px;
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 500;
}

.cp-timeline-amount.positive { color: var(--ss-success-dark); }
.cp-timeline-amount.negative { color: var(--ss-danger-dark); }

.cp-month-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.cp-month-card {
  position: relative;
  display: grid;
  gap: 13px;
  min-height: 136px;
  padding: 18px 18px 16px;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.cp-forecast-toolbar {
  align-items: center;
  padding: 6px 2px 8px;
}

.cp-forecast-toolbar h1 {
  font-size: 34px;
}

.cp-forecast-toolbar {
  align-items: center;
}

.cp-forecast-toolbar .cp-toolbar-actions {
  align-items: center;
  gap: 14px;
}

.cp-forecast-meta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.cp-forecast-meta .status-pill {
  min-height: 34px;
  padding: 0 15px;
  color: #2563eb;
  background: #eaf2ff;
  font-size: 13px;
  font-weight: 800;
}

.cp-last-updated {
  display: grid;
  gap: 4px;
  color: #475569;
  font-size: 14px;
  line-height: 1.25;
}

.cp-last-updated span {
  white-space: nowrap;
}

.cp-last-updated small {
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 500;
}

.cp-year-select-form {
  margin: 0;
}

.cp-year-select {
  position: relative;
  display: inline-flex;
  margin: 0;
}

.cp-year-select span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.cp-year-select select {
  min-height: 42px;
  min-width: 98px;
  padding: 0 38px 0 14px;
  border: 1px solid var(--cp-border);
  border-radius: 10px;
  color: var(--cp-ink);
  background: #fff;
  font-weight: 850;
  cursor: pointer;
  appearance: none;
}

.cp-year-select::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid #64748b;
  border-bottom: 2px solid #64748b;
  pointer-events: none;
  transform: translateY(-65%) rotate(45deg);
}

.cp-forecast-toolbar .cp-btn {
  min-width: 150px;
}

.cp-campaign-toolbar .cp-btn,
.cp-campaign-toolbar .cp-year-select select {
  min-height: 42px;
  border-radius: var(--radius-sm);
}

.cp-campaign-new-btn {
  min-width: 170px;
  padding-inline: 20px;
}

.cp-campaign-new-btn svg {
  color: currentColor;
  stroke: currentColor;
}

.cp-forecast-kpis {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  margin: 10px 0 18px;
  padding: 16px;
  border: 1px solid var(--cp-border);
  border-radius: 10px;
  background: var(--cp-card);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
}

.cp-forecast-kpis .cp-kpi-card {
  min-height: 76px;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  padding: 8px 18px;
  border: 0;
  border-right: 1px solid var(--cp-border);
  border-radius: 0;
  box-shadow: none;
}

.cp-forecast-kpis .cp-kpi-card:last-child {
  border-right: 0;
}

.cp-forecast-kpis .cp-kpi-icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  line-height: 0;
}

.cp-forecast-kpis .cp-kpi-icon svg {
  width: 18px;
  height: 18px;
  display: block;
  flex: 0 0 auto;
}

.cp-forecast-kpis .cp-kpi-copy span {
  font-size: 12px;
  font-weight: 500;
}

.cp-forecast-kpis .cp-kpi-copy strong {
  margin: 6px 0 5px;
  font-size: 21px;
  line-height: 1.05;
}

.cp-kpi-trend {
  display: inline-flex;
  align-items: center;
  min-height: 15px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.cp-kpi-trend.is-up { color: var(--ss-success-dark); }
.cp-kpi-trend.is-down { color: var(--ss-danger-dark); }
.cp-kpi-trend.is-flat,
.cp-kpi-trend.is-muted { color: var(--cp-muted); }

.forecast-kpi.is-purple .cp-kpi-icon { color: #7c3aed; background: #f1eaff; }
.forecast-kpi.is-orange .cp-kpi-icon { color: #f97316; background: #fff1e7; }
.forecast-kpi.is-blue .cp-kpi-icon { color: #2563eb; background: #eaf1ff; }
.forecast-kpi.is-red .cp-kpi-icon { color: #f43f5e; background: #ffe9ef; }
.forecast-kpi.is-green .cp-kpi-icon { color: #16a34a; background: #e8f8ee; }
.forecast-kpi.is-violet .cp-kpi-icon { color: #8b5cf6; background: #f1eaff; }
.forecast-kpi.is-pink .cp-kpi-icon { color: #ec4899; background: #ffeaf4; }

.cp-month-card.is-focused,
.cp-month-card.is-active,
.cp-month-card:hover {
  border-color: var(--cp-accent);
  box-shadow: 0 16px 34px rgba(124, 58, 237, 0.12);
}

.cp-month-card:hover {
  transform: translateY(-1px);
}

.cp-month-card.is-active {
  background: linear-gradient(145deg, #fff, #fbf7ff);
}

.cp-month-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cp-month-card h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 900;
}

.cp-month-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cp-border);
}

.cp-month-stat {
  min-width: 0;
}

.cp-month-stat span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--cp-muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.cp-month-stat span svg {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
}

.cp-month-stat.is-purple span svg { color: #8b5cf6; }
.cp-month-stat.is-blue span svg { color: #2563eb; }
.cp-month-stat.is-green span svg { color: #16a34a; }

.cp-month-stat strong {
  display: block;
  min-width: 0;
  margin-top: 5px;
  color: var(--cp-ink);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.cp-month-selected-icon {
  width: 24px;
  height: 24px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.26);
}

.cp-month-selected-icon svg {
  width: 14px;
  height: 14px;
  stroke-width: 3;
}

.cp-month-card.is-active .cp-month-selected-icon {
  display: inline-flex;
}

.cp-month-campaign-dot {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 999px;
  background: #ec4899;
  box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.12);
}

.cp-month-card.is-active .cp-month-campaign-dot {
  position: absolute;
  top: 17px;
  right: 48px;
}

.cp-month-activity {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--cp-muted);
  font-size: 12px;
  line-height: 1.35;
}

.cp-month-activity svg {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
}

.cp-month-activity span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-month-activity.is-campaign {
  color: #ec4899;
  font-weight: 800;
}

.cp-month-activity.is-campaign svg {
  color: #ec4899;
}

.cp-month-card textarea {
  min-height: 72px;
}

.cp-month-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cp-sales-basis {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.31fr);
  gap: 24px;
  align-items: stretch;
  padding: 24px;
}

.cp-forecast-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(390px, 0.34fr);
  gap: 14px;
  align-items: start;
}

.cp-forecast-sku-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.cp-forecast-sku-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--cp-border);
  border-radius: 999px;
  background: #fff;
  color: var(--cp-ink);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.cp-forecast-sku-links a strong {
  color: var(--ss-pink);
}

.cp-forecast-items {
  display: grid;
  gap: 22px;
}

.cp-forecast-item-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.7fr);
  gap: 22px;
  align-items: stretch;
  padding: 28px;
  border: 1px solid rgba(205, 53, 190, 0.16);
  border-radius: 22px;
  background: linear-gradient(135deg, #fff 0%, #fff 70%, rgba(205, 53, 190, 0.08) 100%);
}

.cp-forecast-item-hero h1 {
  margin: 8px 0 10px;
  color: var(--cp-ink);
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1;
}

.cp-forecast-item-hero p,
.cp-forecast-item-hero small {
  color: var(--cp-muted);
  font-weight: 850;
}

.cp-forecast-item-hero aside {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 22px;
  border: 1px solid var(--cp-border);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.84);
}

.cp-forecast-item-hero aside strong {
  color: var(--cp-ink);
  font-size: 16px;
}

.cp-forecast-item-hero aside span {
  color: var(--cp-muted);
  font-weight: 800;
}

.cp-forecast-item-form form {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) repeat(2, minmax(130px, 0.5fr)) auto;
  gap: 12px;
  align-items: end;
}

.cp-forecast-item-form label {
  display: grid;
  gap: 6px;
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 900;
}

.cp-forecast-item-form label.is-wide {
  grid-column: span 3;
}

.cp-forecast-item-form input,
.cp-forecast-item-form textarea {
  width: 100%;
  border: 1px solid var(--cp-border);
  border-radius: 12px;
  background: #fff;
  color: var(--cp-ink);
  padding: 10px 11px;
  font: inherit;
  font-weight: 750;
}

.cp-forecast-item-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(40, 167, 69, 0.14);
  color: #0c6b30;
  font-size: 12px;
  font-weight: 950;
}

.cp-campaign-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(430px, 0.34fr);
  gap: 14px;
  align-items: start;
}

.cp-forecast-workspace.is-editor-closed {
  grid-template-columns: minmax(0, 1fr);
}

.cp-forecast-workspace.is-editor-closed .cp-side-editor {
  display: none;
}

.cp-campaign-workspace.is-editor-closed {
  grid-template-columns: minmax(0, 1fr);
}

.cp-campaign-workspace.is-editor-closed .cp-campaign-editor {
  display: none;
}

.cp-forecast-layout {
  display: contents;
}

.cp-forecast-source-card,
.cp-forecast-months-panel {
  grid-column: 1;
}

.cp-forecast-source-card {
  grid-row: 1;
}

.cp-forecast-months-panel {
  grid-row: 2;
}

.cp-forecast-source-card,
.cp-forecast-months-panel,
.cp-side-editor {
  border-radius: var(--cp-radius);
  box-shadow: 0 18px 42px rgba(3, 25, 31, 0.07);
}

.cp-sales-basis .cp-sales-basis-form {
  grid-template-columns: repeat(2, minmax(150px, 210px)) minmax(150px, auto);
  margin: 18px 0 18px;
}

.cp-sales-visual {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 10px;
  min-height: 210px;
  padding: 20px;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
  background: linear-gradient(145deg, #fff, #fbf7ff);
  box-shadow: 0 16px 36px rgba(124, 58, 237, 0.08);
}

.cp-sales-visual small {
  color: var(--cp-muted);
  font-size: 12px;
  line-height: 1.35;
}

.cp-sales-illustration {
  position: relative;
  width: 178px;
  height: 110px;
  margin: 0 auto 8px;
}

.cp-sales-chart-card,
.cp-sales-report-card {
  position: absolute;
  display: grid;
  place-items: center;
  border: 1px solid #eadcff;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 34px rgba(124, 58, 237, 0.17);
  backdrop-filter: blur(8px);
}

.cp-sales-chart-card {
  left: 0;
  bottom: 8px;
  width: 82px;
  height: 66px;
  color: #a855f7;
  transform: rotate(7deg);
}

.cp-sales-chart-card svg {
  width: 46px;
  height: 46px;
  stroke-width: 1.8;
}

.cp-sales-report-card {
  right: 0;
  top: 0;
  width: 96px;
  height: 82px;
  justify-items: stretch;
  gap: 8px;
  padding: 16px 15px;
}

.cp-sales-report-card i {
  display: block;
  height: 9px;
  border-radius: 999px;
  background: #d8b4fe;
}

.cp-sales-report-card i:nth-child(2) {
  width: 72%;
  background: #c4b5fd;
}

.cp-sales-report-card b {
  width: 48px;
  height: 48px;
  justify-self: end;
  border-radius: 50%;
  background: conic-gradient(#7c3aed 0 38%, #c084fc 38% 72%, #ede9fe 72% 100%);
  box-shadow: inset 0 0 0 8px rgba(255, 255, 255, 0.42);
}

.cp-sales-preview {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--cp-border);
  border-radius: 8px;
  background: var(--cp-card);
}

.cp-sales-preview-title {
  margin: 0 0 8px;
  color: var(--cp-muted);
  font-size: 13px;
  font-weight: 800;
}

.cp-sales-preview div {
  display: grid;
  grid-template-rows: 34px 42px;
  gap: 0;
  padding: 0;
  border-right: 1px solid var(--cp-border);
  text-align: center;
}

.cp-sales-preview div:last-child {
  border-right: 0;
}

.cp-sales-preview span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 8px 7px;
  border-bottom: 1px solid var(--cp-border);
  background: #f8fafc;
  color: var(--cp-muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}

.cp-sales-preview strong {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 9px 8px 10px;
  color: var(--cp-ink);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.15;
}

.cp-sales-preview small {
  display: none;
}

.cp-sales-footnote {
  margin: 10px 0 0;
  color: var(--cp-muted);
  font-size: 12px;
}

.cp-sales-context {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  margin: 0 0 10px;
  color: var(--cp-muted);
  font-size: 12px;
}

.cp-sales-context strong {
  color: var(--cp-ink);
  font-weight: 900;
}

.cp-sales-apply-form {
  align-items: end;
  margin-top: 18px;
}

.cp-growth-field {
  width: 108px;
  flex: 0 0 108px;
}

.cp-growth-field input {
  min-height: 42px;
}

.cp-return-rate-control {
  display: grid;
  grid-template-columns: minmax(94px, 0.62fr) minmax(96px, 0.78fr);
  gap: 10px;
  align-items: end;
}

.cp-order-growth-control {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(94px, 118px);
  gap: 12px;
  align-items: start;
}

.cp-return-rate-control input {
  min-height: 42px;
}

.cp-return-rate-control label:first-child input {
  max-width: 118px;
}

.cp-return-rate-control input[readonly] {
  color: var(--cp-muted);
  background: #f8fafc;
}

.cp-growth-readout {
  max-width: 118px;
  display: grid;
  gap: 7px;
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 700;
}

.cp-growth-readout strong {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--cp-border-strong);
  border-radius: var(--cp-radius-sm);
  color: var(--cp-ink);
  background: #f8fafc;
  font-size: 14px;
  font-weight: 900;
}

.cp-order-growth-control.is-missing-basis .cp-growth-readout strong {
  color: var(--cp-muted);
  border-style: dashed;
}

.cp-growth-readout small {
  min-height: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cp-side-editor {
  grid-column: 2;
  grid-row: 1 / span 2;
  position: sticky;
  top: 90px;
  align-self: stretch;
  align-content: start;
  height: 100%;
  padding: 24px;
  border: 1px solid rgba(219, 226, 232, 0.95);
  background: #fff;
}

.cp-month-editor {
  display: grid;
  gap: 18px;
}

.cp-month-editor[hidden] {
  display: none;
}

.cp-month-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.cp-month-editor-head .cp-eyebrow {
  margin: 0 0 8px;
}

.cp-month-editor-head h2 {
  margin: 0;
  color: var(--cp-ink);
  font-size: 20px;
  line-height: 1.15;
}

.cp-dialog-close {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  border: 0;
  border-radius: 10px;
  color: #475569;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.cp-dialog-close:hover {
  color: var(--cp-ink);
  background: #f1f5f9;
}

.cp-dialog-close span {
  display: block;
  margin-top: -2px;
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
}

.cp-editor-fields {
  display: grid;
  gap: 14px;
}

.cp-editor-row {
  display: grid;
  grid-template-columns: 30px minmax(92px, 0.48fr) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 0;
}

.cp-editor-row-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.cp-editor-row-icon svg {
  width: 16px;
  height: 16px;
}

.cp-editor-row-label {
  display: grid;
  gap: 3px;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

.cp-editor-row-label small {
  color: var(--cp-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}

.cp-editor-row input {
  width: 100%;
  min-height: 42px;
  margin: 0;
}

.cp-editor-row-compact input {
  max-width: 124px;
}

.cp-editor-row-readonly input {
  color: #587080;
  background: #f8fafc;
}

.cp-editor-row-readonly.is-missing-basis input {
  border-style: dashed;
}

.cp-editor-row.is-purple .cp-editor-row-icon {
  color: #7c3aed;
  background: #f1eaff;
}

.cp-editor-row.is-violet .cp-editor-row-icon {
  color: #8b5cf6;
  background: #f3e8ff;
}

.cp-editor-row.is-orange .cp-editor-row-icon {
  color: #f97316;
  background: #fff1e7;
}

.cp-editor-row.is-blue .cp-editor-row-icon {
  color: #2563eb;
  background: #eaf1ff;
}

.cp-editor-row.is-pink .cp-editor-row-icon {
  color: #f43f5e;
  background: #ffe9ef;
}

.cp-editor-row.is-green .cp-editor-row-icon {
  color: #16a34a;
  background: #e8f8ee;
}

.cp-editor-row.is-mint .cp-editor-row-icon {
  color: #10b981;
  background: #e7fbf3;
}

.cp-editor-notes {
  display: grid;
  gap: 7px;
  margin: 0;
}

.cp-editor-notes > span {
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

.cp-editor-notes small {
  color: var(--cp-muted);
  font-size: 12px;
  line-height: 1.45;
}

.cp-editor-notes textarea {
  min-height: 86px;
  margin: 0;
  resize: vertical;
}

.cp-editor-notes em {
  color: var(--cp-muted);
  font-size: 12px;
  font-style: normal;
  text-align: right;
}

.cp-editor-shipshark-note textarea {
  min-height: 72px;
}

.cp-editor-footer {
  display: grid;
  gap: 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--cp-border);
}

.cp-editor-footer .cp-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.cp-icon-btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-sm);
  color: var(--cp-ink);
  background: var(--cp-card);
}

.cp-icon-btn svg {
  transform: rotate(90deg);
}

.cp-icon-btn.is-next svg {
  transform: rotate(-90deg);
}

.cp-calendar-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.cp-campaign-calendar {
  overflow: hidden;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
}

.cp-calendar-head-row,
.cp-campaign-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.cp-campaign-layout.is-calendar-only {
  display: block;
}

.cp-campaign-calendar-panel {
  padding: 20px;
}

.cp-campaign-view-tabs {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--cp-border);
  border-radius: 10px;
  background: #fff;
}

.cp-campaign-view-tabs button {
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-right: 1px solid var(--cp-border);
  color: var(--cp-muted);
  background: transparent;
  font-weight: 800;
  cursor: pointer;
}

.cp-campaign-view-tabs button:last-child {
  border-right: 0;
}

.cp-campaign-view-tabs button.is-active {
  color: var(--cp-pink);
  background: var(--cp-soft);
}

.cp-mini-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  color: var(--cp-pink);
  background: transparent;
  font-weight: 900;
  cursor: pointer;
}

.cp-mini-link svg {
  width: 15px;
  height: 15px;
}

.cp-calendar-head {
  min-height: 34px;
  display: grid;
  place-items: center;
  border-right: 1px solid var(--cp-border);
  border-bottom: 1px solid var(--cp-border);
  color: var(--cp-muted);
  background: #fbfdfd;
  font-size: 12px;
  font-weight: 800;
}

.cp-campaign-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
}

.cp-campaign-table {
  width: 100%;
  border-collapse: collapse;
}

.cp-campaign-table th,
.cp-campaign-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--cp-border);
  text-align: left;
  white-space: nowrap;
}

.cp-campaign-table th {
  color: var(--cp-muted);
  background: #fbfdfd;
  font-size: 12px;
  text-transform: uppercase;
}

.cp-campaign-table tr:last-child td {
  border-bottom: 0;
}

.cp-campaign-row-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--cp-ink);
  font-weight: 800;
}

.cp-campaign-row-title i,
.cp-campaign-card-icon {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  color: var(--cp-pink);
  background: #fdf2f8;
  font-style: normal;
}

.cp-campaign-row-title svg,
.cp-campaign-card-icon svg {
  width: 17px;
  height: 17px;
}

.cp-campaign-upcoming-panel {
  padding: 18px 20px 20px;
}

.cp-campaign-upcoming-panel .cp-panel-header {
  align-items: center;
  margin-bottom: 16px;
}

.cp-campaign-upcoming-panel .cp-panel-header h2 {
  font-size: 18px;
}

.cp-campaign-upcoming-panel .cp-mini-link {
  gap: 8px;
  color: var(--cp-pink, var(--cp-accent, #d957cc));
  font-size: 13px;
}

.cp-campaign-upcoming-panel .cp-mini-link span {
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}

.cp-campaign-upcoming-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.cp-campaign-upcoming-card {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 18px;
  gap: 10px;
  min-height: 116px;
  padding: 14px 14px 13px;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-sm);
  color: var(--cp-ink);
  background: #fff;
  box-shadow: 0 10px 24px rgba(3, 25, 31, 0.035);
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.cp-campaign-upcoming-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--cp-pink, var(--cp-accent, #d957cc)) 40%, var(--cp-border));
  box-shadow: 0 16px 34px rgba(217, 87, 204, 0.12);
}

.cp-campaign-upcoming-card .cp-campaign-card-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.cp-campaign-upcoming-card .cp-campaign-card-icon svg {
  width: 15px;
  height: 15px;
}

.cp-campaign-upcoming-copy {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 7px;
}

.cp-campaign-upcoming-card strong {
  overflow: hidden;
  color: var(--cp-ink);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-campaign-upcoming-card small {
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 700;
}

.cp-campaign-upcoming-status {
  width: max-content;
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  color: var(--ss-success-dark);
  background: var(--ss-success-bg);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.cp-campaign-upcoming-card em {
  color: #059669;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}

.cp-campaign-upcoming-arrow {
  align-self: center;
  justify-self: end;
  color: #64748b;
  font-size: 25px;
  font-weight: 300;
  line-height: 1;
}

.cp-campaign-card-icon.is-seasonal { color: var(--cp-blue); background: #eff6ff; }
.cp-campaign-card-icon.is-holiday { color: var(--cp-orange); background: #fff7ed; }
.cp-campaign-card-icon.is-launch { color: var(--cp-purple); background: #f5f3ff; }
.cp-campaign-card-icon.is-birthday { color: #db2777; background: #fdf2f8; }
.cp-campaign-card-icon.is-christmas-sale { color: #dc2626; background: #fef2f2; }
.cp-campaign-card-icon.is-summer-sale { color: #ea580c; background: #fff7ed; }
.cp-campaign-card-icon.is-black-friday { color: #111827; background: #f3f4f6; }
.cp-campaign-card-icon.is-cyber-week { color: #2563eb; background: #eff6ff; }
.cp-campaign-card-icon.is-january-sale { color: #0891b2; background: #ecfeff; }

.cp-calendar-head:nth-child(7n) {
  border-right: 0;
}

.cp-campaign-week {
  position: relative;
  grid-auto-flow: column;
}

.cp-calendar-cell {
  grid-row: 1;
  display: block;
  position: relative;
  min-height: 92px;
  padding: 10px;
  border-right: 1px solid var(--cp-border);
  border-bottom: 1px solid var(--cp-border);
  background: var(--cp-card);
}

.cp-calendar-cell:nth-child(7n) {
  border-right: 0;
}

.cp-calendar-cell.is-muted {
  background: #fbfdfd;
}

.cp-calendar-day {
  position: relative;
  z-index: 3;
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: var(--cp-muted);
  font-size: 12px;
  line-height: 1;
}

.cp-calendar-cell.is-today .cp-calendar-day {
  color: #fff;
  background: var(--cp-pink, var(--cp-accent, #d957cc));
  box-shadow: 0 8px 18px rgba(217, 87, 204, 0.3);
  font-weight: 900;
}

.cp-campaign-bar {
  grid-row: 1;
  align-self: end;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0 10px calc(10px + (var(--campaign-lane, 0) * 30px));
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--cp-accent) 32%, var(--cp-border));
  border-radius: 7px;
  color: var(--cp-accent-dark);
  background: var(--cp-soft);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: auto;
}

.cp-campaign-bar span {
  width: 16px;
  height: 16px;
  display: inline-grid;
  flex: 0 0 16px;
  place-items: center;
}

.cp-campaign-bar svg {
  width: 13px;
  height: 13px;
}

.cp-campaign-bar.is-seasonal {
  color: var(--cp-blue);
  border-color: color-mix(in srgb, var(--cp-blue) 30%, var(--cp-border));
  background: #eff6ff;
}

.cp-campaign-bar.is-holiday {
  color: var(--cp-orange);
  border-color: color-mix(in srgb, var(--cp-orange) 30%, var(--cp-border));
  background: #fff7ed;
}

.cp-campaign-bar.is-launch {
  color: var(--cp-accent-dark);
  border-color: color-mix(in srgb, var(--cp-purple) 30%, var(--cp-border));
  background: #f5f3ff;
}

.cp-campaign-bar.is-birthday {
  color: #db2777;
  border-color: color-mix(in srgb, #db2777 30%, var(--cp-border));
  background: #fdf2f8;
}

.cp-campaign-bar.is-christmas-sale {
  color: #dc2626;
  border-color: color-mix(in srgb, #dc2626 30%, var(--cp-border));
  background: #fef2f2;
}

.cp-campaign-bar.is-summer-sale {
  color: #ea580c;
  border-color: color-mix(in srgb, #ea580c 30%, var(--cp-border));
  background: #fff7ed;
}

.cp-campaign-bar.is-black-friday {
  color: #111827;
  border-color: color-mix(in srgb, #111827 30%, var(--cp-border));
  background: #f3f4f6;
}

.cp-campaign-bar.is-cyber-week {
  color: #2563eb;
  border-color: color-mix(in srgb, #2563eb 30%, var(--cp-border));
  background: #eff6ff;
}

.cp-campaign-bar.is-january-sale {
  color: #0891b2;
  border-color: color-mix(in srgb, #0891b2 30%, var(--cp-border));
  background: #ecfeff;
}

.cp-calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
  color: var(--cp-muted);
  font-size: 12px;
}

.cp-calendar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.cp-calendar-legend i {
  width: 9px;
  height: 9px;
  display: inline-block;
  border-radius: 999px;
  background: var(--cp-accent);
}

.cp-calendar-legend i.blue { background: var(--cp-blue); }
.cp-calendar-legend i.orange { background: var(--cp-orange); }
.cp-calendar-legend i.purple { background: var(--cp-accent-dark); }

.cp-campaign-form {
  display: grid;
  gap: 12px;
}

.cp-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.cp-form-grid.is-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cp-campaign-editor {
  padding: 0;
  overflow: hidden;
}

.cp-campaign-dialog-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 24px 18px;
  border-bottom: 1px solid var(--cp-border);
}

.cp-campaign-dialog-header h2 {
  margin: 10px 0 0;
  color: var(--cp-ink);
  font-size: 22px;
}

.cp-campaign-dialog-close span,
.cp-campaign-dialog-close span::before,
.cp-campaign-dialog-close span::after {
  width: 15px;
  height: 2px;
  display: block;
  border-radius: 999px;
  background: currentColor;
}

.cp-campaign-dialog-close span {
  position: relative;
  background: transparent;
}

.cp-campaign-dialog-close span::before,
.cp-campaign-dialog-close span::after {
  content: "";
  position: absolute;
  inset: 0;
}

.cp-campaign-dialog-close span::before {
  transform: rotate(45deg);
}

.cp-campaign-dialog-close span::after {
  transform: rotate(-45deg);
}

.cp-campaign-dialog-form {
  padding: 22px 24px 24px;
  gap: 16px;
}

.cp-campaign-editor .cp-form-grid.is-three {
  grid-template-columns: minmax(0, 1fr) minmax(105px, 0.72fr) minmax(0, 1fr);
}

.cp-campaign-dialog-intro {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  align-items: end;
}

.cp-campaign-dialog-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--cp-pink), var(--cp-purple));
  box-shadow: 0 14px 30px rgba(217, 87, 204, 0.24);
}

.cp-campaign-dialog-icon svg {
  width: 25px;
  height: 25px;
}

.cp-campaign-dialog-form label small {
  display: block;
  margin-top: 6px;
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 600;
}

.cp-campaign-forecast-toggle {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--cp-pink, var(--cp-accent, #d957cc)) 18%, var(--cp-border));
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(217, 87, 204, 0.08), rgba(124, 58, 237, 0.04));
  color: var(--cp-ink);
}

.cp-campaign-forecast-toggle input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--cp-pink, var(--cp-accent, #d957cc));
}

.cp-campaign-forecast-toggle span {
  display: grid;
  gap: 5px;
}

.cp-campaign-forecast-toggle strong {
  color: var(--cp-ink);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
}

.cp-campaign-forecast-toggle small {
  margin: 0;
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.cp-campaign-type-picker {
  position: relative;
}

.cp-campaign-type-toggle {
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--cp-border);
  border-radius: 10px;
  color: var(--cp-ink);
  background: #fff;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.cp-campaign-type-toggle[aria-expanded="true"] {
  border-color: var(--cp-pink);
  box-shadow: 0 0 0 3px rgba(217, 87, 204, 0.12);
}

.cp-campaign-type-toggle > svg {
  width: 17px;
  height: 17px;
  justify-self: end;
  color: var(--cp-muted);
}

.cp-campaign-type-icon {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  color: var(--cp-pink);
  background: #fdf2f8;
}

.cp-campaign-type-icon svg {
  width: 17px;
  height: 17px;
}

.cp-campaign-type-icon.is-christmas-sale,
.cp-campaign-dialog-icon.is-christmas-sale {
  color: #dc2626;
  background: #fef2f2;
}

.cp-campaign-type-icon.is-summer-sale,
.cp-campaign-dialog-icon.is-summer-sale {
  color: #ea580c;
  background: #fff7ed;
}

.cp-campaign-type-icon.is-black-friday,
.cp-campaign-dialog-icon.is-black-friday {
  color: #111827;
  background: #f3f4f6;
}

.cp-campaign-type-icon.is-cyber-week,
.cp-campaign-dialog-icon.is-cyber-week {
  color: #2563eb;
  background: #eff6ff;
}

.cp-campaign-type-icon.is-january-sale,
.cp-campaign-dialog-icon.is-january-sale {
  color: #0891b2;
  background: #ecfeff;
}

.cp-campaign-type-icon.is-birthday,
.cp-campaign-dialog-icon.is-birthday {
  color: #db2777;
  background: #fdf2f8;
}

.cp-campaign-type-icon.is-seasonal,
.cp-campaign-dialog-icon.is-seasonal {
  color: var(--cp-blue);
  background: #eff6ff;
}

.cp-campaign-type-icon.is-holiday,
.cp-campaign-dialog-icon.is-holiday {
  color: var(--cp-orange);
  background: #fff7ed;
}

.cp-campaign-type-icon.is-launch,
.cp-campaign-dialog-icon.is-launch {
  color: var(--cp-purple);
  background: #f5f3ff;
}

.cp-campaign-type-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--cp-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(3, 25, 31, 0.13);
}

.cp-campaign-type-menu[hidden] {
  display: none;
}

.cp-campaign-type-menu button {
  min-height: 42px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: 0;
  border-radius: 9px;
  color: var(--cp-ink);
  background: transparent;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.cp-campaign-type-menu button:hover,
.cp-campaign-type-menu button.is-active {
  color: var(--cp-pink);
  background: var(--cp-soft);
}

.cp-campaign-dialog-form textarea {
  min-height: 96px;
}

.cp-campaign-dialog-form .cp-card-actions {
  justify-content: flex-end;
  gap: 14px;
  padding-top: 8px;
}

.table-scroll {
  overflow-x: auto;
}

.customer-portal .table {
  width: 100%;
  border-collapse: collapse;
}

.customer-portal .table th,
.customer-portal .table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--cp-border);
  text-align: left;
}

.cp-returnflow-hero {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  border-color: rgba(217, 87, 204, 0.18);
  background:
    radial-gradient(circle at 86% 20%, rgba(217, 87, 204, 0.18), transparent 34%),
    linear-gradient(105deg, #fff 0%, #fff 52%, #fff4fb 100%);
}

.cp-returnflow-hero-card {
  display: grid;
  gap: 10px;
  align-content: center;
  min-height: 138px;
  padding: 22px;
  border: 1px solid rgba(217, 87, 204, 0.22);
  border-radius: var(--cp-radius);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--cp-shadow-soft);
}

.cp-returnflow-hero-card > span {
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  color: var(--cp-accent-dark);
  background: var(--cp-soft);
}

.cp-returnflow-hero-card strong {
  color: var(--cp-ink);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.1;
}

.cp-returnflow-hero-card small {
  color: var(--cp-muted);
  font-size: 13px;
  font-weight: 700;
}

.cp-returnflow-filter-panel {
  margin-top: 14px;
}

.cp-returnflow-filter {
  grid-template-columns: minmax(180px, 0.28fr) minmax(220px, 0.38fr) auto;
}

.cp-returnflow-grid {
  align-items: start;
}

.cp-returnflow-month-panel {
  margin-top: 14px;
}

.cp-returnflow-month-table {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
  background: #fff;
}

.cp-returnflow-month-row {
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(94px, 0.62fr) minmax(160px, 0.92fr) repeat(3, minmax(96px, 0.68fr)) minmax(118px, 0.58fr);
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--cp-border);
  color: var(--cp-ink);
}

.cp-returnflow-month-row:last-child {
  border-bottom: 0;
}

.cp-returnflow-month-row.is-head {
  min-height: 42px;
  color: var(--cp-muted);
  background: #fbfdfd;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.cp-returnflow-month-row:not(.is-head):hover,
.cp-returnflow-month-row.is-active {
  background: var(--cp-soft);
}

.cp-returnflow-month-row.is-active {
  box-shadow: inset 3px 0 0 var(--cp-accent);
}

.cp-returnflow-month-row strong,
.cp-returnflow-month-row small {
  display: block;
}

.cp-returnflow-month-row small {
  margin-top: 3px;
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 700;
}

.cp-returnflow-return-cell {
  display: grid;
  gap: 5px;
}

.cp-returnflow-return-cell > strong {
  color: var(--cp-ink);
  font-size: 15px;
  line-height: 1;
}

.cp-returnflow-return-cell small {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
}

.cp-returnflow-house-pill {
  width: max-content;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.cp-returnflow-house-pill.green {
  color: var(--ss-success-dark);
  background: var(--ss-success-bg);
}

.cp-returnflow-house-pill.red {
  color: var(--ss-danger-dark);
  background: var(--ss-danger-bg);
}

.cp-returnflow-house-pill.blue {
  color: var(--ss-info-dark);
  background: var(--ss-info-bg);
}

.cp-returnflow-open-btn {
  min-width: 92px;
}

.cp-returnflow-definition-list {
  display: grid;
  gap: 12px;
}

.cp-returnflow-definition-list div {
  display: grid;
  gap: 4px;
  padding: 13px;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-sm);
  background: #fbfdfd;
}

.cp-returnflow-definition-list strong {
  color: var(--cp-ink);
  font-size: 14px;
}

.cp-returnflow-definition-list span {
  color: var(--cp-muted);
  font-size: 13px;
  line-height: 1.45;
}

.cp-returnflow-doc-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
  background: #fff;
}

.cp-returnflow-doc-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 0.34fr) minmax(180px, 0.24fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 14px;
}

.cp-returnflow-doc-toolbar label {
  display: grid;
  gap: 6px;
}

.cp-returnflow-doc-toolbar label span {
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 800;
}

.cp-returnflow-doc-toolbar select {
  min-height: 42px;
  width: 100%;
  padding: 0 12px;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-sm);
  color: var(--cp-ink);
  background: #fff;
}

.cp-returnflow-doc-table {
  width: 100%;
  border-collapse: collapse;
}

.cp-returnflow-doc-table th,
.cp-returnflow-doc-table td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--cp-border);
  text-align: left;
  vertical-align: top;
}

.cp-returnflow-doc-table th {
  color: var(--cp-muted);
  background: #fbfdfd;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.cp-returnflow-doc-table tr:last-child td {
  border-bottom: 0;
}

.cp-returnflow-doc-table td {
  color: var(--cp-ink);
  font-size: 13px;
}

.cp-returnflow-doc-table td small {
  display: block;
  margin-top: 4px;
  color: var(--cp-muted);
  font-size: 12px;
}

.cp-returnflow-debug {
  margin-top: 16px;
  padding: 14px;
  border: 1px dashed var(--cp-border-strong);
  border-radius: var(--cp-radius-sm);
  background: #0f172a;
  color: #e2e8f0;
}

.cp-returnflow-debug h3 {
  margin: 0 0 10px;
  color: #fff;
  font-size: 14px;
}

.cp-returnflow-debug pre {
  overflow-x: auto;
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.cp-returnflow-lite-page {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.cp-returnflow-lite-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  padding: 4px 0 3px;
}

.cp-returnflow-lite-header h1 {
  margin: 0;
  color: #101d3b;
  font-size: clamp(27px, 3vw, 36px);
  font-weight: 950;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.cp-returnflow-lite-header p {
  margin: 8px 0 0;
  color: #61718c;
  font-size: 14px;
  font-weight: 600;
}

.cp-returnflow-lite-period-summary {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 14px;
  color: #5b6d89;
  font-size: 12px;
  font-weight: 750;
}

.cp-returnflow-lite-period-summary svg {
  width: 16px;
  height: 16px;
  color: #bf2aaa;
}

.cp-returnflow-lite-period-summary strong {
  color: #172441;
}

.cp-returnflow-lite-period-summary i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #8a99ad;
}

.cp-returnflow-lite-header-actions {
  display: flex;
  gap: 10px;
}

.cp-returnflow-lite-header-actions .cp-btn {
  min-height: 42px;
  border-radius: 10px;
  color: #15213d;
  background: #fff;
}

.cp-returnflow-lite-header-actions .cp-btn svg {
  color: #bd27a8;
}

.cp-returnflow-lite-period-form {
  display: flex;
  align-items: end;
  gap: 9px;
  width: fit-content;
  padding: 8px;
  border: 1px solid #e1e7f0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 5px 18px rgba(15, 23, 42, 0.035);
}

.cp-returnflow-lite-period-form label {
  display: grid;
  gap: 3px;
}

.cp-returnflow-lite-period-form label span {
  padding-left: 2px;
  color: #75849b;
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
}

.cp-returnflow-lite-period-form select {
  min-width: 130px;
  min-height: 36px;
  padding: 0 30px 0 10px;
  border: 1px solid #dbe3ee;
  border-radius: 8px;
  color: #172441;
  background: #fff;
  font-size: 12px;
  font-weight: 750;
}

.cp-returnflow-lite-period-form .cp-btn {
  min-height: 36px;
  padding: 7px 13px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #a91b9f, #d23ac0);
  box-shadow: 0 8px 18px rgba(196, 42, 173, 0.18);
}

.cp-returnflow-lite-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.cp-returnflow-lite-kpis article,
.cp-returnflow-lite-kpis > a {
  display: flex;
  position: relative;
  align-items: center;
  gap: 13px;
  min-width: 0;
  min-height: 112px;
  padding: 17px;
  border: 1px solid #dfe6ef;
  border-radius: 15px;
  color: #172441;
  background: #fff;
  box-shadow: 0 7px 22px rgba(15, 23, 42, 0.045);
  text-decoration: none;
}

.cp-returnflow-lite-kpis > a {
  padding-right: 40px;
}

.cp-returnflow-lite-kpis article > span,
.cp-returnflow-lite-kpis > a > span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  color: #d46b18;
  background: #fff3e7;
}

.cp-returnflow-lite-kpis article > span.is-brand,
.cp-returnflow-lite-kpis > a > span.is-brand {
  color: #be29aa;
  background: #fbedfa;
}

.cp-returnflow-lite-kpis > a > svg {
  position: absolute;
  right: 15px;
  width: 17px;
  height: 17px;
}

.cp-returnflow-lite-kpis > a:hover {
  border-color: rgba(196, 42, 173, 0.34);
  transform: translateY(-1px);
}

.cp-returnflow-lite-kpis div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.cp-returnflow-lite-kpis small {
  overflow: hidden;
  color: #5d6e88;
  font-size: 11px;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-returnflow-lite-kpis strong {
  overflow: hidden;
  color: #101d3b;
  font-size: clamp(24px, 2vw, 31px);
  font-weight: 950;
  letter-spacing: -0.035em;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-returnflow-lite-kpis em {
  overflow: hidden;
  color: #677790;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
}

.cp-returnflow-lite-kpis em.is-positive,
.cp-returnflow-lite-kpis em.is-success {
  color: #14804a;
}

.cp-returnflow-lite-kpis em.is-attention,
.cp-returnflow-lite-kpis .is-warning em {
  color: #d55d0d;
}

.cp-returnflow-lite-kpis em.is-info {
  color: #2568bd;
}

.cp-returnflow-lite-status {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 11px 15px;
  border: 1px solid #dfe7ef;
  border-radius: 12px;
  color: #38506f;
  background: #f7f9fc;
  font-size: 12px;
  font-weight: 700;
}

.cp-returnflow-lite-status svg {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
}

.cp-returnflow-lite-status.is-success {
  border-color: #cfe9d9;
  color: #147846;
  background: linear-gradient(90deg, #effbf4, #f6fcf8);
}

.cp-returnflow-lite-status.is-attention {
  border-color: #f2dfc9;
  color: #a75215;
  background: #fff9f1;
}

.cp-returnflow-lite-status.is-info {
  border-color: #d9e6f7;
  color: #245b9e;
  background: #f3f8fe;
}

.cp-returnflow-lite-month-card {
  min-width: 0;
  padding: 0 12px 10px;
  border: 1px solid #dfe6ef;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 7px 24px rgba(15, 23, 42, 0.045);
}

.cp-returnflow-lite-month-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 0 5px;
}

.cp-returnflow-lite-month-card h2 {
  margin: 0;
  color: #14213e;
  font-size: 16px;
  font-weight: 900;
}

.cp-returnflow-lite-month-card > header span {
  padding: 5px 9px;
  border-radius: 999px;
  color: #c229ac;
  background: #fff0fb;
  font-size: 9px;
  font-weight: 850;
}

.cp-returnflow-lite-table-wrap {
  overflow-x: auto;
  border-top: 1px solid #e5eaf1;
}

.cp-returnflow-lite-table {
  width: 100%;
  min-width: 1130px;
  border-collapse: collapse;
  font-size: 12px;
}

.cp-returnflow-lite-table th,
.cp-returnflow-lite-table td {
  padding: 10px 11px;
  border-bottom: 1px solid #e5eaf1;
  color: #25334f;
  text-align: left;
  vertical-align: middle;
}

.cp-returnflow-lite-table th {
  color: #64738b;
  background: #fbfcfe;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.cp-returnflow-lite-table th svg {
  width: 12px;
  height: 12px;
  vertical-align: -2px;
}

.cp-returnflow-lite-table td {
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
}

.cp-returnflow-lite-table td:nth-child(3) {
  min-width: 205px;
}

.cp-returnflow-lite-table td strong,
.cp-returnflow-lite-table td small {
  display: block;
}

.cp-returnflow-lite-table td small {
  margin-top: 3px;
  color: #738299;
  font-size: 10px;
  line-height: 1.3;
  font-weight: 650;
}

.cp-returnflow-lite-table tr.is-active td {
  color: #c128ad;
  background: linear-gradient(90deg, #fff7fd, #fefbff);
}

.cp-returnflow-lite-table tbody tr:last-child td {
  border-bottom: 0;
}

.cp-returnflow-lite-benchmark {
  display: inline-flex;
  width: max-content;
  margin-top: 5px;
  padding: 4px 7px;
  border-radius: 999px;
  color: #64748b;
  background: #f1f4f8;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 850;
}

.cp-returnflow-lite-benchmark.is-success {
  color: #147b47;
  background: #e8f8ee;
}

.cp-returnflow-lite-benchmark.is-info {
  color: #245fa7;
  background: #eaf3ff;
}

.cp-returnflow-lite-benchmark.is-attention {
  color: #bf5b15;
  background: #fff1e5;
}

.cp-returnflow-lite-delta {
  font-weight: 900;
  white-space: nowrap;
}

.cp-returnflow-lite-delta.is-down {
  color: #12814b;
}

.cp-returnflow-lite-delta.is-up {
  color: #c45716;
}

.cp-returnflow-lite-month-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 96px;
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid #dce4ee;
  border-radius: 999px;
  color: #172441;
  background: #fff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
  text-decoration: none;
  white-space: nowrap;
}

.cp-returnflow-lite-month-link svg {
  width: 13px;
  height: 13px;
}

.cp-returnflow-lite-month-link.is-active {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg, #ae1fa2, #d33bc0);
  box-shadow: 0 7px 16px rgba(196, 42, 173, 0.2);
}

.cp-returnflow-lite-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 44px 20px;
  color: #65758e;
  text-align: center;
}

.cp-returnflow-lite-empty svg {
  width: 28px;
  height: 28px;
  color: #c42aad;
}

.cp-returnflow-lite-plus {
  display: grid;
  grid-template-columns: auto minmax(210px, 0.75fr) minmax(520px, 1.8fr) auto;
  align-items: center;
  gap: 20px;
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid rgba(196, 42, 173, 0.2);
  border-radius: 16px;
  background: linear-gradient(105deg, #fffaff, #fff, #fbf7ff);
  box-shadow: 0 7px 22px rgba(86, 39, 104, 0.04);
}

.cp-returnflow-lite-plus-lock {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  color: #b825a5;
  background: #f8e9fa;
}

.cp-returnflow-lite-plus-lock svg {
  width: 24px;
  height: 24px;
}

.cp-returnflow-lite-plus-copy h2 {
  margin: 0;
  color: #172441;
  font-size: 17px;
  font-weight: 920;
}

.cp-returnflow-lite-plus-copy p {
  margin: 6px 0 0;
  color: #5e6f88;
  font-size: 10px;
  line-height: 1.5;
}

.cp-returnflow-lite-plus-features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
}

.cp-returnflow-lite-plus-features article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  min-width: 0;
}

.cp-returnflow-lite-plus-features article > svg {
  width: 17px;
  height: 17px;
  padding: 7px;
  border-radius: 9px;
  color: #bf29aa;
  background: #faedfa;
  box-sizing: content-box;
}

.cp-returnflow-lite-plus-features span {
  display: grid;
  gap: 3px;
}

.cp-returnflow-lite-plus-features strong {
  color: #273650;
  font-size: 10px;
  font-weight: 850;
}

.cp-returnflow-lite-plus-features small {
  color: #6b7a91;
  font-size: 8px;
  line-height: 1.45;
}

.cp-returnflow-lite-plus > .cp-btn {
  color: #fff;
  background: linear-gradient(135deg, #a91b9f, #d23ac0);
  box-shadow: 0 9px 20px rgba(196, 42, 173, 0.2);
  white-space: nowrap;
}

.cp-returnflow-lite-documentation {
  margin-top: 2px;
}

@media (max-width: 1180px) {
  .cp-returnflow-lite-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cp-returnflow-lite-plus {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .cp-returnflow-lite-plus-features {
    grid-column: 1 / -1;
  }
}

@media (max-width: 860px) {
  .cp-returnflow-lite-header {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .cp-returnflow-lite-header-actions {
    flex-wrap: wrap;
  }

  .cp-returnflow-lite-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cp-returnflow-lite-plus {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .cp-returnflow-lite-plus > .cp-btn {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .cp-returnflow-lite-plus-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .cp-returnflow-lite-header-actions,
  .cp-returnflow-lite-period-form {
    display: grid;
    width: 100%;
  }

  .cp-returnflow-lite-period-form {
    grid-template-columns: 1fr 1fr;
  }

  .cp-returnflow-lite-period-form select,
  .cp-returnflow-lite-period-form .cp-btn {
    width: 100%;
  }

  .cp-returnflow-lite-period-form .cp-btn {
    grid-column: 1 / -1;
  }

  .cp-returnflow-lite-period-summary {
    flex-wrap: wrap;
  }

  .cp-returnflow-lite-kpis {
    grid-template-columns: 1fr;
  }

  .cp-returnflow-lite-kpis article,
  .cp-returnflow-lite-kpis > a {
    min-height: 98px;
  }

  .cp-returnflow-lite-plus {
    grid-template-columns: 1fr;
  }

  .cp-returnflow-lite-plus-lock {
    width: 46px;
    height: 46px;
  }

  .cp-returnflow-lite-plus-features,
  .cp-returnflow-lite-plus > .cp-btn {
    grid-column: auto;
  }

  .cp-returnflow-lite-plus-features {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1380px) {
  .cp-kpi-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cp-kpi-row.is-five {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cp-kpi-row.is-seven {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .cp-forecast-kpis .cp-kpi-card {
    border-right: 0;
  }

  .cp-support-workspace,
  .cp-products-layout,
  .cp-help-layout,
  .cp-forecast-workspace,
  .cp-campaign-workspace,
  .cp-campaign-layout {
    grid-template-columns: 1fr;
  }

  .cp-forecast-source-card,
  .cp-forecast-months-panel,
  .cp-side-editor,
  .cp-campaign-editor {
    grid-column: 1;
    grid-row: auto;
  }

  .cp-side-editor {
    position: static;
    height: auto;
  }

  .cp-sales-diagnostics-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  .cp-shell {
    grid-template-columns: 1fr;
  }

  .cp-sidebar {
    position: relative;
    height: auto;
  }

  .cp-sidebar-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .cp-sidebar-help {
    display: none;
  }

  .cp-topbar {
    position: relative;
  }

  .cp-dashboard-grid,
  .cp-dashboard-grid.is-even,
  .cp-hero,
  .cp-chat-shell,
  .cp-sales-basis {
    grid-template-columns: 1fr;
  }

  .cp-dashboard-hero {
    min-height: 0;
    padding: 24px;
  }

  .cp-dashboard-hero::before,
  .cp-dashboard-hero::after {
    inset: 0;
    opacity: 0.28;
  }

  .cp-dashboard-hero h2 {
    font-size: 27px;
  }

  .cp-dashboard-forecast-body,
  .cp-dashboard-forecast-stats,
  .cp-forecast-item-hero,
  .cp-help-hero {
    grid-template-columns: 1fr;
  }

  .cp-forecast-item-form form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cp-forecast-item-form label.is-wide {
    grid-column: 1 / -1;
  }

  .cp-dashboard-forecast-ring {
    justify-self: start;
  }

  .cp-help-hero .cp-hero-visual {
    justify-content: flex-start;
  }

  .cp-month-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cp-product-row {
    grid-template-columns: minmax(260px, 1fr) 110px 110px 110px;
  }

  .cp-product-row .cp-product-actions,
  .cp-product-row .cp-product-menu {
    display: none;
  }
}

@media (max-width: 900px) {
  .cp-main {
    padding: 20px 14px 34px;
  }

  .cp-topbar,
  .cp-topbar-actions {
    height: auto;
    align-items: stretch;
    flex-direction: column;
    padding: 14px;
  }

  .cp-beta-pill,
  .cp-profile-pill,
  .cp-owner-switcher {
    width: 100%;
  }

  .cp-beta-pill {
    justify-content: center;
  }

  .cp-owner-switcher {
    justify-content: space-between;
  }

  .cp-owner-switcher select {
    width: min(100%, 420px);
  }

  .cp-sidebar-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cp-page-intro,
  .cp-page-toolbar,
  .cp-panel-header {
    display: grid;
  }

  .cp-toolbar-actions {
    justify-content: flex-start;
  }

  .cp-forecast-meta {
    width: 100%;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .cp-last-updated span {
    white-space: normal;
  }

  .cp-year-select-form,
  .cp-year-select,
  .cp-year-select select,
  .cp-forecast-toolbar .cp-btn {
    width: 100%;
  }

  .cp-help-recipe,
  .cp-help-definition-grid,
  .cp-help-table div {
    grid-template-columns: 1fr;
  }

  .cp-kpi-row,
  .cp-kpi-row.is-four,
  .cp-kpi-row.is-five,
  .cp-kpi-row.is-seven,
  .cp-filter-bar,
  .cp-returnflow-filter,
  .cp-returnflow-doc-toolbar,
  .cp-products-toolbar,
  .cp-sales-basis-form,
  .cp-action-grid,
  .cp-sales-preview,
  .cp-form-grid,
  .cp-form-grid.is-three,
  .cp-month-fields {
    grid-template-columns: 1fr;
  }

  .cp-sales-basis .cp-sales-basis-form {
    grid-template-columns: 1fr;
  }

  .cp-return-rate-control {
    grid-template-columns: 1fr;
  }

  .cp-order-growth-control {
    grid-template-columns: 1fr;
  }

  .cp-return-rate-control label:first-child input {
    max-width: none;
  }

  .cp-editor-row {
    grid-template-columns: 28px minmax(86px, 0.42fr) minmax(0, 1fr);
  }

  .cp-editor-row-compact input {
    max-width: none;
  }

  .cp-product-table {
    display: grid;
    gap: 10px;
    border: 0;
    background: transparent;
  }

  .cp-product-row,
  .cp-product-row.is-head {
    grid-template-columns: 1fr;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    background: var(--cp-card);
  }

  .cp-product-row.is-head {
    display: none;
  }

  .cp-returnflow-month-table {
    border: 0;
    gap: 10px;
    background: transparent;
  }

  .cp-returnflow-month-row,
  .cp-returnflow-month-row.is-head {
    grid-template-columns: 1fr;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    background: var(--cp-card);
  }

  .cp-returnflow-month-row.is-head {
    display: none;
  }

  .cp-campaign-calendar {
    display: grid;
    gap: 10px;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }

  .cp-campaign-upcoming-grid {
    grid-template-columns: 1fr;
  }

  .cp-calendar-head-row {
    display: none;
  }

  .cp-campaign-week {
    grid-template-columns: 1fr;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    overflow: hidden;
  }

  .cp-calendar-cell {
    grid-row: auto;
    min-height: auto;
    border-right: 0;
  }

  .cp-campaign-bar {
    grid-row: auto;
    grid-column: 1 !important;
    margin: 6px 10px 10px;
  }

  .cp-campaign-dialog-intro {
    grid-template-columns: 1fr;
  }
}

.cp-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 18px;
  color: var(--cp-muted);
  font-weight: 700;
}

@media (max-width: 640px) {
  .cp-kpi-row,
  .cp-month-grid,
  .cp-month-stats {
    grid-template-columns: 1fr;
  }

  .cp-message-bubble {
    max-width: 100%;
  }

  .cp-pagination {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Final CP shell overrides: keep the new top navigation above older mobile rules. */
.customer-portal.cp-signed-in .cp-topbar {
  position: sticky;
  top: 0;
  z-index: 80;
  display: block;
  height: auto;
  min-height: 76px;
  padding: 0;
  color: var(--cp-ink);
  background: rgba(255, 255, 255, 0.92);
}

.customer-portal.cp-signed-in .cp-dashboard-hero {
  min-height: 280px;
  padding: 46px 54px;
}

.customer-portal.cp-signed-in .cp-dashboard-hero h2 {
  font-size: clamp(42px, 5vw, 70px);
}

.customer-portal.cp-signed-in .cp-dashboard-hero::before,
.customer-portal.cp-signed-in .cp-dashboard-hero::after {
  display: none;
}

.customer-portal.cp-signed-in .cp-topbar-actions {
  height: auto;
  flex-direction: row;
  align-items: center;
  padding: 0;
}

@media (max-width: 900px) {
  .customer-portal.cp-signed-in .cp-topbar {
    padding: 0;
    position: sticky;
  }

  .customer-portal.cp-signed-in .cp-topbar-inner {
    display: grid;
  }

  .customer-portal.cp-signed-in .cp-topbar-actions {
    width: auto;
    align-items: center;
    justify-content: flex-end;
  }

  .customer-portal.cp-signed-in .cp-profile-pill {
    width: auto;
  }

  .customer-portal.cp-signed-in .cp-owner-switcher {
    display: none;
  }

  .customer-portal.cp-signed-in .cp-topnav {
    display: flex;
  }
}

@media (max-width: 760px) {
  .customer-portal.cp-signed-in .cp-dashboard-hero {
    min-height: auto;
    padding: 30px 22px;
  }

  .customer-portal.cp-signed-in .cp-dashboard-hero h2 {
    font-size: 42px;
  }
}

/* CP designrunde 1B: calmer premium dashboard polish. */
.customer-portal.cp-signed-in {
  --cp-blue: #1f5fbf;
  --cp-blue-dark: #123f86;
  --cp-blue-soft: #eef6ff;
  --cp-border: #e2ebf6;
  --cp-border-strong: #cfdbeb;
  --cp-shadow: 0 16px 42px rgba(8, 23, 53, 0.075);
  --cp-shadow-soft: 0 6px 18px rgba(8, 23, 53, 0.055);
  background:
    radial-gradient(circle at 10% -8%, rgba(31, 95, 191, 0.07), transparent 32%),
    linear-gradient(180deg, #fbfdff 0%, #f8fbff 48%, #ffffff 100%);
}

.customer-portal.cp-signed-in .cp-topbar {
  min-height: 66px;
  border-bottom-color: rgba(226, 235, 246, 0.92);
  box-shadow: 0 4px 18px rgba(8, 23, 53, 0.04);
}

.customer-portal.cp-signed-in .cp-topbar-inner {
  min-height: 66px;
  gap: 14px;
  padding: 9px 24px;
}

.customer-portal.cp-signed-in .cp-brand-mark {
  width: 38px;
  height: 38px;
}

.customer-portal.cp-signed-in .cp-brand-mark img {
  width: 32px;
  height: 29px;
}

.customer-portal.cp-signed-in .cp-topbar-brand strong {
  font-size: 19px;
}

.customer-portal.cp-signed-in .cp-topbar-brand small {
  font-size: 11px;
}

.customer-portal.cp-signed-in .cp-topnav {
  gap: 3px;
}

.customer-portal.cp-signed-in .cp-topnav a {
  min-height: 38px;
  gap: 7px;
  padding: 0 11px;
  border-radius: 10px;
  color: #2d3b55;
  font-size: 13px;
  font-weight: 750;
}

.customer-portal.cp-signed-in .cp-topnav a svg {
  width: 16px;
  height: 16px;
}

.customer-portal.cp-signed-in .cp-topnav a:hover,
.customer-portal.cp-signed-in .cp-topnav a.active {
  color: var(--cp-blue-dark);
  border-color: #d7e5f6;
  background: #f5f9ff;
  box-shadow: inset 0 -2px 0 rgba(31, 95, 191, 0.28);
}

.customer-portal.cp-signed-in .cp-search {
  min-height: 38px;
  max-width: 390px;
  border-radius: 11px;
  background: #fbfdff;
  box-shadow: none;
}

.customer-portal.cp-signed-in .cp-search input {
  font-size: 13px;
}

.customer-portal.cp-signed-in .cp-search kbd {
  min-width: 34px;
  padding: 3px 7px;
  font-size: 11px;
}

.customer-portal.cp-signed-in .cp-notification {
  width: 38px;
  height: 38px;
  min-height: 38px;
}

.customer-portal.cp-signed-in .cp-profile-pill {
  min-height: 42px;
  padding: 3px 9px 3px 4px;
}

.customer-portal.cp-signed-in .cp-profile-pill > span,
.customer-portal.cp-signed-in .cp-profile-pill .cp-avatar {
  width: 34px;
  height: 34px;
  font-size: 11px;
}

.customer-portal.cp-signed-in .cp-profile-pill strong {
  max-width: 160px;
  font-size: 13px;
}

.customer-portal.cp-signed-in .cp-owner-switcher {
  min-height: 38px;
  border-radius: 11px;
}

.customer-portal.cp-signed-in .cp-owner-switcher select {
  min-height: 30px;
}

.customer-portal.cp-signed-in .cp-main {
  padding-top: 24px;
}

.customer-portal.cp-signed-in .cp-dashboard-hero {
  min-height: 188px;
  grid-template-columns: minmax(0, 0.92fr) minmax(260px, 0.58fr);
  gap: 18px;
  padding: 28px 34px;
  border-radius: 18px;
  border-color: #e0ebf8;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 251, 255, 0.98) 58%, rgba(239, 247, 255, 0.92) 100%);
  box-shadow: 0 12px 34px rgba(31, 95, 191, 0.07);
}

.customer-portal.cp-signed-in .cp-hero-eyebrow {
  margin-bottom: 9px;
  color: #2b5ea8;
  font-size: 15px;
  font-weight: 780;
}

.customer-portal.cp-signed-in .cp-dashboard-hero h2 {
  max-width: 620px;
  font-size: clamp(36px, 3.2vw, 44px);
  line-height: 1.04;
}

.customer-portal.cp-signed-in .cp-dashboard-hero p {
  max-width: 560px;
  margin-top: 12px;
  color: #53637c;
  font-size: 15px;
  line-height: 1.55;
}

.customer-portal.cp-signed-in .cp-hero-actions {
  gap: 9px;
  margin-top: 18px;
}

.customer-portal.cp-signed-in .cp-dashboard-hero-visual {
  min-height: 148px;
  opacity: 0.72;
}

.customer-portal.cp-signed-in .cp-parcel-scene {
  inset: -8px 0 -8px;
}

.customer-portal.cp-signed-in .cp-scene-box {
  right: 18%;
  bottom: 36px;
  width: 152px;
  height: 98px;
  border-radius: 14px;
  box-shadow: 0 18px 36px rgba(79, 49, 19, 0.12);
}

.customer-portal.cp-signed-in .cp-scene-box img {
  left: 52px;
  top: 35px;
  width: 48px;
  height: 42px;
  opacity: 0.86;
}

.customer-portal.cp-signed-in .cp-scene-chart {
  right: 5%;
  top: 18px;
  width: 132px;
  height: 88px;
  border-radius: 14px;
  opacity: 0.62;
}

.customer-portal.cp-signed-in .cp-scene-card {
  left: 15%;
  bottom: 42px;
  width: 104px;
  height: 64px;
  border-radius: 14px;
  opacity: 0.64;
}

.customer-portal.cp-signed-in .cp-scene-platform {
  bottom: 14px;
  height: 30px;
  opacity: 0.72;
}

.customer-portal.cp-signed-in .cp-scene-cloud.one {
  width: 108px;
  height: 48px;
}

.customer-portal.cp-signed-in .cp-scene-cloud.two {
  width: 86px;
  height: 40px;
}

.customer-portal.cp-signed-in .cp-status-strip {
  gap: 10px;
  margin: 12px 0;
}

.customer-portal.cp-signed-in .cp-status-strip article {
  min-height: 68px;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(8, 23, 53, 0.045);
}

.customer-portal.cp-signed-in .cp-status-strip svg,
.customer-portal.cp-signed-in .cp-status-dot {
  width: 32px;
  height: 32px;
}

.customer-portal.cp-signed-in .cp-status-strip svg {
  padding: 7px;
}

.customer-portal.cp-signed-in .cp-status-strip strong {
  font-size: 14px;
}

.customer-portal.cp-signed-in .cp-status-strip small {
  font-size: 11px;
}

.customer-portal.cp-signed-in .cp-kpi-row {
  gap: 10px;
  margin: 12px 0;
}

.customer-portal.cp-signed-in .cp-kpi-card {
  min-height: 92px;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  padding: 14px;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(8, 23, 53, 0.045);
}

.customer-portal.cp-signed-in .cp-kpi-icon,
.customer-portal.cp-signed-in .cp-row-thumb,
.customer-portal.cp-signed-in .cp-timeline-icon,
.customer-portal.cp-signed-in .cp-campaign-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.customer-portal.cp-signed-in .cp-kpi-icon svg,
.customer-portal.cp-signed-in .cp-row-thumb svg,
.customer-portal.cp-signed-in .cp-timeline-icon svg,
.customer-portal.cp-signed-in .cp-campaign-icon svg {
  width: 18px;
  height: 18px;
}

.customer-portal.cp-signed-in .cp-kpi-copy strong,
.customer-portal.cp-signed-in .cp-kpi-card > strong {
  margin: 3px 0;
  font-size: 22px;
}

.customer-portal.cp-signed-in .cp-kpi-copy span,
.customer-portal.cp-signed-in .cp-kpi-copy small {
  font-size: 11px;
}

.customer-portal.cp-signed-in .cp-section-heading {
  margin: 20px 0 10px;
}

.customer-portal.cp-signed-in .cp-section-heading h2 {
  margin-top: 4px;
  font-size: 21px;
}

.customer-portal.cp-signed-in .cp-section-kicker,
.customer-portal.cp-signed-in .cp-section-heading > a {
  font-size: 13px;
}

.customer-portal.cp-signed-in .cp-recommendation-grid {
  gap: 10px;
  margin-bottom: 12px;
}

.customer-portal.cp-signed-in .cp-recommendation-card {
  min-height: 168px;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 13px;
  padding: 17px;
  border-radius: 14px;
  box-shadow: 0 5px 16px rgba(8, 23, 53, 0.05);
}

.customer-portal.cp-signed-in .cp-recommendation-icon {
  width: 48px;
  height: 48px;
}

.customer-portal.cp-signed-in .cp-recommendation-icon svg {
  width: 22px;
  height: 22px;
}

.customer-portal.cp-signed-in .cp-recommendation-label {
  min-height: 21px;
  padding: 0 8px;
  font-size: 10px;
}

.customer-portal.cp-signed-in .cp-recommendation-card h3 {
  margin-top: 9px;
  font-size: 16px;
}

.customer-portal.cp-signed-in .cp-recommendation-card p {
  margin: 6px 0 13px;
  font-size: 13px;
  line-height: 1.48;
}

.customer-portal.cp-signed-in .cp-panel,
.customer-portal.cp-signed-in .cp-card {
  padding: 18px;
  border-radius: 15px;
  box-shadow: 0 5px 16px rgba(8, 23, 53, 0.05);
}

.customer-portal.cp-signed-in .cp-dashboard-grid,
.customer-portal.cp-signed-in .cp-dashboard-grid.is-even,
.customer-portal.cp-signed-in .cp-stack {
  gap: 12px;
}

.customer-portal.cp-signed-in .cp-section-gap {
  margin-top: 12px;
}

.customer-portal.cp-signed-in .cp-panel-header {
  margin-bottom: 12px;
}

.customer-portal.cp-signed-in .cp-panel-header h2,
.customer-portal.cp-signed-in .cp-panel h2,
.customer-portal.cp-signed-in .cp-card h2 {
  font-size: 16px;
}

.customer-portal.cp-signed-in .cp-panel-header p,
.customer-portal.cp-signed-in .cp-panel p,
.customer-portal.cp-signed-in .cp-card p {
  font-size: 13px;
  line-height: 1.45;
}

.customer-portal.cp-signed-in .cp-btn,
.customer-portal.cp-signed-in .btn {
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 820;
}

.customer-portal.cp-signed-in .cp-btn-primary,
.customer-portal.cp-signed-in .btn-primary {
  background: #1f5fbf;
  box-shadow: 0 8px 18px rgba(31, 95, 191, 0.16);
}

.customer-portal.cp-signed-in .cp-btn-primary:hover,
.customer-portal.cp-signed-in .btn-primary:hover {
  box-shadow: 0 11px 24px rgba(31, 95, 191, 0.20);
}

.customer-portal.cp-signed-in .cp-badge,
.customer-portal.cp-signed-in .status-pill {
  min-height: 22px;
  padding: 0 8px;
  font-size: 11px;
}

.customer-portal.cp-signed-in .cp-data-footer {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(8, 23, 53, 0.045);
}

@media (max-width: 1100px) {
  .customer-portal.cp-signed-in .cp-topbar-inner {
    min-height: 62px;
    padding: 9px 16px;
  }

  .customer-portal.cp-signed-in .cp-dashboard-hero {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.42fr);
    min-height: 170px;
    padding: 24px;
  }

  .customer-portal.cp-signed-in .cp-dashboard-hero h2 {
    font-size: 36px;
  }
}

@media (max-width: 760px) {
  .customer-portal.cp-signed-in .cp-main {
    padding-top: 16px;
  }

  .customer-portal.cp-signed-in .cp-dashboard-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 22px 18px;
  }

  .customer-portal.cp-signed-in .cp-dashboard-hero h2 {
    font-size: 30px;
    line-height: 1.08;
  }

  .customer-portal.cp-signed-in .cp-dashboard-hero p {
    font-size: 14px;
  }

  .customer-portal.cp-signed-in .cp-dashboard-hero-visual {
    display: none;
  }

  .customer-portal.cp-signed-in .cp-status-strip,
  .customer-portal.cp-signed-in .cp-kpi-row {
    gap: 8px;
    margin: 10px 0;
  }

  .customer-portal.cp-signed-in .cp-recommendation-card {
    grid-template-columns: 1fr;
  }
}

/* CP designrunde 2: topbar balance and Shipshark magenta brand accent. */
.customer-portal {
  --cp-brand-pink: var(--ss-magenta-500, #d566c4);
  --cp-brand-pink-dark: var(--ss-magenta-700, #b93aad);
  --cp-brand-pink-soft: #fff2fc;
  --cp-brand-pink-border: #f3c9eb;
  --cp-accent: var(--cp-brand-pink);
  --cp-accent-dark: var(--cp-brand-pink-dark);
  --cp-soft: var(--cp-brand-pink-soft);
  --cp-blue: var(--cp-brand-pink);
  --cp-blue-dark: var(--cp-brand-pink-dark);
  --cp-blue-soft: var(--cp-brand-pink-soft);
}

.customer-portal.cp-signed-in {
  background:
    radial-gradient(circle at 10% -8%, rgba(213, 102, 196, 0.075), transparent 32%),
    linear-gradient(180deg, #fbfdff 0%, #f9fbff 48%, #ffffff 100%);
}

.customer-portal .cp-btn-primary,
.customer-portal .btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--cp-brand-pink-dark), var(--cp-brand-pink));
  box-shadow: 0 14px 30px rgba(213, 102, 196, 0.22);
}

.customer-portal .cp-btn-primary:hover,
.customer-portal .btn-primary:hover {
  box-shadow: 0 18px 38px rgba(213, 102, 196, 0.28);
}

.customer-portal.cp-signed-in .cp-topbar {
  min-height: 64px;
}

.customer-portal.cp-signed-in .cp-topbar-inner {
  grid-template-columns: max-content minmax(520px, 1fr) max-content;
  min-height: 64px;
  gap: 20px;
  padding: 8px 24px;
}

.customer-portal.cp-signed-in .cp-topnav {
  justify-content: center;
  gap: 4px;
}

.customer-portal.cp-signed-in .cp-topnav a {
  min-height: 36px;
  padding: 0 10px;
  border-radius: 9px;
  color: #17243e;
  font-size: 13px;
}

.customer-portal.cp-signed-in .cp-topnav a:hover {
  color: var(--cp-brand-pink-dark);
  border-color: var(--cp-brand-pink-border);
  background: rgba(255, 242, 252, 0.76);
  box-shadow: none;
}

.customer-portal.cp-signed-in .cp-topnav a.active {
  color: var(--cp-brand-pink-dark);
  border-color: var(--cp-brand-pink-border);
  background: var(--cp-brand-pink-soft);
  box-shadow: inset 0 -2px 0 rgba(213, 102, 196, 0.42);
}

.customer-portal.cp-signed-in .cp-topnav a.active svg,
.customer-portal.cp-signed-in .cp-topnav a:hover svg {
  color: var(--cp-brand-pink-dark);
}

.customer-portal.cp-signed-in .cp-topbar-tools,
.customer-portal.cp-signed-in .cp-search {
  display: none;
}

.customer-portal.cp-signed-in .cp-topbar-actions {
  gap: 8px;
}

.customer-portal.cp-signed-in .cp-notification {
  color: #17243e;
  border-color: var(--cp-border);
  background: #fff;
}

.customer-portal.cp-signed-in .cp-notification span {
  background: var(--cp-brand-pink);
}

.customer-portal.cp-signed-in .cp-profile-pill > span,
.customer-portal.cp-signed-in .cp-profile-pill .cp-avatar {
  background: linear-gradient(135deg, var(--cp-brand-pink-dark), var(--cp-brand-pink));
}

.customer-portal.cp-signed-in .cp-topbar-brand small,
.customer-portal.cp-signed-in .cp-hero-eyebrow,
.customer-portal.cp-signed-in .cp-section-kicker,
.customer-portal.cp-signed-in .cp-section-heading > a,
.customer-portal.cp-signed-in .cp-footer-legal-links a,
.customer-portal.cp-signed-in .cp-footer-brand em {
  color: var(--cp-brand-pink-dark);
}

.customer-portal.cp-signed-in .cp-dashboard-hero {
  border-color: #eadff0;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.98) 0%, rgba(251, 249, 253, 0.98) 58%, rgba(255, 244, 252, 0.76) 100%);
  box-shadow: 0 12px 34px rgba(213, 102, 196, 0.055);
}

.customer-portal.cp-signed-in .cp-btn-primary,
.customer-portal.cp-signed-in .btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #17243e, #243553);
  box-shadow: 0 8px 18px rgba(23, 36, 62, 0.14);
}

.customer-portal.cp-signed-in .cp-btn-primary:hover,
.customer-portal.cp-signed-in .btn-primary:hover {
  background: linear-gradient(135deg, var(--cp-brand-pink-dark), var(--cp-brand-pink));
  box-shadow: 0 11px 24px rgba(213, 102, 196, 0.22);
}

.customer-portal.cp-signed-in .cp-btn-secondary:hover,
.customer-portal.cp-signed-in .cp-btn-ghost:hover,
.customer-portal.cp-signed-in .btn-secondary:hover {
  color: var(--cp-brand-pink-dark);
  border-color: var(--cp-brand-pink-border);
  background: var(--cp-brand-pink-soft);
}

.customer-portal.cp-signed-in .cp-kpi-icon,
.customer-portal.cp-signed-in .cp-row-thumb,
.customer-portal.cp-signed-in .cp-timeline-icon,
.customer-portal.cp-signed-in .cp-campaign-icon,
.customer-portal.cp-signed-in .cp-status-strip svg,
.customer-portal.cp-signed-in .cp-recommendation-icon {
  color: var(--cp-brand-pink-dark);
  background: var(--cp-brand-pink-soft);
}

.customer-portal.cp-signed-in .cp-kpi-icon.blue,
.customer-portal.cp-signed-in .cp-row-thumb.blue,
.customer-portal.cp-signed-in .cp-timeline-icon.blue {
  color: var(--cp-brand-pink-dark);
  background: var(--cp-brand-pink-soft);
}

.customer-portal.cp-signed-in .cp-badge.info,
.customer-portal.cp-signed-in .status-info {
  color: var(--cp-brand-pink-dark);
  background: var(--cp-brand-pink-soft);
}

.customer-portal.cp-signed-in .cp-recommendation-label,
.customer-portal.cp-signed-in .cp-badge.accent {
  color: var(--cp-brand-pink-dark);
  background: var(--cp-brand-pink-soft);
}

.customer-portal.cp-signed-in .cp-progress span {
  background: linear-gradient(90deg, #17243e, var(--cp-brand-pink));
}

.customer-portal.cp-signed-in .cp-dashboard-forecast-ring {
  background:
    radial-gradient(circle at center, #fff 0 58%, transparent 59%),
    conic-gradient(var(--cp-brand-pink) calc(var(--forecast-progress) * 1%), #e7eef8 0);
  box-shadow: 0 12px 28px rgba(213, 102, 196, 0.12);
}

.customer-portal.cp-signed-in input:focus,
.customer-portal.cp-signed-in select:focus,
.customer-portal.cp-signed-in textarea:focus {
  border-color: var(--cp-brand-pink);
  box-shadow: 0 0 0 3px rgba(213, 102, 196, 0.13);
}

@media (max-width: 1380px) {
  .customer-portal.cp-signed-in .cp-topbar-inner {
    grid-template-columns: max-content minmax(0, 1fr) max-content;
  }

  .customer-portal.cp-signed-in .cp-topbar-actions {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 1080px) {
  .customer-portal.cp-signed-in .cp-topbar-inner {
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 9px 16px;
  }

  .customer-portal.cp-signed-in .cp-topnav {
    grid-column: 1 / -1;
    justify-content: flex-start;
    overflow-x: auto;
  }
}

/* CP designrunde 3: align menu and typography with shipshark.dk. */
.customer-portal {
  --cp-font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-family: var(--cp-font-sans);
  font-feature-settings: normal;
  font-variation-settings: normal;
}

.customer-portal button,
.customer-portal input,
.customer-portal select,
.customer-portal textarea,
.customer-portal nav {
  font-family: var(--cp-font-sans);
  letter-spacing: 0;
}

.customer-portal.cp-signed-in .cp-topbar {
  min-height: 72px;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(229, 231, 235, 0.92);
  box-shadow: 0 1px 10px rgba(17, 24, 39, 0.045);
  backdrop-filter: blur(14px);
}

.customer-portal.cp-signed-in .cp-topbar-inner {
  width: min(1280px, 100%);
  min-height: 72px;
  grid-template-columns: minmax(176px, max-content) minmax(0, 1fr) max-content;
  gap: 28px;
  padding: 14px 18px;
}

.customer-portal.cp-signed-in .cp-topbar-brand {
  gap: 10px;
}

.customer-portal.cp-signed-in .cp-brand-mark {
  width: auto;
  height: 40px;
}

.customer-portal.cp-signed-in .cp-brand-mark img {
  width: auto;
  height: 38px;
  max-width: 170px;
  object-fit: contain;
}

.customer-portal.cp-signed-in .cp-topbar-brand > span:last-child {
  display: grid;
}

.customer-portal.cp-signed-in .cp-topbar-brand strong {
  display: none;
}

.customer-portal.cp-signed-in .cp-topbar-brand small {
  margin: 0;
  color: #6b7280;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
}

.customer-portal.cp-signed-in .cp-topnav {
  justify-content: center;
  gap: 0;
  overflow: visible;
}

.customer-portal.cp-signed-in .cp-topnav a {
  position: relative;
  min-height: 40px;
  gap: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 0;
  color: #374151;
  background: transparent;
  box-shadow: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  transition: color 180ms ease;
}

.customer-portal.cp-signed-in .cp-topnav a svg {
  display: none;
}

.customer-portal.cp-signed-in .cp-topnav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--cp-brand-pink);
  transform: translateX(-50%);
  transition: width 180ms ease;
}

.customer-portal.cp-signed-in .cp-topnav a:hover,
.customer-portal.cp-signed-in .cp-topnav a.active {
  color: var(--cp-brand-pink-dark);
  border: 0;
  background: transparent;
  box-shadow: none;
}

.customer-portal.cp-signed-in .cp-topnav a:hover::after {
  width: 34%;
  opacity: 0.62;
}

.customer-portal.cp-signed-in .cp-topnav a.active::after {
  width: 50%;
  opacity: 1;
}

.customer-portal.cp-signed-in .cp-topnav a.is-locked {
  color: #7b8497;
}

.customer-portal.cp-signed-in .cp-topnav a.is-locked::after {
  background: #d7dfeb;
}

.customer-portal.cp-signed-in .cp-topnav a.is-locked:hover {
  color: var(--cp-brand-pink-dark);
}

.cp-nav-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 7px;
  padding: 3px 7px;
  border: 1px solid var(--cp-brand-pink-border);
  border-radius: 999px;
  background: var(--cp-brand-pink-soft);
  color: var(--cp-brand-pink-dark);
  font-size: 10px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}

.cp-module-lock-stage {
  position: relative;
  min-height: 620px;
  margin-top: 18px;
  isolation: isolate;
}

.cp-module-lock-preview {
  min-height: 560px;
  pointer-events: none;
  user-select: none;
  filter: blur(4px);
  opacity: 0.48;
  transform: scale(0.985);
  transform-origin: center top;
}

.cp-module-lock-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(248, 251, 255, 0.76));
  z-index: 1;
}

.cp-module-lock-preview-shell {
  display: grid;
  gap: 16px;
  min-height: 560px;
}

.cp-module-lock-preview-shell span {
  display: block;
  border: 1px solid #e3ebf6;
  border-radius: 16px;
  background: linear-gradient(135deg, #fff 0%, #f8fbff 52%, var(--cp-brand-pink-soft) 100%);
  box-shadow: 0 14px 34px rgba(15, 35, 68, 0.06);
}

.cp-preview-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.cp-preview-kpis span {
  min-height: 96px;
}

.cp-preview-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.cp-preview-board span {
  min-height: 132px;
}

.cp-preview-editor {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 14px;
}

.cp-preview-editor span {
  min-height: 74px;
}

.cp-preview-toolbar {
  display: grid;
  grid-template-columns: 1fr 120px 120px;
  gap: 14px;
}

.cp-preview-toolbar span {
  min-height: 76px;
}

.cp-preview-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.cp-preview-calendar span {
  min-height: 82px;
}

.cp-preview-calendar span.has-line {
  background: linear-gradient(135deg, var(--cp-brand-pink-soft), #fff 44%, #eaf2ff 100%);
}

.cp-preview-side {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.cp-preview-side span {
  min-height: 110px;
}

.cp-module-lock-card {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 44%;
  width: min(560px, calc(100% - 32px));
  transform: translate(-50%, -50%);
  padding: 34px;
  border: 1px solid var(--cp-brand-pink-border);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 28px 80px rgba(15, 35, 68, 0.18);
  text-align: center;
  backdrop-filter: blur(18px);
}

.cp-module-lock-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 14px;
  border-radius: 20px;
  background: var(--cp-brand-pink-soft);
  color: var(--cp-brand-pink-dark);
}

.cp-module-lock-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  padding: 7px 12px;
  border: 1px solid var(--cp-brand-pink-border);
  border-radius: 999px;
  background: #fff7fd;
  color: var(--cp-brand-pink-dark);
  font-size: 12px;
  font-weight: 850;
}

.cp-module-lock-card h2 {
  margin: 0;
  color: var(--cp-navy);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.05;
  letter-spacing: 0;
}

.cp-module-lock-card p {
  margin: 14px auto 0;
  max-width: 460px;
  color: #5e6c83;
  font-size: 16px;
  line-height: 1.6;
}

.cp-module-lock-card small {
  display: block;
  margin: 12px auto 0;
  max-width: 430px;
  color: #8591a5;
  font-size: 13px;
  line-height: 1.45;
}

.cp-module-lock-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

@media (max-width: 760px) {
  .cp-module-lock-stage {
    min-height: 540px;
  }

  .cp-module-lock-preview,
  .cp-module-lock-preview-shell {
    min-height: 500px;
  }

  .cp-preview-kpis,
  .cp-preview-board,
  .cp-preview-editor,
  .cp-preview-toolbar,
  .cp-preview-side {
    grid-template-columns: 1fr;
  }

  .cp-preview-calendar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cp-module-lock-card {
    top: 48%;
    padding: 24px;
    border-radius: 22px;
  }

  .cp-module-lock-card h2 {
    font-size: 28px;
  }

  .cp-module-lock-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .cp-module-lock-actions .cp-btn,
  .cp-module-lock-actions .cp-mini-link {
    justify-content: center;
    width: 100%;
  }
}

.customer-portal.cp-signed-in .cp-topbar-actions {
  gap: 12px;
}

.customer-portal.cp-signed-in .cp-notification {
  width: 34px;
  height: 34px;
  min-height: 34px;
  border: 0;
  color: #4b5563;
  background: transparent;
}

.customer-portal.cp-signed-in .cp-notification:hover {
  color: var(--cp-brand-pink-dark);
  background: var(--cp-brand-pink-soft);
}

.customer-portal.cp-signed-in .cp-notification svg {
  width: 18px;
  height: 18px;
}

.customer-portal.cp-signed-in .cp-notification span {
  top: 7px;
  right: 7px;
  width: 7px;
  height: 7px;
}

.customer-portal.cp-signed-in .cp-owner-switcher {
  min-height: 36px;
  padding: 3px 4px 3px 10px;
  border-color: #e5e7eb;
  border-radius: 999px;
  background: #fff;
  box-shadow: none;
}

.customer-portal.cp-signed-in .cp-owner-switcher label {
  color: #6b7280;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
}

.customer-portal.cp-signed-in .cp-owner-switcher select {
  width: min(220px, 18vw);
  min-height: 28px;
  color: #111827;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
}

.customer-portal.cp-signed-in .cp-profile-pill {
  min-height: 40px;
  gap: 8px;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.customer-portal.cp-signed-in .cp-profile-pill:hover {
  background: transparent;
}

.customer-portal.cp-signed-in .cp-profile-pill > span,
.customer-portal.cp-signed-in .cp-profile-pill .cp-avatar {
  width: 34px;
  height: 34px;
  font-size: 11px;
}

.customer-portal.cp-signed-in .cp-profile-pill strong {
  color: #111827;
  font-size: 13px;
  font-weight: 600;
}

.customer-portal.cp-signed-in .cp-profile-pill small {
  color: #6b7280;
  font-size: 11px;
  font-weight: 400;
}

.customer-portal.cp-signed-in .cp-profile-pill > svg {
  display: none;
}

.customer-portal.cp-signed-in .cp-logout-link {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  color: #374151;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
}

.customer-portal.cp-signed-in .cp-logout-link:hover {
  color: #fff;
  border-color: var(--cp-brand-pink);
  background: var(--cp-brand-pink);
}

.customer-portal.cp-signed-in .cp-page-intro h1,
.customer-portal.cp-signed-in .cp-page-toolbar h1,
.customer-portal.cp-signed-in .cp-dashboard-hero h2 {
  font-weight: 800;
  letter-spacing: -0.01em;
}

.customer-portal.cp-signed-in .cp-panel-header h2,
.customer-portal.cp-signed-in .cp-panel h2,
.customer-portal.cp-signed-in .cp-card h2 {
  font-weight: 700;
}

.customer-portal.cp-signed-in .cp-btn,
.customer-portal.cp-signed-in .btn {
  border-radius: 999px;
  font-weight: 600;
}

@media (max-width: 1180px) {
  .customer-portal.cp-signed-in .cp-topbar-inner {
    width: 100%;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    gap: 16px;
  }

  .customer-portal.cp-signed-in .cp-topnav {
    justify-content: flex-start;
    overflow-x: auto;
  }

  .customer-portal.cp-signed-in .cp-topnav a {
    flex: 0 0 auto;
    padding: 0 13px;
  }

  .customer-portal.cp-signed-in .cp-owner-switcher {
    display: none;
  }
}

@media (max-width: 760px) {
  .customer-portal.cp-signed-in .cp-topbar-inner {
    grid-template-columns: 1fr auto;
    padding: 12px 14px 9px;
  }

  .customer-portal.cp-signed-in .cp-brand-mark {
    height: 34px;
  }

  .customer-portal.cp-signed-in .cp-brand-mark img {
    height: 32px;
    max-width: 145px;
  }

  .customer-portal.cp-signed-in .cp-topnav {
    grid-column: 1 / -1;
    padding-top: 4px;
  }

  .customer-portal.cp-signed-in .cp-topnav a {
    min-height: 36px;
    padding: 0 12px;
    font-size: 13px;
  }

  .customer-portal.cp-signed-in .cp-profile-pill em,
  .customer-portal.cp-signed-in .cp-logout-link {
    display: none;
  }
}

/* CP designrunde 3B: topbar layout hotfix and compact webshop switcher. */
.customer-portal.cp-signed-in .cp-topbar {
  width: 100%;
  min-height: 68px;
  overflow: visible;
}

.customer-portal.cp-signed-in .cp-topbar-inner {
  width: 100%;
  max-width: none;
  min-height: 68px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(18px, 2.4vw, 40px);
  padding: 12px clamp(18px, 3vw, 42px);
}

.customer-portal.cp-signed-in .cp-topbar-brand {
  min-width: 0;
  flex: 0 0 auto;
  overflow: hidden;
}

.customer-portal.cp-signed-in .cp-brand-mark {
  height: 36px;
  max-width: 152px;
  overflow: hidden;
}

.customer-portal.cp-signed-in .cp-brand-mark img {
  height: 34px;
  max-width: 150px;
}

.customer-portal.cp-signed-in .cp-topbar-brand > span:last-child {
  display: none;
}

.customer-portal.cp-signed-in .cp-topnav {
  min-width: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: clamp(12px, 2.2vw, 34px);
  overflow: hidden;
}

.customer-portal.cp-signed-in .cp-topnav a {
  flex: 0 0 auto;
  min-width: max-content;
  min-height: 40px;
  padding: 0;
  white-space: nowrap;
}

.customer-portal.cp-signed-in .cp-topbar-actions {
  min-width: 0;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  white-space: nowrap;
}

.customer-portal.cp-signed-in .cp-owner-switcher {
  position: relative;
  width: 58px;
  min-width: 58px;
  max-width: 58px;
  height: 36px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--cp-brand-pink-border);
  border-radius: 999px;
  background: var(--cp-brand-pink-soft);
  overflow: hidden;
  flex: 0 0 58px;
}

.customer-portal.cp-signed-in .cp-owner-switcher label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.customer-portal.cp-signed-in .cp-owner-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  height: 100%;
  color: var(--cp-brand-pink-dark);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.customer-portal.cp-signed-in .cp-owner-chip svg {
  width: 12px;
  height: 12px;
}

.customer-portal.cp-signed-in .cp-owner-switcher select {
  position: absolute;
  inset: 0;
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 100%;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.customer-portal.cp-signed-in .cp-notification {
  flex: 0 0 34px;
}

.customer-portal.cp-signed-in .cp-profile-pill {
  flex: 0 0 auto;
  min-width: 0;
}

.customer-portal.cp-signed-in .cp-profile-pill em {
  min-width: 0;
}

.customer-portal.cp-signed-in .cp-profile-pill strong {
  max-width: 140px;
}

.customer-portal.cp-signed-in .cp-logout-link {
  flex: 0 0 auto;
}

@media (max-width: 1320px) {
  .customer-portal.cp-signed-in .cp-topbar-inner {
    gap: 18px;
    padding-inline: 22px;
  }

  .customer-portal.cp-signed-in .cp-topnav {
    gap: clamp(10px, 1.6vw, 22px);
  }

  .customer-portal.cp-signed-in .cp-topnav a {
    font-size: 13px;
  }

  .customer-portal.cp-signed-in .cp-profile-pill strong {
    max-width: 112px;
  }
}

@media (max-width: 1120px) {
  .customer-portal.cp-signed-in .cp-topbar-inner {
    grid-template-columns: 1fr auto;
    gap: 10px 14px;
  }

  .customer-portal.cp-signed-in .cp-topnav {
    grid-column: 1 / -1;
    justify-content: flex-start;
    gap: 22px;
    overflow-x: auto;
    padding-top: 4px;
    scrollbar-width: none;
  }

  .customer-portal.cp-signed-in .cp-topnav::-webkit-scrollbar {
    display: none;
  }

  .customer-portal.cp-signed-in .cp-owner-switcher {
    display: inline-flex;
  }
}

@media (max-width: 760px) {
  .customer-portal.cp-signed-in .cp-topbar-inner {
    padding: 10px 14px 8px;
  }

  .customer-portal.cp-signed-in .cp-brand-mark {
    height: 32px;
    max-width: 136px;
  }

  .customer-portal.cp-signed-in .cp-brand-mark img {
    height: 30px;
    max-width: 134px;
  }

  .customer-portal.cp-signed-in .cp-owner-switcher {
    width: 52px;
    min-width: 52px;
    max-width: 52px;
    flex-basis: 52px;
  }

  .customer-portal.cp-signed-in .cp-topbar-actions {
    gap: 8px;
  }
}

/* CP designrunde 4: Products and stock polish. */
.cp-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 16px;
}

.cp-page-header p {
  margin: 0 0 6px;
  color: var(--cp-pink);
  font-size: 12px;
  font-weight: 900;
}

.cp-page-header h1 {
  margin: 0;
  color: var(--cp-ink);
  font-size: 34px;
  font-weight: 900;
  line-height: 1.08;
}

.cp-page-header span {
  display: block;
  margin-top: 8px;
  color: var(--cp-muted);
  font-size: 15px;
  line-height: 1.5;
}

.cp-page-header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.cp-page-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 14px;
}

.cp-filter-card,
.cp-table-card,
.cp-detail-card,
.cp-product-detail-hero,
.cp-soft-warning {
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
  background: var(--cp-card);
  box-shadow: 0 5px 18px rgba(3, 25, 31, 0.05);
}

.cp-filter-card {
  padding: 14px;
  margin-bottom: 14px;
}

.cp-filter-card .cp-products-toolbar,
.cp-filter-card .cp-filter-bar {
  margin: 0;
}

.cp-filter-note {
  display: grid;
  gap: 4px;
  color: var(--cp-muted);
  font-size: 14px;
}

.cp-filter-note strong {
  color: var(--cp-ink);
  font-size: 15px;
}

.cp-table-card,
.cp-detail-card {
  padding: 18px;
}

.cp-table-wrap,
.cp-table-wrapper {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cp-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.cp-table th,
.cp-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--cp-border);
  color: var(--cp-ink);
  font-size: 14px;
  text-align: left;
  vertical-align: middle;
}

.cp-table th {
  color: var(--cp-muted);
  background: rgba(248, 251, 253, 0.78);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.cp-table tr:last-child td {
  border-bottom: 0;
}

.cp-table tr.is-attention td {
  background: rgba(255, 243, 205, 0.22);
}

.cp-table small,
.cp-muted {
  display: block;
  color: var(--cp-muted);
  font-size: 12px;
}

.cp-table-link {
  color: var(--cp-accent-dark);
  font-weight: 900;
}

.cp-table-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  font-weight: 900;
}

.cp-table-sort.is-active {
  color: var(--cp-accent-dark);
}

.cp-product-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
}

.cp-product-thumb,
.cp-product-detail-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cp-accent-dark);
  background: var(--cp-soft);
  flex: 0 0 auto;
}

.cp-product-thumb {
  width: 38px;
  height: 38px;
  border-radius: 10px;
}

.cp-product-thumb svg {
  width: 18px;
  height: 18px;
}

.cp-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.cp-status-badge.is-success {
  color: var(--ss-success-dark);
  background: var(--ss-success-bg);
}

.cp-status-badge.is-warning {
  color: var(--ss-warning-dark);
  background: var(--ss-warning-bg);
}

.cp-status-badge.is-danger {
  color: var(--ss-danger-dark);
  background: var(--ss-danger-bg);
}

.cp-status-badge.is-muted {
  color: var(--cp-muted);
  background: #f3f6f8;
}

.cp-empty-state {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 26px;
  border: 1px dashed var(--cp-border-strong);
  border-radius: var(--cp-radius);
  color: var(--cp-muted);
  background: #fbfdff;
}

.cp-empty-state strong {
  color: var(--cp-ink);
  font-size: 17px;
}

.cp-empty-state p {
  max-width: 620px;
  margin: 0;
  line-height: 1.5;
}

.cp-empty-state.is-compact {
  padding: 16px;
  font-size: 14px;
}

.cp-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.cp-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--cp-accent-dark);
  font-size: 14px;
  font-weight: 900;
}

.cp-back-link svg {
  width: 16px;
  height: 16px;
  transform: rotate(180deg);
}

.cp-product-detail-hero {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 20px;
  margin-bottom: 14px;
  background:
    radial-gradient(circle at 92% 0%, rgba(217, 87, 204, 0.11), transparent 32%),
    var(--cp-card);
}

.cp-product-detail-icon {
  width: 62px;
  height: 62px;
  border-radius: 16px;
}

.cp-product-detail-icon svg {
  width: 28px;
  height: 28px;
}

.cp-product-detail-hero p,
.cp-product-detail-hero h1,
.cp-product-detail-hero span {
  margin: 0;
}

.cp-product-detail-hero p {
  color: var(--cp-pink);
  font-size: 12px;
  font-weight: 900;
}

.cp-product-detail-hero h1 {
  margin-top: 4px;
  color: var(--cp-ink);
  font-size: 28px;
  line-height: 1.12;
}

.cp-product-detail-hero > div > span {
  margin-top: 7px;
  color: var(--cp-muted);
}

.cp-product-detail-hero aside {
  display: grid;
  justify-items: end;
  gap: 6px;
}

.cp-product-detail-hero aside strong {
  color: var(--cp-ink);
  font-size: 24px;
  line-height: 1;
}

.cp-soft-warning {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  margin-bottom: 14px;
  color: var(--ss-warning-dark);
  background: var(--ss-warning-bg);
  border-color: rgba(245, 158, 11, 0.22);
}

.cp-soft-warning > span {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
}

.cp-soft-warning p {
  margin: 4px 0 0;
  color: inherit;
}

.cp-definition-list,
.cp-metric-list {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
}

.cp-definition-list div,
.cp-metric-list div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--cp-border);
}

.cp-definition-list div:last-child,
.cp-metric-list div:last-child {
  border-bottom: 0;
}

.cp-definition-list dt,
.cp-definition-list dd {
  margin: 0;
}

.cp-definition-list dt,
.cp-metric-list span {
  color: var(--cp-muted);
  font-size: 13px;
  font-weight: 800;
}

.cp-definition-list dd,
.cp-metric-list strong {
  color: var(--cp-ink);
  font-weight: 900;
  text-align: right;
}

.cp-metric-list small {
  color: var(--cp-muted);
  text-align: right;
}

.cp-btn-compact {
  min-height: 34px;
  padding: 7px 12px;
  font-size: 13px;
}

.cp-positive { color: var(--ss-success-dark); }
.cp-negative { color: var(--ss-danger-dark); }

.cp-movement-table {
  min-width: 860px;
}

@media (max-width: 1120px) {
  .cp-page-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cp-products-layout,
  .cp-dashboard-grid,
  .cp-detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .cp-page-header {
    display: grid;
    align-items: stretch;
  }

  .cp-page-header h1 {
    font-size: 28px;
  }

  .cp-page-kpis,
  .cp-product-detail-hero {
    grid-template-columns: 1fr;
  }

  .cp-filter-card .cp-products-toolbar,
  .cp-filter-card .cp-filter-bar {
    grid-template-columns: 1fr;
  }

  .cp-product-detail-hero aside {
    justify-items: start;
  }

  .cp-table th,
  .cp-table td {
    padding: 12px 10px;
  }
}

/* CP Runde 12: scalable dropdown navigation and account menu. */
.customer-portal.cp-signed-in .cp-topbar,
.customer-portal.cp-signed-in .cp-topbar-inner {
  overflow: visible;
}

.customer-portal.cp-signed-in .cp-topnav {
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow: visible;
}

.customer-portal.cp-signed-in .cp-nav-group,
.customer-portal.cp-signed-in .cp-account-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.customer-portal.cp-signed-in .cp-nav-group::before,
.customer-portal.cp-signed-in .cp-account-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 14px;
  z-index: 69;
}

.customer-portal.cp-signed-in .cp-nav-link,
.customer-portal.cp-signed-in .cp-nav-trigger {
  position: relative;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #314055;
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.customer-portal.cp-signed-in .cp-topnav .cp-nav-link {
  min-height: 38px;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.customer-portal.cp-signed-in .cp-nav-link svg,
.customer-portal.cp-signed-in .cp-nav-trigger svg {
  display: none;
}

.customer-portal.cp-signed-in .cp-nav-trigger .cp-nav-chevron {
  display: block;
  width: 13px;
  height: 13px;
  color: #9aa6b7;
  transition: transform 160ms ease, color 160ms ease;
}

.customer-portal.cp-signed-in .cp-nav-link::after,
.customer-portal.cp-signed-in .cp-nav-trigger::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--cp-brand-pink);
  transform: translateX(-50%);
  transition: width 160ms ease;
}

.customer-portal.cp-signed-in .cp-nav-link:hover,
.customer-portal.cp-signed-in .cp-nav-link.active,
.customer-portal.cp-signed-in .cp-nav-group:focus-within > .cp-nav-trigger,
.customer-portal.cp-signed-in .cp-nav-group.active > .cp-nav-trigger,
.customer-portal.cp-signed-in .cp-nav-group.is-open > .cp-nav-trigger {
  color: var(--cp-brand-pink-dark);
  background: rgba(213, 102, 196, 0.08);
  border-color: rgba(213, 102, 196, 0.16);
}

.customer-portal.cp-signed-in .cp-nav-link:hover::after,
.customer-portal.cp-signed-in .cp-nav-link.active::after,
.customer-portal.cp-signed-in .cp-nav-group.active > .cp-nav-trigger::after,
.customer-portal.cp-signed-in .cp-nav-group.is-open > .cp-nav-trigger::after {
  width: 48%;
}

.customer-portal.cp-signed-in .cp-nav-group:focus-within .cp-nav-chevron,
.customer-portal.cp-signed-in .cp-nav-group.is-open .cp-nav-chevron {
  color: var(--cp-brand-pink-dark);
  transform: rotate(180deg);
}

.customer-portal.cp-signed-in .cp-nav-dropdown,
.customer-portal.cp-signed-in .cp-account-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  z-index: 70;
  min-width: 250px;
  display: grid;
  gap: 3px;
  padding: 9px;
  border: 1px solid #e5edf7;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 22px 55px rgba(15, 35, 68, 0.15);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

.customer-portal.cp-signed-in .cp-nav-dropdown {
  left: 50%;
  transform: translate(-50%, 6px);
}

.customer-portal.cp-signed-in .cp-account-dropdown {
  right: 0;
  min-width: 286px;
}

.customer-portal.cp-signed-in .cp-nav-group:focus-within > .cp-nav-dropdown,
.customer-portal.cp-signed-in .cp-nav-group.is-open > .cp-nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.customer-portal.cp-signed-in .cp-account-menu:hover > .cp-account-dropdown,
.customer-portal.cp-signed-in .cp-account-menu:focus-within > .cp-account-dropdown,
.customer-portal.cp-signed-in .cp-account-menu.is-open > .cp-account-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.customer-portal.cp-signed-in .cp-nav-dropdown-item,
.customer-portal.cp-signed-in .cp-account-item {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #17243e;
  background: transparent;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.15;
  text-decoration: none;
  white-space: nowrap;
}

.customer-portal.cp-signed-in .cp-topnav .cp-nav-dropdown-item {
  min-height: 42px;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 750;
}

.customer-portal.cp-signed-in .cp-topnav .cp-nav-dropdown-item::after {
  content: none;
  display: none;
}

.customer-portal.cp-signed-in .cp-topnav .cp-nav-dropdown-item svg,
.customer-portal.cp-signed-in .cp-account-item svg {
  flex: 0 0 auto;
  display: block;
  width: 16px;
  height: 16px;
  color: #7c8aa1;
}

.customer-portal.cp-signed-in a.cp-nav-dropdown-item:hover,
.customer-portal.cp-signed-in a.cp-account-item:hover,
.customer-portal.cp-signed-in .cp-nav-dropdown-item.active {
  color: var(--cp-brand-pink-dark);
  border-color: var(--cp-brand-pink-border);
  background: var(--cp-brand-pink-soft);
}

.customer-portal.cp-signed-in .cp-nav-dropdown-item.active svg,
.customer-portal.cp-signed-in a.cp-account-item:hover svg {
  color: var(--cp-brand-pink-dark);
}

.customer-portal.cp-signed-in .cp-nav-item-disabled,
.customer-portal.cp-signed-in .cp-account-item.is-disabled {
  color: #8b96a8;
  cursor: default;
}

.customer-portal.cp-signed-in .cp-nav-item-disabled svg,
.customer-portal.cp-signed-in .cp-account-item.is-disabled svg {
  color: #b7c1cf;
}

.customer-portal.cp-signed-in .cp-nav-dropdown-item.is-locked {
  color: #516075;
}

.customer-portal.cp-signed-in .cp-account-trigger {
  border: 1px solid transparent;
  cursor: pointer;
}

.customer-portal.cp-signed-in .cp-account-trigger:hover,
.customer-portal.cp-signed-in .cp-account-menu.active > .cp-account-trigger,
.customer-portal.cp-signed-in .cp-account-menu.is-open > .cp-account-trigger,
.customer-portal.cp-signed-in .cp-account-menu:focus-within > .cp-account-trigger {
  border-color: var(--cp-brand-pink-border);
  background: var(--cp-brand-pink-soft);
}

.customer-portal.cp-signed-in .cp-account-trigger > svg {
  display: block;
  width: 14px;
  height: 14px;
  color: #9aa6b7;
}

.customer-portal.cp-signed-in .cp-account-section-label {
  margin: 8px 10px 4px;
  color: #7a8799;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.customer-portal.cp-signed-in .cp-account-item.is-logout {
  margin-top: 6px;
  border-top: 1px solid #eef2f7;
  border-radius: 0 0 12px 12px;
  color: #17243e;
}

.customer-portal.cp-signed-in .cp-account-item.active {
  color: var(--cp-brand-pink-dark);
  border-color: var(--cp-brand-pink-border);
  background: var(--cp-brand-pink-soft);
}

.customer-portal.cp-signed-in .cp-nav-badge {
  margin-left: auto;
  padding: 3px 6px;
  font-size: 9px;
}

@media (max-width: 1180px) {
  .customer-portal.cp-signed-in .cp-topnav {
    justify-content: flex-start;
    gap: 4px;
    flex-wrap: wrap;
    overflow: visible;
    padding-bottom: 4px;
  }

  .customer-portal.cp-signed-in .cp-nav-link,
  .customer-portal.cp-signed-in .cp-nav-trigger {
    flex: 0 0 auto;
    padding-inline: 11px;
  }
}

@media (max-width: 760px) {
  .customer-portal.cp-signed-in .cp-topbar-inner {
    grid-template-columns: 1fr auto;
  }

  .customer-portal.cp-signed-in .cp-topbar-actions {
    gap: 6px;
  }

  .customer-portal.cp-signed-in .cp-topnav {
    grid-column: 1 / -1;
    width: 100%;
  }

  .customer-portal.cp-signed-in .cp-nav-dropdown {
    left: 0;
    transform: translateY(6px);
  }

  .customer-portal.cp-signed-in .cp-nav-group:focus-within > .cp-nav-dropdown,
  .customer-portal.cp-signed-in .cp-nav-group.is-open > .cp-nav-dropdown {
    transform: translateY(0);
  }

  .customer-portal.cp-signed-in .cp-account-dropdown {
    position: fixed;
    top: 58px;
    right: 12px;
    max-width: calc(100vw - 24px);
  }

  .customer-portal.cp-signed-in .cp-profile-pill {
    padding-inline: 2px;
  }
}

/* CP Runde 13: dashboard V1 leadership demo. */
.cp-dashboard-v1-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: clamp(22px, 4vw, 52px);
  align-items: center;
  margin: 14px 0 18px;
  padding: clamp(28px, 4vw, 46px);
  border: 1px solid #e4edf7;
  border-radius: 28px;
  background:
    radial-gradient(circle at 82% 20%, rgba(213, 102, 196, 0.14), transparent 30%),
    linear-gradient(135deg, #fff 0%, #f8fbff 52%, #eef7ff 100%);
  box-shadow: 0 22px 55px rgba(15, 35, 68, 0.08);
  overflow: hidden;
}

.cp-dashboard-v1-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
}

.cp-dashboard-v1-copy h1 {
  max-width: 720px;
  margin: 0;
  color: #101b36;
  font-size: clamp(38px, 4.8vw, 64px);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: 0;
}

.cp-dashboard-v1-copy p {
  max-width: 620px;
  margin: 0;
  color: #59687f;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.55;
}

.cp-dashboard-v1-visual {
  min-height: 260px;
  display: grid;
  place-items: center;
}

.cp-dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.cp-dashboard-kpi-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  min-height: 138px;
  padding: 18px;
  border: 1px solid #e5edf7;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(15, 35, 68, 0.055);
}

.cp-dashboard-kpi-card > div {
  display: grid;
  gap: 6px;
}

.cp-dashboard-kpi-card span {
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

.cp-dashboard-kpi-card strong {
  color: #101b36;
  font-size: clamp(26px, 2.2vw, 38px);
  font-weight: 900;
  line-height: 1;
}

.cp-dashboard-kpi-card small {
  color: #7c8aa1;
  font-size: 12px;
  font-weight: 650;
}

.cp-dashboard-section,
.cp-dashboard-main-grid {
  margin-top: 18px;
}

.cp-dashboard-recommendations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.cp-recommendation-card.is-premium .cp-recommendation-icon {
  color: var(--cp-brand-pink-dark);
  background: var(--cp-brand-pink-soft);
}

.cp-recommendation-card.is-info .cp-recommendation-icon,
.cp-recommendation-card.is-success .cp-recommendation-icon {
  color: #2563eb;
  background: #dbeafe;
}

.cp-recommendation-card .cp-btn small,
.cp-dashboard-v1-hero .cp-btn small,
.cp-premium-actions .cp-btn small,
.cp-promote-actions .cp-btn small {
  margin-left: 8px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
  font-size: 10px;
  font-weight: 850;
}

.cp-btn.is-disabled {
  pointer-events: none;
  opacity: 0.62;
}

.cp-dashboard-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 18px;
}

.cp-dashboard-main-grid.is-attention {
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.55fr);
}

.cp-dashboard-main-stack,
.cp-dashboard-side-stack {
  display: grid;
  gap: 18px;
  align-content: start;
}

.cp-next-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cp-next-list a {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 4px 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid #e5edf7;
  border-radius: 16px;
  color: inherit;
  background: #fbfdff;
  text-decoration: none;
}

.cp-next-list a:hover {
  border-color: var(--cp-brand-pink-border);
  background: var(--cp-brand-pink-soft);
}

.cp-next-list a > span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: var(--cp-brand-pink-dark);
  background: #fff;
}

.cp-next-list strong {
  color: #101b36;
  font-size: 14px;
}

.cp-next-list small {
  color: #64748b;
  font-weight: 650;
}

.cp-promote-body {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.cp-promote-thumb {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 24px;
  color: var(--cp-brand-pink-dark);
  background: linear-gradient(135deg, var(--cp-brand-pink-soft), #fff);
}

.cp-promote-body h3 {
  margin: 10px 0 12px;
  color: #101b36;
  font-size: 24px;
  font-weight: 900;
}

.cp-promote-body dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}

.cp-promote-body dl div {
  padding: 10px;
  border: 1px solid #e5edf7;
  border-radius: 14px;
  background: #fbfdff;
}

.cp-promote-body dt,
.cp-promote-body dd {
  margin: 0;
}

.cp-promote-body dt {
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
}

.cp-promote-body dd {
  color: #101b36;
  font-size: 15px;
  font-weight: 900;
}

.cp-promote-actions,
.cp-premium-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.cp-return-summary-grid,
.cp-premium-metrics {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.cp-return-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cp-return-summary-grid div,
.cp-premium-metrics div {
  padding: 13px;
  border: 1px solid #e5edf7;
  border-radius: 16px;
  background: #fbfdff;
}

.cp-return-summary-grid div.is-warning {
  border-color: #fed7aa;
  background: #fff7ed;
}

.cp-return-summary-grid strong,
.cp-premium-metrics strong {
  display: block;
  color: #101b36;
  font-size: 24px;
  font-weight: 900;
}

.cp-return-summary-grid span,
.cp-premium-metrics span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.cp-premium-card {
  background: linear-gradient(135deg, #fff, #fff7fd);
}

.cp-attention-list {
  display: grid;
  gap: 8px;
}

.cp-attention-list a {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid #e5edf7;
  border-radius: 14px;
  color: inherit;
  background: #fff;
  text-decoration: none;
}

.cp-attention-list a:hover {
  border-color: var(--cp-brand-pink-border);
  background: var(--cp-brand-pink-soft);
}

.cp-attention-list strong {
  display: grid;
  gap: 2px;
  color: #101b36;
  font-size: 14px;
  font-weight: 900;
}

.cp-attention-list small,
.cp-attention-list > a > span:last-child {
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
}

.cp-shipshark-tip {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  background: linear-gradient(135deg, #ffffff, #f8fbff 55%, #fff4fb);
}

.cp-tip-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  color: var(--cp-brand-pink-dark);
  background: var(--cp-brand-pink-soft);
}

.cp-badge.muted {
  color: #64748b;
  background: #eef2f7;
}

.cp-academy-page {
  display: grid;
  gap: 18px;
}

.cp-academy-hero,
.cp-academy-guide-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 28px;
  border: 1px solid #dfe9f5;
  border-radius: 24px;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 58%, #fff3fb 100%);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.07);
}

.cp-academy-hero h1,
.cp-academy-guide-hero h1 {
  margin: 6px 0 10px;
  color: #101b36;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.02;
  letter-spacing: 0;
}

.cp-academy-hero p,
.cp-academy-guide-hero p {
  max-width: 760px;
  margin: 0;
  color: #64748b;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.55;
}

.cp-academy-search {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  max-width: 520px;
  margin-top: 20px;
  padding: 12px 14px;
  border: 1px solid #dfe9f5;
  border-radius: 16px;
  background: #fff;
}

.cp-academy-search input {
  width: 100%;
  border: 0;
  outline: 0;
  color: #101b36;
  font: inherit;
  font-weight: 750;
  background: transparent;
}

.cp-academy-search span {
  color: var(--cp-brand-pink-dark);
}

.cp-academy-hero-card,
.cp-academy-guide-hero-icon {
  display: grid;
  place-items: center;
  width: 150px;
  min-height: 150px;
  border: 1px solid #f6c5e8;
  border-radius: 24px;
  color: var(--cp-brand-pink-dark);
  background: #fff;
  box-shadow: 0 14px 35px rgba(219, 39, 119, 0.1);
}

.cp-academy-hero-card strong {
  color: #101b36;
  font-size: 42px;
  font-weight: 950;
}

.cp-academy-hero-card small {
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
}

.cp-academy-category-grid,
.cp-academy-guide-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.cp-academy-guide-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cp-academy-category-card,
.cp-academy-guide-card,
.cp-academy-section,
.cp-academy-content,
.cp-academy-sidebar .cp-detail-card,
.cp-academy-locked-note {
  border: 1px solid #dfe9f5;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}

.cp-academy-category-card {
  display: grid;
  gap: 8px;
  min-height: 132px;
  padding: 16px;
  color: inherit;
  text-decoration: none;
}

.cp-academy-category-card:hover,
.cp-academy-guide-card:hover {
  border-color: var(--cp-brand-pink-border);
  background: var(--cp-brand-pink-soft);
}

.cp-academy-category-card > span,
.cp-academy-guide-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--cp-brand-pink-dark);
  background: var(--cp-brand-pink-soft);
}

.cp-academy-category-card strong,
.cp-academy-guide-card h3 {
  color: #101b36;
  font-size: 16px;
  font-weight: 950;
}

.cp-academy-category-card small,
.cp-academy-guide-card p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.cp-academy-section {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.cp-academy-guide-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-height: 198px;
  padding: 16px;
}

.cp-academy-guide-card .cp-btn {
  grid-column: 1 / -1;
  justify-self: start;
  align-self: end;
}

.cp-academy-guide-card.is-locked {
  background: linear-gradient(135deg, #ffffff, #fff7fd);
}

.cp-academy-guide-copy {
  display: grid;
  gap: 8px;
}

.cp-academy-badge,
.cp-academy-badge-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cp-academy-badge {
  width: max-content;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
}

.cp-academy-badge.is-basic {
  color: #047857;
  background: #dcfce7;
}

.cp-academy-badge.is-plus {
  color: var(--cp-brand-pink-dark);
  background: var(--cp-brand-pink-soft);
}

.cp-academy-badge.is-locked {
  color: #a21caf;
  background: #fae8ff;
}

.cp-academy-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  color: var(--cp-brand-pink-dark);
  font-weight: 900;
  text-decoration: none;
}

.cp-academy-guide-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}

.cp-academy-content {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.cp-academy-content .cp-help-section h2 {
  margin: 0 0 12px;
  color: #101b36;
  font-size: 22px;
  font-weight: 950;
}

.cp-academy-sidebar {
  display: grid;
  gap: 14px;
}

.cp-academy-related-list {
  display: grid;
  gap: 8px;
}

.cp-academy-related-list a {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid #e5edf7;
  border-radius: 12px;
  color: inherit;
  background: #fff;
  text-decoration: none;
}

.cp-academy-related-list a:hover {
  border-color: var(--cp-brand-pink-border);
  background: var(--cp-brand-pink-soft);
}

.cp-academy-related-list strong {
  color: #101b36;
  font-size: 14px;
  font-weight: 900;
}

.cp-academy-related-list small {
  color: #64748b;
  font-size: 12px;
  font-weight: 650;
}

.cp-academy-locked-note {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 16px;
  background: linear-gradient(135deg, #fff, #fff7fd);
}

.cp-academy-locked-note > span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  color: var(--cp-brand-pink-dark);
  background: var(--cp-brand-pink-soft);
}

.cp-academy-locked-note strong {
  color: #101b36;
  font-weight: 950;
}

.cp-academy-locked-note p {
  margin: 4px 0 12px;
  color: #64748b;
  font-weight: 650;
  line-height: 1.5;
}

.cp-inbound-page {
  display: grid;
  gap: 16px;
}

.cp-inbound-hero {
  padding: 2px 0 0;
}

.cp-inbound-hero > p {
  margin: 0 0 5px;
  color: var(--cp-pink);
  font-size: 12px;
  font-weight: 900;
}

.cp-inbound-hero h1 {
  margin: 0;
  color: var(--cp-ink);
  font-size: clamp(32px, 3vw, 42px);
  font-weight: 950;
  letter-spacing: -0.035em;
  line-height: 1.04;
}

.cp-inbound-hero > span {
  display: block;
  margin-top: 7px;
  color: var(--cp-muted);
  font-size: 15px;
}

.cp-inbound-hero > small {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 11px;
  color: #60708b;
  font-size: 12px;
  font-weight: 750;
}

.cp-inbound-hero > small svg {
  width: 15px;
  height: 15px;
}

.cp-inbound-source-notice {
  margin: 0;
}

.cp-inbound-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.cp-inbound-kpi {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 15px;
  align-items: center;
  min-height: 112px;
  padding: 18px;
  border: 1px solid var(--cp-border);
  border-radius: 18px;
  color: inherit;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.055);
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.cp-inbound-kpi:hover,
.cp-inbound-kpi:focus-visible {
  border-color: rgba(202, 55, 183, 0.3);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.09);
  transform: translateY(-1px);
}

.cp-inbound-kpi-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  color: var(--cp-brand-pink-dark);
  background: linear-gradient(145deg, #fff0fb, #f9e9ff);
}

.cp-inbound-kpi.is-sla .cp-inbound-kpi-icon {
  color: #16834a;
  background: linear-gradient(145deg, #e9f9ef, #dff6e8);
}

.cp-inbound-kpi div {
  display: grid;
  min-width: 0;
}

.cp-inbound-kpi small {
  color: #596a84;
  font-size: 13px;
  font-weight: 850;
}

.cp-inbound-kpi strong {
  margin-top: 2px;
  color: #0f1b38;
  font-size: 29px;
  font-weight: 950;
  letter-spacing: -0.035em;
  line-height: 1;
}

.cp-inbound-kpi em {
  margin-top: 7px;
  overflow: hidden;
  color: #718097;
  font-size: 11px;
  font-style: normal;
  font-weight: 650;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-inbound-controls,
.cp-inbound-list-card {
  border: 1px solid var(--cp-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 7px 24px rgba(15, 23, 42, 0.05);
}

.cp-inbound-controls {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.cp-inbound-filter-form {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(150px, 190px) minmax(150px, 190px) auto;
  gap: 10px;
  align-items: center;
}

.cp-inbound-search,
.cp-inbound-select {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.cp-inbound-search > svg {
  position: absolute;
  left: 13px;
  z-index: 1;
  width: 18px;
  height: 18px;
  color: #718097;
  pointer-events: none;
}

.cp-inbound-search input,
.cp-inbound-select select {
  width: 100%;
  height: 42px;
  border: 1px solid #dbe3ee;
  border-radius: 9px;
  color: var(--cp-ink);
  background: #fbfcfe;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  outline: none;
}

.cp-inbound-search input {
  padding: 0 14px 0 42px;
}

.cp-inbound-select select {
  appearance: none;
  padding: 0 38px 0 14px;
  cursor: pointer;
}

.cp-inbound-select > svg {
  position: absolute;
  right: 12px;
  width: 16px;
  height: 16px;
  color: #60708b;
  pointer-events: none;
}

.cp-inbound-search input:focus,
.cp-inbound-select select:focus {
  border-color: rgba(202, 55, 183, 0.5);
  box-shadow: 0 0 0 3px rgba(202, 55, 183, 0.09);
  background: #fff;
}

.cp-inbound-export {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid #f0caea;
  border-radius: 9px;
  color: var(--cp-brand-pink-dark);
  background: #fff5fc;
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
}

.cp-inbound-export svg {
  width: 17px;
  height: 17px;
}

.cp-inbound-chips {
  display: flex;
  gap: 9px;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 1px;
  scrollbar-width: thin;
}

.cp-inbound-chips a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 15px;
  border: 1px solid #dfe6ef;
  border-radius: 8px;
  color: #40516d;
  background: #fff;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.cp-inbound-chips a strong {
  color: #60708b;
  font-size: 11px;
}

.cp-inbound-chips a.is-active {
  border-color: #14234a;
  color: #fff;
  background: #14234a;
  box-shadow: 0 6px 14px rgba(20, 35, 74, 0.18);
}

.cp-inbound-chips a.is-active strong {
  color: #fff;
}

.cp-inbound-list-card {
  min-width: 0;
  padding: 18px;
}

.cp-inbound-list-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.cp-inbound-list-header h2 {
  margin: 0;
  color: var(--cp-ink);
  font-size: 18px;
  font-weight: 950;
}

.cp-inbound-list-header p {
  margin: 5px 0 0;
  color: var(--cp-muted);
  font-size: 12px;
}

.cp-inbound-list-header > span {
  color: #718097;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

.cp-inbound-sla-banner {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 13px;
  padding: 10px 14px;
  border: 1px solid #d7e7df;
  border-radius: 9px;
  color: #28734b;
  background: #f3faf6;
  font-size: 12px;
  font-weight: 750;
}

.cp-inbound-sla-banner.is-stable {
  border-color: #ccead8;
  color: #16834a;
  background: linear-gradient(90deg, #eefaf3, #f7fcf9);
}

.cp-inbound-sla-banner svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
}

.cp-inbound-table-wrap {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cp-inbound-table {
  width: 100%;
  min-width: 1280px;
  border-collapse: collapse;
}

.cp-inbound-table th,
.cp-inbound-table td {
  padding: 13px 10px;
  border-bottom: 1px solid #e5eaf1;
  color: #17233f;
  font-size: 12px;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.cp-inbound-table th {
  padding-top: 11px;
  padding-bottom: 11px;
  color: #61718a;
  background: #fafbfd;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.cp-inbound-table th a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: inherit;
  text-decoration: none;
}

.cp-inbound-table th a.is-active {
  color: #14234a;
}

.cp-inbound-table th a span {
  color: #8794a8;
  font-size: 10px;
}

.cp-inbound-table tbody tr:last-child td {
  border-bottom: 0;
}

.cp-inbound-table tbody tr:hover td {
  background: #fcfdff;
}

.cp-inbound-table tr.is-prioritized td {
  background: rgba(255, 246, 252, 0.42);
}

.cp-inbound-reference {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #14234a;
  font-weight: 900;
  text-decoration: none;
}

.cp-inbound-reference svg {
  width: 14px;
  height: 14px;
  color: #7b8aa0;
  transition: transform 140ms ease;
}

.cp-inbound-reference:hover svg {
  transform: translateX(2px);
}

.cp-inbound-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 25px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
}

.cp-inbound-badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.cp-inbound-badge svg {
  width: 13px;
  height: 13px;
}

.cp-inbound-badge.is-expected,
.cp-inbound-badge.is-muted {
  color: #7d61a7;
  background: #f4effb;
}

.cp-inbound-badge.is-info {
  color: #2775c5;
  background: #eaf4ff;
}

.cp-inbound-badge.is-success {
  color: #16834a;
  background: #eaf8ef;
}

.cp-inbound-badge.is-attention {
  color: #d76817;
  background: #fff1e7;
}

.cp-inbound-badge.is-priority {
  color: #c129a7;
  background: #fbe8f8;
}

.cp-inbound-quantity {
  font-weight: 850;
}

.cp-inbound-table td small {
  display: block;
  margin-top: 3px;
  color: #8290a5;
  font-size: 10px;
}

.cp-inbound-dash {
  color: #8794a8;
}

.cp-inbound-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.cp-inbound-actions a,
.cp-inbound-priority-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  color: #14234a;
  background: transparent;
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.cp-inbound-priority-action {
  color: var(--cp-brand-pink-dark);
}

.cp-inbound-actions svg {
  width: 13px;
  height: 13px;
}

.cp-inbound-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
}

.cp-inbound-pagination a {
  min-width: 82px;
  padding: 8px 12px;
  border: 1px solid #dfe6ef;
  border-radius: 8px;
  color: #40516d;
  background: #fff;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}

.cp-inbound-pagination a.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.cp-inbound-pagination span {
  color: #718097;
  font-size: 12px;
  font-weight: 750;
}

.cp-inbound-empty {
  display: grid;
  justify-items: center;
  padding: 54px 20px;
  color: var(--cp-muted);
  text-align: center;
}

.cp-inbound-empty > span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  border-radius: 15px;
  color: var(--cp-brand-pink-dark);
  background: var(--cp-brand-pink-soft);
}

.cp-inbound-empty strong {
  color: var(--cp-ink);
  font-size: 17px;
}

.cp-inbound-empty p {
  margin: 7px 0 16px;
  font-size: 13px;
}

@media (max-width: 1180px) {
  .cp-inbound-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cp-inbound-filter-form {
    grid-template-columns: minmax(260px, 1fr) minmax(140px, 180px) minmax(140px, 180px);
  }

  .cp-inbound-export {
    grid-column: 1 / -1;
    justify-self: end;
  }
}

@media (max-width: 760px) {
  .cp-inbound-page {
    gap: 13px;
  }

  .cp-inbound-hero h1 {
    font-size: 32px;
  }

  .cp-inbound-kpis,
  .cp-inbound-filter-form {
    grid-template-columns: 1fr;
  }

  .cp-inbound-kpi {
    min-height: 100px;
  }

  .cp-inbound-export {
    grid-column: auto;
    justify-self: stretch;
  }

  .cp-inbound-list-card {
    padding: 14px;
  }

  .cp-inbound-list-header {
    display: grid;
    align-items: start;
  }

  .cp-inbound-list-header > span {
    white-space: normal;
  }

  .cp-inbound-sla-banner {
    align-items: flex-start;
    line-height: 1.45;
  }

  .cp-inbound-pagination {
    justify-content: space-between;
  }
}

.cp-inbound-detail-page {
  display: grid;
  gap: 15px;
  min-width: 0;
}

.cp-inbound-detail-back {
  width: fit-content;
  margin-bottom: 1px;
  color: #17233f;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

.cp-inbound-detail-back svg {
  transform: rotate(180deg);
}

.cp-inbound-detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title actions"
    "title expected";
  gap: 14px 24px;
  align-items: start;
}

.cp-inbound-detail-title {
  grid-area: title;
}

.cp-inbound-detail-heading-row {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
}

.cp-inbound-detail-heading-row h1 {
  margin: 0;
  color: #0f1b38;
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 950;
  letter-spacing: -0.04em;
  line-height: 1;
}

.cp-inbound-detail-title > p {
  margin: 11px 0 0;
  color: #64748b;
  font-size: 14px;
  font-weight: 600;
}

.cp-inbound-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.cp-inbound-detail-actions {
  grid-area: actions;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.cp-inbound-detail-actions .cp-btn {
  min-height: 42px;
  border-radius: 9px;
  white-space: nowrap;
}

.cp-inbound-detail-actions .cp-btn svg {
  width: 16px;
  height: 16px;
}

.cp-inbound-detail-actions .cp-btn-primary {
  color: #fff;
  background: linear-gradient(
    135deg,
    var(--ss-magenta-700, #a91b9f),
    var(--ss-magenta-500, #d23ac0)
  );
  box-shadow: 0 10px 24px rgba(196, 42, 173, 0.2);
}

.cp-inbound-detail-actions .cp-btn-primary:hover {
  box-shadow: 0 13px 28px rgba(196, 42, 173, 0.26);
}

.cp-inbound-detail-expected {
  grid-area: expected;
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 275px;
  padding: 14px 17px;
  border: 1px solid #dbe3ee;
  border-radius: 12px;
  color: #65758e;
  background: rgba(255, 255, 255, 0.88);
}

.cp-inbound-detail-expected > svg {
  width: 22px;
  height: 22px;
}

.cp-inbound-detail-expected span {
  display: grid;
  gap: 3px;
}

.cp-inbound-detail-expected small {
  font-size: 11px;
  font-weight: 750;
}

.cp-inbound-detail-expected strong {
  color: #13203e;
  font-size: 13px;
}

.cp-inbound-detail-progress,
.cp-inbound-detail-card,
.cp-inbound-detail-tabs {
  border: 1px solid var(--cp-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 7px 24px rgba(15, 23, 42, 0.045);
}

.cp-inbound-detail-progress {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 20px 18px 18px;
}

.cp-inbound-detail-progress > div {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  color: #75839a;
  text-align: center;
}

.cp-inbound-detail-progress > div:not(:last-child)::after {
  position: absolute;
  top: 16px;
  left: calc(50% + 18px);
  width: calc(100% - 36px);
  height: 2px;
  content: "";
  background: #e1e6ee;
}

.cp-inbound-detail-progress > div.is-complete:not(:last-child)::after,
.cp-inbound-detail-progress > div.is-current:not(:last-child)::after {
  background: linear-gradient(90deg, #24a36a, #c42aad);
}

.cp-inbound-detail-step-icon {
  z-index: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid #dfe5ed;
  border-radius: 50%;
  color: #7d899c;
  background: #f8fafc;
  box-shadow: 0 0 0 4px #fff;
  font-size: 11px;
  font-weight: 900;
}

.cp-inbound-detail-step-icon svg {
  width: 17px;
  height: 17px;
}

.cp-inbound-detail-progress .is-complete .cp-inbound-detail-step-icon {
  border-color: #22a568;
  color: #fff;
  background: #22a568;
}

.cp-inbound-detail-progress .is-current .cp-inbound-detail-step-icon {
  border-color: #c42aad;
  color: #fff;
  background: #c42aad;
}

.cp-inbound-detail-progress strong {
  color: #52627b;
  font-size: 12px;
  font-weight: 850;
}

.cp-inbound-detail-progress .is-current strong {
  color: #17233f;
}

.cp-inbound-detail-progress small {
  overflow: hidden;
  max-width: 100%;
  color: #8190a5;
  font-size: 10px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-inbound-detail-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.cp-inbound-detail-kpis article {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  min-height: 78px;
  padding: 13px 15px;
  border: 1px solid var(--cp-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.cp-inbound-detail-kpis article > span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 37px;
  height: 37px;
  border-radius: 12px;
  color: #bc2aa8;
  background: #fbebf9;
}

.cp-inbound-detail-kpis article > span.is-info {
  color: #2775c5;
  background: #eaf4ff;
}

.cp-inbound-detail-kpis article > span.is-success {
  color: #16834a;
  background: #e8f8ee;
}

.cp-inbound-detail-kpis article > span.is-attention {
  color: #d76817;
  background: #fff1e7;
}

.cp-inbound-detail-kpis svg {
  width: 18px;
  height: 18px;
}

.cp-inbound-detail-kpis div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.cp-inbound-detail-kpis small {
  overflow: hidden;
  color: #65758e;
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-inbound-detail-kpis strong {
  overflow: hidden;
  color: #15213e;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-inbound-detail-tabs {
  display: flex;
  min-width: 0;
  overflow-x: auto;
  padding: 0 10px;
  border-radius: 13px;
  scrollbar-width: thin;
}

.cp-inbound-detail-tabs a {
  position: relative;
  padding: 13px 17px;
  color: #62718a;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
}

.cp-inbound-detail-tabs a.is-active {
  color: #be28a8;
}

.cp-inbound-detail-tabs a.is-active::after {
  position: absolute;
  right: 12px;
  bottom: -1px;
  left: 12px;
  height: 2px;
  border-radius: 2px;
  content: "";
  background: #c42aad;
}

.cp-inbound-detail-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.15fr) minmax(290px, 0.95fr);
  gap: 15px;
  align-items: start;
}

.cp-inbound-detail-overview-grid > main,
.cp-inbound-detail-overview-grid > aside {
  display: grid;
  gap: 15px;
  min-width: 0;
}

.cp-inbound-detail-card {
  min-width: 0;
  padding: 15px;
}

.cp-inbound-detail-card > h2,
.cp-inbound-detail-card header h2 {
  margin: 0 0 12px;
  color: #17233f;
  font-size: 14px;
  font-weight: 950;
}

.cp-inbound-detail-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.cp-inbound-detail-card > header h2 {
  margin-bottom: 4px;
}

.cp-inbound-detail-card > header p {
  margin: 0;
  color: #718097;
  font-size: 11px;
}

.cp-inbound-detail-table-wrap {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  border: 1px solid #e4e9f0;
  border-radius: 9px;
}

.cp-inbound-detail-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.cp-inbound-detail-table th,
.cp-inbound-detail-table td {
  padding: 11px 12px;
  border-bottom: 1px solid #e7ebf1;
  color: #23304a;
  font-size: 11px;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.cp-inbound-detail-table th {
  color: #64748b;
  background: #f8fafc;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.cp-inbound-detail-table tr:last-child td {
  border-bottom: 0;
}

.cp-inbound-detail-table td a {
  color: #17233f;
  font-weight: 850;
  text-decoration: none;
}

.cp-inbound-detail-table td code {
  color: #40516d;
  font-family: inherit;
  font-size: 11px;
  font-weight: 750;
}

.cp-inbound-detail-table td.has-deviation {
  color: #d76817;
  font-weight: 850;
}

.cp-inbound-detail-card-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  color: #bd2aa8;
  font-size: 11px;
  font-weight: 850;
  text-decoration: none;
}

.cp-inbound-detail-card-link svg {
  width: 13px;
  height: 13px;
}

.cp-inbound-detail-empty {
  display: grid;
  justify-items: center;
  padding: 31px 20px;
  border: 1px dashed #ecd7ea;
  border-radius: 11px;
  color: #65758e;
  background: linear-gradient(135deg, #fffafd, #fbf9ff);
  text-align: center;
}

.cp-inbound-detail-empty > span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 11px;
  border-radius: 14px;
  color: #b92ca6;
  background: #f8e9f6;
}

.cp-inbound-detail-empty strong {
  color: #17233f;
  font-size: 14px;
}

.cp-inbound-detail-empty p {
  max-width: 620px;
  margin: 7px 0 0;
  font-size: 11px;
  line-height: 1.55;
}

.cp-inbound-detail-receiving {
  padding-bottom: 11px;
}

.cp-inbound-detail-receiving-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.cp-inbound-detail-receiving-grid > div {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 2px 14px 7px;
  border-right: 1px solid #e5eaf1;
}

.cp-inbound-detail-receiving-grid > div:first-child {
  padding-left: 0;
}

.cp-inbound-detail-receiving-grid > div:last-child {
  padding-right: 0;
  border-right: 0;
}

.cp-inbound-detail-receiving-grid span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #63738c;
}

.cp-inbound-detail-receiving-grid svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

.cp-inbound-detail-receiving-grid small {
  overflow: hidden;
  font-size: 9px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-inbound-detail-receiving-grid strong {
  overflow: hidden;
  color: #17233f;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-inbound-detail-receiving-grid em {
  font-style: normal;
}

.cp-inbound-detail-receiving > p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 11px -5px -2px;
  padding: 9px 11px;
  border-radius: 8px;
  color: #62718a;
  background: #f7f7fb;
  font-size: 10px;
  line-height: 1.4;
}

.cp-inbound-detail-receiving > p.is-success {
  color: #16834a;
  background: #eef9f2;
}

.cp-inbound-detail-receiving > p.is-attention {
  color: #c15d18;
  background: #fff5ed;
}

.cp-inbound-detail-receiving > p svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
}

.cp-inbound-detail-facts dl,
.cp-inbound-detail-receiving-facts dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

.cp-inbound-detail-facts dl div,
.cp-inbound-detail-receiving-facts dl div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.cp-inbound-detail-facts dt,
.cp-inbound-detail-receiving-facts dt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #68778e;
  font-size: 10px;
  font-weight: 750;
}

.cp-inbound-detail-facts dt svg {
  width: 14px;
  height: 14px;
}

.cp-inbound-detail-facts dd,
.cp-inbound-detail-receiving-facts dd {
  margin: 0;
  color: #4b5a72;
  font-size: 10px;
  font-weight: 800;
  text-align: right;
}

.cp-inbound-detail-facts dd.is-brand {
  color: #bd2aa8;
}

.cp-inbound-detail-deviations ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-inbound-detail-deviations li,
.cp-inbound-detail-compact-empty {
  display: flex;
  align-items: center;
  gap: 11px;
}

.cp-inbound-detail-deviations li > svg,
.cp-inbound-detail-compact-empty > svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: #cf631a;
}

.cp-inbound-detail-deviations li span,
.cp-inbound-detail-compact-empty span {
  display: grid;
  gap: 3px;
}

.cp-inbound-detail-deviations li strong,
.cp-inbound-detail-compact-empty strong {
  color: #17233f;
  font-size: 11px;
}

.cp-inbound-detail-deviations li small,
.cp-inbound-detail-compact-empty small {
  color: #718097;
  font-size: 9px;
  line-height: 1.45;
}

.cp-inbound-detail-compact-empty {
  padding: 8px 4px;
}

.cp-inbound-detail-compact-empty > svg {
  width: 36px;
  height: 36px;
  padding: 8px;
  border-radius: 12px;
  color: #b72ba3;
  background: #f8e9f6;
}

.cp-inbound-detail-history-card ol,
.cp-inbound-detail-full-history {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-inbound-detail-history-card li,
.cp-inbound-detail-full-history li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(100px, 0.8fr) minmax(0, 1.2fr);
  gap: 12px;
  min-height: 34px;
  padding: 3px 0 8px 20px;
  color: #40516d;
  font-size: 9px;
}

.cp-inbound-detail-history-card li::before,
.cp-inbound-detail-full-history li::before {
  position: absolute;
  top: 7px;
  left: 2px;
  width: 8px;
  height: 8px;
  border: 2px solid #c42aad;
  border-radius: 50%;
  content: "";
  background: #fff;
}

.cp-inbound-detail-history-card li:not(:last-child)::after,
.cp-inbound-detail-full-history li:not(:last-child)::after {
  position: absolute;
  top: 17px;
  bottom: -2px;
  left: 5px;
  width: 2px;
  content: "";
  background: #efd4eb;
}

.cp-inbound-detail-history-card time,
.cp-inbound-detail-full-history time {
  color: #75849a;
  font-weight: 700;
}

.cp-inbound-detail-history-card > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  color: #bd2aa8;
  font-size: 10px;
  font-weight: 850;
  text-decoration: none;
}

.cp-inbound-detail-history-card > a svg {
  width: 12px;
  height: 12px;
}

.cp-inbound-detail-muted {
  margin: 0;
  color: #718097;
  font-size: 10px;
  line-height: 1.5;
}

.cp-inbound-detail-tab-card {
  padding: 17px;
}

.cp-inbound-detail-line-search {
  position: relative;
  display: flex;
  align-items: center;
  min-width: min(320px, 100%);
}

.cp-inbound-detail-line-search svg {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: #718097;
}

.cp-inbound-detail-line-search input {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 37px;
  border: 1px solid #dbe3ee;
  border-radius: 9px;
  color: #17233f;
  background: #fbfcfe;
  font: inherit;
  font-size: 11px;
}

.cp-inbound-detail-tab-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.7fr);
  gap: 15px;
  align-items: start;
}

.cp-inbound-detail-tab-grid .is-wide {
  grid-column: 1 / -1;
}

.cp-inbound-detail-full-history {
  max-width: 780px;
}

.cp-inbound-detail-full-history li {
  grid-template-columns: 170px minmax(0, 1fr);
  min-height: 52px;
  padding-left: 25px;
  font-size: 11px;
}

.cp-inbound-detail-full-history li span {
  display: grid;
  gap: 4px;
}

.cp-inbound-detail-full-history li small {
  color: #8190a5;
  font-size: 9px;
}

.cp-inbound-detail-mapping {
  display: grid;
  gap: 14px;
}

.cp-inbound-detail-mapping > form {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.cp-inbound-detail-mapping label {
  display: grid;
  gap: 6px;
  color: #60708b;
  font-size: 10px;
  font-weight: 800;
}

.cp-inbound-detail-mapping label.is-wide {
  grid-column: 1 / -1;
}

.cp-inbound-detail-mapping input,
.cp-inbound-detail-mapping select,
.cp-inbound-detail-mapping textarea {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #dbe3ee;
  border-radius: 8px;
  color: #17233f;
  background: #fbfcfe;
  font: inherit;
  font-size: 11px;
}

.cp-inbound-detail-mapping > form > button {
  width: fit-content;
}

.cp-inbound-detail-mapping-list {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid #e4e9f0;
  border-radius: 10px;
  background: #e4e9f0;
}

.cp-inbound-detail-mapping-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: #fff;
}

.cp-inbound-detail-mapping-list span {
  display: grid;
  gap: 2px;
}

.cp-inbound-detail-mapping-list strong {
  color: #17233f;
  font-size: 11px;
}

.cp-inbound-detail-mapping-list small {
  color: #718097;
  font-size: 9px;
}

@media (max-width: 1180px) {
  .cp-inbound-detail-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cp-inbound-detail-overview-grid,
  .cp-inbound-detail-tab-grid {
    grid-template-columns: 1fr;
  }

  .cp-inbound-detail-overview-grid > aside {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

  .cp-inbound-detail-tab-grid .is-wide {
    grid-column: auto;
  }
}

@media (max-width: 1000px) {
  .cp-inbound-detail-hero {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "actions"
      "expected";
  }

  .cp-inbound-detail-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .cp-inbound-detail-expected {
    min-width: 0;
    width: min(100%, 360px);
  }
}

@media (max-width: 860px) {
  .cp-inbound-detail-heading-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .cp-inbound-detail-progress {
    min-width: 760px;
  }

  .cp-inbound-detail-page {
    overflow: hidden;
  }

  .cp-inbound-detail-progress {
    overflow: visible;
  }

  .cp-inbound-detail-page > .cp-inbound-detail-progress {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    grid-template-columns: repeat(5, minmax(145px, 1fr));
  }

  .cp-inbound-detail-receiving-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }

  .cp-inbound-detail-receiving-grid > div {
    padding: 10px;
    border-right: 0;
    border-bottom: 1px solid #e5eaf1;
  }

  .cp-inbound-detail-receiving-grid > div:first-child {
    padding-left: 10px;
  }

  .cp-inbound-detail-overview-grid > aside {
    grid-template-columns: 1fr;
  }

  .cp-inbound-detail-mapping > form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .cp-inbound-detail-heading-row h1 {
    font-size: 34px;
  }

  .cp-inbound-detail-actions {
    display: grid;
  }

  .cp-inbound-detail-actions .cp-btn {
    justify-content: center;
  }

  .cp-inbound-detail-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cp-inbound-detail-kpis article {
    min-height: 72px;
    padding: 11px;
  }

  .cp-inbound-detail-kpis article > span {
    width: 34px;
    height: 34px;
  }

  .cp-inbound-detail-card > header {
    align-items: stretch;
    flex-direction: column;
  }

  .cp-inbound-detail-line-search {
    min-width: 0;
  }

  .cp-inbound-detail-receiving-grid {
    grid-template-columns: 1fr;
  }

  .cp-inbound-detail-full-history li,
  .cp-inbound-detail-history-card li {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .cp-inbound-detail-mapping > form {
    grid-template-columns: 1fr;
  }

  .cp-inbound-detail-mapping label.is-wide {
    grid-column: auto;
  }
}

.cp-inbound-priority-dialog {
  width: min(520px, calc(100vw - 32px));
  max-width: none;
  padding: 0;
  border: 1px solid var(--cp-border);
  border-radius: 20px;
  color: var(--cp-ink);
  background: #fff;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.24);
}

.cp-inbound-priority-dialog::backdrop {
  background: rgba(15, 23, 42, 0.52);
  backdrop-filter: blur(3px);
}

.cp-inbound-priority-dialog form {
  display: grid;
}

.cp-inbound-priority-dialog header,
.cp-inbound-priority-dialog footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 22px;
}

.cp-inbound-priority-dialog header {
  align-items: flex-start;
  border-bottom: 1px solid var(--cp-border);
}

.cp-inbound-priority-dialog header h2 {
  margin: 9px 0 0;
  font-size: 21px;
}

.cp-inbound-priority-dialog footer {
  justify-content: flex-end;
  border-top: 1px solid var(--cp-border);
}

.cp-inbound-priority-dialog-body {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.cp-inbound-priority-dialog-body > p {
  margin: 0;
  color: var(--cp-muted);
  line-height: 1.55;
}

.cp-inbound-priority-dialog dl {
  display: grid;
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--cp-border);
  border-radius: 14px;
  background: var(--cp-border);
}

.cp-inbound-priority-dialog dl div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  padding: 12px 14px;
  background: #fff;
}

.cp-inbound-priority-dialog dt {
  color: var(--cp-muted);
  font-size: 13px;
  font-weight: 750;
}

.cp-inbound-priority-dialog dd {
  margin: 0;
  font-weight: 900;
  text-align: right;
}

.cp-inbound-priority-dialog .cp-inbound-priority-acceptance {
  color: var(--cp-ink);
  font-size: 13px;
  font-weight: 750;
}

.cp-status-badge.is-info {
  color: #075985;
  background: #e0f2fe;
}

.cp-planning-page {
  display: grid;
  gap: 18px;
}

.cp-planning-center-page {
  display: grid;
  gap: 24px;
}

.cp-planning-center-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 22px;
  align-items: stretch;
  padding: 34px;
  border: 1px solid rgba(205, 53, 190, 0.16);
  border-radius: 22px;
  background: linear-gradient(135deg, #fff 0%, #fff 68%, rgba(205, 53, 190, 0.08) 100%);
  box-shadow: 0 22px 60px rgba(15, 35, 68, 0.08);
}

.cp-planning-center-hero h1 {
  margin: 10px 0;
  color: var(--cp-ink);
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1;
}

.cp-planning-center-hero p {
  max-width: 780px;
  color: var(--cp-muted);
  font-size: 17px;
  font-weight: 850;
}

.cp-planning-center-actions,
.cp-planning-center-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.cp-planning-center-primary {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 24px;
  border: 1px solid var(--cp-border);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
}

.cp-planning-center-primary span,
.cp-planning-center-card header span,
.cp-planning-center-kpis span {
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.cp-planning-center-primary strong {
  color: var(--cp-ink);
  font-size: 46px;
  line-height: 1;
}

.cp-planning-center-notice {
  display: grid;
  grid-template-columns: minmax(180px, 0.3fr) minmax(0, 1fr);
  gap: 12px 18px;
  padding: 18px 20px;
  border: 1px solid #cfe5ff;
  border-radius: 16px;
  background: #eef7ff;
  color: var(--cp-ink);
}

.cp-planning-center-notice div {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cp-planning-center-notice small {
  display: inline-flex;
  padding: 6px 10px;
  border: 1px solid #cfe0f5;
  border-radius: 999px;
  background: #fff;
  color: var(--cp-muted);
  font-weight: 850;
}

.cp-planning-center-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.cp-planning-center-kpis article,
.cp-planning-center-card {
  border: 1px solid var(--cp-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(15, 35, 68, 0.06);
}

.cp-planning-center-kpis article {
  display: grid;
  gap: 8px;
  min-height: 138px;
  padding: 18px;
}

.cp-planning-center-kpis strong {
  color: var(--cp-ink);
  font-size: 34px;
  line-height: 1;
}

.cp-planning-center-kpis small,
.cp-planning-center-card small {
  color: var(--cp-muted);
  font-weight: 800;
}

.cp-planning-center-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.cp-planning-center-card {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.cp-planning-center-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cp-planning-center-card header a,
.cp-planning-center-quick-links a {
  color: var(--ss-pink);
  font-weight: 950;
  text-decoration: none;
}

.cp-planning-center-card dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

.cp-planning-center-card dl div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(226, 234, 246, 0.9);
}

.cp-planning-center-card dt {
  color: var(--cp-muted);
  font-weight: 850;
}

.cp-planning-center-card dd {
  margin: 0;
  color: var(--cp-ink);
  font-weight: 950;
}

.cp-planning-center-health {
  display: grid;
  gap: 5px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--cp-border);
  background: #f7fbff;
}

.cp-planning-center-health--ready {
  border-color: #bdf3d1;
  background: #ecfff3;
}

.cp-planning-center-health--good {
  border-color: #bdf3d1;
  background: #ecfff3;
}

.cp-planning-center-health--requires_action,
.cp-planning-center-health--warning {
  border-color: #f8dda5;
  background: #fff8e8;
}

.cp-planning-center-health--not_ready,
.cp-planning-center-health--missing,
.cp-planning-center-health--critical {
  border-color: #f2c8d7;
  background: #fff3f7;
}

.cp-planning-center-actions-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-planning-center-actions-list li {
  display: grid;
  gap: 4px;
  padding: 10px 0;
  border-top: 1px solid rgba(226, 234, 246, 0.9);
}

.cp-planning-center-actions-list li span {
  color: var(--cp-muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.cp-planning-center-actions-list li a {
  color: var(--cp-ink);
  font-weight: 950;
  text-decoration: none;
}

.cp-planning-center-quick-links {
  display: grid;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--cp-border);
  border-radius: 16px;
  background: #fff;
}

.cp-planning-center-quick-links h2 {
  margin: 0;
  color: var(--cp-ink);
}

.cp-planning-center-quick-links div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cp-planning-center-quick-links a {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  padding: 7px 12px;
  border: 1px solid var(--cp-border);
  border-radius: 999px;
  background: #fff;
}

.cp-data-quality-page {
  display: grid;
  gap: 24px;
}

.cp-data-quality-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
  gap: 22px;
  align-items: stretch;
  padding: 34px;
  border: 1px solid rgba(205, 53, 190, 0.16);
  border-radius: 22px;
  background: linear-gradient(135deg, #fff 0%, #fff 70%, rgba(13, 110, 253, 0.08) 100%);
  box-shadow: 0 22px 60px rgba(15, 35, 68, 0.08);
}

.cp-data-quality-hero h1 {
  margin: 10px 0;
  color: var(--cp-ink);
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1;
}

.cp-data-quality-hero p {
  max-width: 780px;
  color: var(--cp-muted);
  font-size: 17px;
  font-weight: 850;
}

.cp-data-quality-score {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 24px;
  border: 1px solid var(--cp-border);
  border-radius: 18px;
  background: #f7fbff;
}

.cp-data-quality-score--good {
  border-color: #bdf3d1;
  background: #ecfff3;
}

.cp-data-quality-score--warning {
  border-color: #f8dda5;
  background: #fff8e8;
}

.cp-data-quality-score--critical {
  border-color: #f2c8d7;
  background: #fff3f7;
}

.cp-data-quality-score span,
.cp-data-quality-summary span {
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.cp-data-quality-score strong {
  color: var(--cp-ink);
  font-size: 54px;
  line-height: 1;
}

.cp-data-quality-score small {
  color: var(--cp-muted);
  font-weight: 800;
}

.cp-data-quality-summary,
.cp-data-quality-categories {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.cp-data-quality-summary article,
.cp-data-quality-categories a,
.cp-data-quality-issue {
  border: 1px solid var(--cp-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(15, 35, 68, 0.06);
}

.cp-data-quality-summary article {
  display: grid;
  gap: 8px;
  min-height: 118px;
  padding: 18px;
}

.cp-data-quality-summary strong {
  color: var(--cp-ink);
  font-size: 30px;
  line-height: 1;
}

.cp-data-quality-categories {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.cp-data-quality-categories a {
  display: grid;
  gap: 8px;
  min-height: 96px;
  padding: 16px;
  color: var(--cp-ink);
  text-decoration: none;
}

.cp-data-quality-categories a.active {
  border-color: rgba(205, 53, 190, 0.35);
  background: #fff7fd;
}

.cp-data-quality-categories span {
  color: var(--cp-muted);
  font-weight: 900;
}

.cp-data-quality-categories strong {
  font-size: 24px;
}

.cp-data-quality-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--cp-border);
  border-radius: 16px;
  background: #fff;
}

.cp-data-quality-filters a {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  padding: 7px 12px;
  border: 1px solid var(--cp-border);
  border-radius: 999px;
  color: var(--cp-ink);
  background: #fff;
  font-weight: 900;
  text-decoration: none;
}

.cp-data-quality-filters a.active {
  border-color: rgba(205, 53, 190, 0.35);
  color: var(--ss-pink);
  background: #fff7fd;
}

.cp-data-quality-issues {
  display: grid;
  gap: 14px;
}

.cp-data-quality-issue {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 18px;
}

.cp-data-quality-issue-main {
  display: grid;
  gap: 8px;
}

.cp-data-quality-issue h2 {
  margin: 0;
  color: var(--cp-ink);
  font-size: 20px;
}

.cp-data-quality-issue p {
  margin: 0;
  color: var(--cp-muted);
  font-weight: 800;
}

.cp-data-quality-issue dl {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 0;
}

.cp-data-quality-issue dl div,
.cp-data-quality-type,
.cp-data-quality-severity {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid var(--cp-border);
  border-radius: 999px;
  background: #fbfdfd;
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 900;
}

.cp-data-quality-issue dt,
.cp-data-quality-issue dd {
  margin: 0;
}

.cp-data-quality-issue dt {
  color: var(--cp-muted);
}

.cp-data-quality-issue dd {
  color: var(--cp-ink);
}

.cp-data-quality-severity--critical {
  border-color: #f2c8d7;
  color: #9f1239;
  background: #fff3f7;
}

.cp-data-quality-severity--warning {
  border-color: #f8dda5;
  color: #9a5b00;
  background: #fff8e8;
}

.cp-data-quality-severity--info {
  border-color: #cfe5ff;
  color: #15519b;
  background: #eef7ff;
}

.cp-data-quality-issue-action {
  display: flex;
  justify-content: flex-end;
}

.cp-data-quality-issue-action span {
  color: var(--cp-muted);
  font-weight: 900;
}

.cp-planning-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: 22px;
  align-items: stretch;
  padding: 28px;
  border: 1px solid rgba(219, 39, 119, 0.12);
  border-radius: 26px;
  background:
    radial-gradient(circle at top right, rgba(219, 39, 119, 0.1), transparent 34%),
    linear-gradient(135deg, #fff, #f8fbff);
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.07);
}

.cp-planning-eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 12px;
  padding: 7px 11px;
  border-radius: 999px;
  color: var(--cp-brand-pink-dark);
  background: var(--cp-brand-pink-soft);
  font-size: 12px;
  font-weight: 900;
}

.cp-planning-hero h2 {
  margin: 0;
  color: #101b36;
  font-size: clamp(30px, 3.2vw, 48px);
  line-height: 1;
  letter-spacing: 0;
}

.cp-planning-hero p {
  max-width: 720px;
  margin: 14px 0 0;
  color: #64748b;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.55;
}

.cp-planning-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.cp-planning-note {
  display: grid;
  align-content: center;
  padding: 18px;
  border: 1px solid var(--cp-border);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.cp-planning-note strong {
  color: #101b36;
  font-size: 14px;
  font-weight: 950;
}

.cp-planning-note p {
  margin-top: 7px;
  font-size: 13px;
}

.cp-planning-kpis {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.cp-planning-kpis .cp-kpi-card {
  min-height: 126px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  padding: 20px;
}

.cp-planning-kpis .cp-kpi-card > span:not(.cp-kpi-icon) {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

.cp-planning-kpis .cp-kpi-card > strong {
  margin: 0;
  font-size: 30px;
  line-height: 1;
}

.cp-planning-kpis .cp-kpi-card > small {
  max-width: 24ch;
  font-size: 12px;
  line-height: 1.4;
}

.cp-planning-filters {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}

.cp-planning-filters h3,
.cp-planning-table-card h3 {
  margin: 0;
  color: #101b36;
  font-size: 18px;
  font-weight: 950;
}

.cp-planning-filters p,
.cp-planning-table-card p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 650;
}

.cp-planning-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.cp-planning-filter-chips a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid var(--cp-border);
  border-radius: 999px;
  color: #475569;
  background: #fff;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

.cp-planning-filter-chips a.is-active {
  border-color: rgba(219, 39, 119, 0.26);
  color: var(--cp-brand-pink-dark);
  background: var(--cp-brand-pink-soft);
}

.cp-planning-inline-warning {
  display: inline-flex;
  margin-left: 8px;
  color: #b45309;
  font-weight: 850;
}

.cp-planning-source-notice {
  align-items: flex-start;
  gap: 8px;
}

.cp-planning-source-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.cp-planning-source-badges span {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d8e7f7;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #52647a;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  padding: 7px 10px;
}

.cp-planning-table {
  min-width: 1820px;
}

.cp-planning-table th {
  white-space: nowrap;
}

.cp-planning-table th:nth-child(1),
.cp-planning-table td:nth-child(1) {
  min-width: 220px;
}

.cp-planning-table th:nth-child(2),
.cp-planning-table td:nth-child(2) {
  min-width: 170px;
}

.cp-planning-table th:nth-child(8),
.cp-planning-table td:nth-child(8) {
  min-width: 170px;
}

.cp-planning-table th:nth-child(10),
.cp-planning-table td:nth-child(10) {
  min-width: 210px;
}

.cp-planning-table th:nth-child(11),
.cp-planning-table td:nth-child(11) {
  min-width: 240px;
}

.cp-planning-table th:nth-child(12),
.cp-planning-table td:nth-child(12) {
  min-width: 160px;
}

.cp-planning-table td strong {
  color: #101b36;
  font-weight: 950;
}

.cp-planning-table td small {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 11px;
  font-weight: 750;
}

.cp-planning-table code {
  padding: 4px 7px;
  border-radius: 8px;
  color: #334155;
  background: #f1f5f9;
  font-size: 12px;
  font-weight: 850;
}

.cp-planning-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 150px;
}

.cp-planning-signal-badge,
.cp-planning-signal-note {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 900;
}

.cp-planning-signal-badge.is-forecast {
  color: #1f5c99;
  background: #eef6ff;
}

.cp-planning-signal-badge.is-campaign {
  color: var(--cp-accent-dark);
  background: #fff0fb;
}

.cp-planning-signal-note {
  color: var(--cp-muted);
  background: #f6f8fb;
}

.cp-planning-calculation-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.cp-planning-calculation-summary span {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  padding: 4px 8px;
  color: #52647a;
  background: #f6f8fb;
  font-size: 10px;
  font-weight: 900;
}

.cp-planning-calculation {
  min-width: 280px;
  margin-top: 8px;
  border: 1px solid var(--cp-border);
  border-radius: 12px;
  background: #fff;
}

.cp-planning-calculation summary {
  cursor: pointer;
  padding: 9px 11px;
  color: var(--cp-brand-pink-dark);
  font-size: 12px;
  font-weight: 950;
}

.cp-planning-calculation-body {
  display: grid;
  gap: 12px;
  padding: 0 11px 12px;
}

.cp-planning-calculation-body > strong {
  color: #101b36;
  font-size: 13px;
}

.cp-planning-calculation-section {
  display: grid;
  gap: 8px;
}

.cp-planning-calculation-section h4 {
  margin: 0;
  color: #334155;
  font-size: 12px;
  font-weight: 950;
}

.cp-planning-calculation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

.cp-planning-calculation-grid div,
.cp-planning-calculation-step {
  border: 1px solid #e6edf6;
  border-radius: 10px;
  padding: 8px;
  background: #f8fafc;
}

.cp-planning-calculation-grid dt {
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
}

.cp-planning-calculation-grid dd {
  margin: 3px 0 0;
  color: #101b36;
  font-size: 12px;
  font-weight: 900;
}

.cp-planning-calculation-steps {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-planning-calculation-step {
  display: grid;
  gap: 3px;
}

.cp-planning-calculation-step span {
  color: #334155;
  font-size: 11px;
  font-weight: 950;
}

.cp-planning-calculation-step strong {
  color: #101b36;
  font-size: 13px;
  font-weight: 950;
}

.cp-planning-calculation-step em,
.cp-planning-calculation-step small,
.cp-planning-calculation-note,
.cp-planning-calculation-missing {
  margin: 0;
  color: #64748b;
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}

.cp-planning-calculation-step--applied {
  border-color: rgba(219, 39, 119, 0.18);
  background: #fff7fb;
}

.cp-planning-calculation-missing {
  color: #b45309;
}

.cp-planning-calculation-final {
  margin: 0;
  color: #101b36;
  font-size: 12px;
  font-weight: 900;
}

.cp-planning-simulation-page {
  display: grid;
  gap: 20px;
}

.cp-simulation-summary,
.cp-simulation-results {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.cp-simulation-summary article,
.cp-simulation-results article {
  display: grid;
  gap: 5px;
  min-height: 112px;
  padding: 16px;
  border: 1px solid var(--cp-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--cp-shadow-soft);
}

.cp-simulation-summary span,
.cp-simulation-results span {
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 900;
}

.cp-simulation-summary strong,
.cp-simulation-results strong {
  color: #101b36;
  font-size: 20px;
  font-weight: 950;
}

.cp-simulation-summary small {
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 800;
}

.cp-simulation-form form {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
}

.cp-simulation-form label {
  display: grid;
  gap: 7px;
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 900;
}

.cp-simulation-form input {
  width: 100%;
  border: 1px solid var(--cp-border);
  border-radius: 12px;
  padding: 11px 12px;
  color: var(--cp-ink);
  font: inherit;
  font-weight: 800;
}

.cp-simulation-form .is-wide {
  grid-column: 1 / -1;
}

.cp-simulation-comparison dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 18px;
}

.cp-simulation-comparison dl div {
  border: 1px solid #e6edf6;
  border-radius: 12px;
  padding: 12px;
  background: #f8fafc;
}

.cp-simulation-comparison dt {
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 900;
}

.cp-simulation-comparison dd {
  margin: 5px 0 0;
  color: #101b36;
  font-size: 18px;
  font-weight: 950;
}

.cp-simulation-trace {
  max-width: 920px;
}

.cp-campaign-items {
  display: grid;
  gap: 18px;
}

.cp-campaign-item-form form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
}

.cp-campaign-item-form label {
  display: grid;
  gap: 7px;
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 900;
}

.cp-campaign-item-form label.is-wide,
.cp-campaign-item-form .is-wide {
  grid-column: 1 / -1;
}

.cp-campaign-item-form input,
.cp-campaign-item-form textarea {
  width: 100%;
  border: 1px solid var(--cp-border);
  border-radius: 12px;
  background: #fff;
  color: var(--cp-ink);
  padding: 11px 12px;
  font: inherit;
  font-weight: 750;
}

.cp-campaign-item-table code {
  display: inline-flex;
  padding: 4px 7px;
  border-radius: 8px;
  color: #334155;
  background: #f1f5f9;
  font-size: 12px;
  font-weight: 850;
}

.cp-campaign-item-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 10px;
  color: var(--ss-success-dark);
  background: var(--ss-success-bg);
  font-size: 12px;
  font-weight: 900;
}

.cp-inbound-items {
  display: grid;
  gap: 18px;
}

.cp-inbound-item-form form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
}

.cp-inbound-item-form label {
  display: grid;
  gap: 7px;
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 900;
}

.cp-inbound-item-form label.is-wide,
.cp-inbound-item-form .is-wide {
  grid-column: 1 / -1;
}

.cp-inbound-item-form input,
.cp-inbound-item-form select,
.cp-inbound-item-form textarea {
  width: 100%;
  border: 1px solid var(--cp-border);
  border-radius: 12px;
  background: #fff;
  color: var(--cp-ink);
  padding: 11px 12px;
  font: inherit;
  font-weight: 750;
}

.cp-inbound-item-table code {
  display: inline-flex;
  padding: 4px 7px;
  border-radius: 8px;
  color: #334155;
  background: #f1f5f9;
  font-size: 12px;
  font-weight: 850;
}

.cp-inbound-item-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 900;
}

.cp-inbound-item-badge.is-success {
  color: var(--ss-success-dark);
  background: var(--ss-success-bg);
}

.cp-inbound-item-badge.is-warning {
  color: var(--ss-warning-dark);
  background: var(--ss-warning-bg);
}

.cp-inbound-item-badge.is-danger {
  color: var(--ss-danger-dark);
  background: var(--ss-danger-bg);
}

.cp-inbound-item-badge.is-muted {
  color: var(--cp-muted);
  background: #f1f5f9;
}

.cp-planning-settings-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 18px;
  align-items: stretch;
  margin-bottom: 18px;
  padding: 24px;
  border: 1px solid rgba(219, 39, 119, 0.12);
  border-radius: 24px;
  background: linear-gradient(135deg, #fff, #f8fbff);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
}

.cp-planning-settings-hero h2 {
  margin: 0;
  color: #101b36;
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: 0;
}

.cp-planning-settings-hero p,
.cp-planning-settings-hero span {
  color: #64748b;
  font-weight: 700;
}

.cp-planning-settings-hero aside {
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--cp-border);
  border-radius: 18px;
  background: #fff;
}

.cp-planning-settings-hero aside strong {
  color: #101b36;
  font-weight: 950;
}

.cp-planning-settings-form {
  display: grid;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--cp-border);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.cp-planning-check-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--cp-border);
  border-radius: 16px;
  background: #f8fafc;
}

.cp-planning-check-card input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--cp-brand-pink);
}

.cp-planning-check-card strong {
  display: block;
  color: #101b36;
  font-weight: 950;
}

.cp-planning-check-card small {
  color: #64748b;
  font-weight: 650;
}

.cp-planning-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.cp-planning-settings-grid label {
  display: grid;
  gap: 7px;
  color: #101b36;
  font-size: 13px;
  font-weight: 850;
}

.cp-planning-settings-grid label.is-wide {
  grid-column: 1 / -1;
}

.cp-planning-settings-grid input,
.cp-planning-settings-grid textarea {
  width: 100%;
  border: 1px solid var(--cp-border);
  border-radius: 12px;
  padding: 11px 12px;
  color: #101b36;
  background: #fff;
  font: inherit;
}

.cp-planning-settings-grid textarea {
  resize: vertical;
}

.cp-planning-settings-grid small {
  color: #b91c1c;
  font-weight: 750;
}

.cp-planning-import-page {
  display: grid;
  gap: 22px;
}

.cp-planning-import-card {
  padding: 22px;
}

.cp-planning-import-form {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.cp-planning-import-form label {
  display: grid;
  gap: 7px;
  min-width: min(360px, 100%);
  color: #52647a;
  font-size: 0.84rem;
  font-weight: 850;
}

.cp-planning-import-form input[type="file"] {
  border: 1px solid var(--cp-border);
  border-radius: 14px;
  background: #fff;
  color: #101b36;
  padding: 12px;
}

.cp-planning-import-table {
  min-width: 1120px;
}

.cp-planning-import-table code {
  border: 1px solid var(--cp-border);
  border-radius: 8px;
  background: #f8fafc;
  color: #101b36;
  padding: 3px 6px;
}

.cp-actions-page {
  display: grid;
  gap: 22px;
}

.cp-actions-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 28px;
  align-items: center;
  padding: 28px 30px;
  border: 1px solid rgba(217, 87, 204, 0.18);
  border-radius: 24px;
  background:
    radial-gradient(circle at 90% 10%, rgba(217, 87, 204, 0.13), transparent 34%),
    linear-gradient(135deg, #fff 0%, #f8fbff 100%);
  box-shadow: 0 18px 48px rgba(16, 27, 54, 0.06);
}

.cp-actions-eyebrow {
  display: inline-flex;
  width: fit-content;
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--cp-accent-dark);
  background: var(--cp-soft);
  font-size: 13px;
  font-weight: 900;
}

.cp-actions-hero h2 {
  margin: 16px 0 10px;
  color: var(--cp-ink);
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 0.98;
}

.cp-actions-hero p {
  max-width: 760px;
  margin: 0;
  color: var(--cp-muted);
  font-size: 18px;
  line-height: 1.55;
  font-weight: 750;
}

.cp-actions-hero aside {
  display: grid;
  gap: 8px;
  min-height: 150px;
  align-content: center;
  padding: 24px;
  border: 1px solid var(--cp-border);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.82);
}

.cp-actions-hero aside strong {
  color: var(--cp-ink);
  font-size: 18px;
}

.cp-actions-hero aside p {
  font-size: 15px;
}

.cp-actions-source-notice {
  display: grid;
  grid-template-columns: minmax(180px, 0.45fr) minmax(240px, 1fr);
  gap: 12px 22px;
  align-items: center;
}

.cp-actions-source-badges,
.cp-action-missing,
.cp-action-badges,
.cp-actions-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cp-actions-source-badges {
  grid-column: 2;
}

.cp-actions-source-badges span,
.cp-action-missing span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid var(--cp-border);
  border-radius: 999px;
  color: var(--cp-muted);
  background: #fff;
  font-size: 12px;
  font-weight: 850;
}

.cp-actions-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cp-actions-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.cp-actions-filters h3 {
  margin: 0 0 4px;
  color: var(--cp-ink);
  font-size: 20px;
}

.cp-actions-filters p {
  margin: 0;
  color: var(--cp-muted);
  font-weight: 750;
}

.cp-actions-filter-chips {
  justify-content: flex-end;
}

.cp-actions-state-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
}

.cp-actions-filter-chips a,
.cp-actions-state-filters a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid var(--cp-border);
  border-radius: 999px;
  color: var(--cp-muted);
  background: #fff;
  font-weight: 900;
}

.cp-actions-filter-chips a.is-active,
.cp-actions-state-filters a.is-active {
  color: var(--cp-accent-dark);
  border-color: rgba(217, 87, 204, 0.35);
  background: var(--cp-soft);
}

.cp-actions-list {
  display: grid;
  gap: 14px;
}

.cp-actions-page .cp-action-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.34fr);
  gap: 22px;
  padding: 20px;
  border: 1px solid var(--cp-border);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(16, 27, 54, 0.06);
}

.cp-actions-page .cp-action-card.cp-action-signal {
  border-color: #f4c7ea;
}

.cp-actions-page .cp-action-card.cp-action-source-forecast {
  background: linear-gradient(135deg, #fff, #f7fbff);
}

.cp-actions-page .cp-action-card.cp-action-source-campaigns,
.cp-actions-page .cp-action-card.cp-action-source-campaign {
  background: linear-gradient(135deg, #fff, #fff7fc);
}

.cp-actions-page .cp-action-card.cp-action-source-slow-movers {
  border-color: #d9e0ea;
  background: #fff;
}

.cp-actions-page .cp-action-card.cp-action-source-return-intelligence {
  border-color: #b9ded7;
  background: #fff;
}

.cp-actions-page .cp-action-type.is-high_return_rate,
.cp-actions-page .cp-action-card.cp-action-type-high-return-rate {
  border-color: #f2c8d7;
}

.cp-actions-page .cp-action-type.is-high_return_rate {
  color: #9f1239;
  background: #fff3f7;
}

.cp-actions-page .cp-action-type.is-high_return_volume,
.cp-actions-page .cp-action-card.cp-action-type-high-return-volume {
  border-color: #f8dda5;
}

.cp-actions-page .cp-action-type.is-high_return_volume {
  color: #925700;
  background: #fff8e8;
}

.cp-actions-page .cp-action-type.is-repack_risk,
.cp-actions-page .cp-action-card.cp-action-type-repack-risk {
  border-color: #b9ded7;
}

.cp-actions-page .cp-action-type.is-repack_risk {
  color: #075f52;
  background: #effaf7;
}

.cp-actions-page .cp-action-type.is-unknown_returns,
.cp-actions-page .cp-action-card.cp-action-type-unknown-returns {
  border-color: #cfe5ff;
}

.cp-actions-page .cp-action-type.is-unknown_returns {
  color: #15519b;
  background: #eef7ff;
}

.cp-actions-page .cp-action-type.is-dead_stock,
.cp-actions-page .cp-action-card.cp-action-type-dead-stock {
  border-color: #f2c8d7;
}

.cp-actions-page .cp-action-type.is-dead_stock {
  color: #9f1239;
  background: #fff3f7;
}

.cp-actions-page .cp-action-type.is-overstock,
.cp-actions-page .cp-action-card.cp-action-type-overstock {
  border-color: #f8dda5;
}

.cp-actions-page .cp-action-type.is-overstock {
  color: #925700;
  background: #fff8e8;
}

.cp-actions-page .cp-action-type.is-slow_mover,
.cp-actions-page .cp-action-card.cp-action-type-slow-mover {
  border-color: #cfe5ff;
}

.cp-actions-page .cp-action-type.is-slow_mover {
  color: #15519b;
  background: #eef7ff;
}

.cp-actions-page .cp-action-main {
  display: grid;
  gap: 10px;
}

.cp-actions-page .cp-action-card h3 {
  margin: 0;
  color: var(--cp-ink);
  font-size: 22px;
  line-height: 1.2;
}

.cp-actions-page .cp-action-card p {
  margin: 0;
  color: var(--cp-muted);
  font-weight: 700;
  line-height: 1.5;
}

.cp-actions-page .cp-action-recommendation {
  display: block;
  color: var(--cp-ink);
  font-size: 15px;
}

.cp-actions-page .cp-action-priority,
.cp-actions-page .cp-action-type,
.cp-action-state-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.cp-actions-page .cp-action-priority.is-critical,
.cp-actions-page .cp-action-type.is-stock {
  color: var(--ss-danger-dark);
  background: var(--ss-danger-bg);
}

.cp-actions-page .cp-action-priority.is-high,
.cp-actions-page .cp-action-type.is-inbound,
.cp-actions-page .cp-action-type.is-returns {
  color: var(--ss-warning-dark);
  background: var(--ss-warning-bg);
}

.cp-actions-page .cp-action-priority.is-medium,
.cp-actions-page .cp-action-type.is-data_missing {
  color: var(--cp-accent-dark);
  background: var(--cp-soft);
}

.cp-actions-page .cp-action-priority.is-low,
.cp-actions-page .cp-action-priority.is-info,
.cp-actions-page .cp-action-type {
  color: var(--cp-muted);
  background: #f3f6f8;
}

.cp-actions-page .cp-action-type.is-reorder,
.cp-actions-page .cp-action-type.is-forecast,
.cp-actions-page .cp-action-type.is-campaign {
  color: var(--ss-success-dark);
  background: var(--ss-success-bg);
}

.cp-action-state-badge.is-seen {
  color: var(--ss-success-dark);
  background: var(--ss-success-bg);
}

.cp-action-state-badge.is-dismissed {
  color: var(--cp-muted);
  background: #eef2f6;
}

.cp-action-state-badge.is-snoozed,
.cp-action-state-badge.is-expired {
  color: var(--ss-warning-dark);
  background: var(--ss-warning-bg);
}

.cp-actions-page .cp-action-side {
  display: grid;
  gap: 14px;
  align-content: space-between;
}

.cp-actions-page .cp-action-meta {
  display: grid;
  gap: 8px;
  margin: 0;
}

.cp-actions-page .cp-action-meta div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cp-border);
}

.cp-actions-page .cp-action-meta div:last-child {
  border-bottom: 0;
}

.cp-actions-page .cp-action-meta dt {
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.cp-actions-page .cp-action-meta dd {
  margin: 0;
  color: var(--cp-ink);
  font-weight: 850;
  text-align: right;
}

.cp-actions-page .cp-action-cta {
  width: 100%;
  justify-content: center;
}

.cp-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cp-action-inline-form,
.cp-action-snooze-form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.cp-action-inline-form .cp-btn,
.cp-action-snooze-form .cp-btn {
  min-height: 34px;
  padding: 8px 11px;
  font-size: 12px;
}

.cp-action-snooze-form input[type="date"] {
  min-height: 34px;
  max-width: 150px;
  border: 1px solid var(--cp-border);
  border-radius: 999px;
  background: #fff;
  color: var(--cp-ink);
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 800;
}

.cp-suppliers-page {
  display: grid;
  gap: 24px;
}

.cp-suppliers-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 28px;
  border: 1px solid rgba(211, 52, 184, 0.18);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 241, 251, 0.82));
  box-shadow: var(--cp-shadow-soft);
}

.cp-suppliers-hero h2 {
  margin: 10px 0 8px;
  color: var(--cp-ink);
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1;
}

.cp-suppliers-hero p {
  max-width: 760px;
  margin: 0;
  color: var(--cp-muted);
  font-weight: 750;
}

.cp-suppliers-filter {
  align-items: center;
}

.cp-suppliers-filter form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}

.cp-suppliers-filter label {
  display: grid;
  gap: 6px;
  min-width: min(320px, 100%);
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 900;
}

.cp-suppliers-filter input {
  min-height: 42px;
  border: 1px solid var(--cp-border);
  border-radius: 999px;
  padding: 10px 14px;
  color: var(--cp-ink);
  font-weight: 800;
}

.cp-suppliers-table .cp-empty-state {
  margin: 16px;
}

.cp-supplier-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.cp-supplier-status.is-active {
  color: var(--ss-success-dark);
  background: var(--ss-success-bg);
}

.cp-supplier-status.is-inactive {
  color: var(--cp-muted);
  background: #eef2f6;
}

.cp-supplier-form {
  display: grid;
  gap: 20px;
}

.cp-supplier-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--cp-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--cp-shadow-soft);
}

.cp-supplier-form-grid label {
  display: grid;
  gap: 7px;
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 900;
}

.cp-supplier-form-grid label.is-wide {
  grid-column: 1 / -1;
}

.cp-supplier-form-grid input,
.cp-supplier-form-grid select,
.cp-supplier-form-grid textarea {
  width: 100%;
  border: 1px solid var(--cp-border);
  border-radius: 12px;
  background: #fff;
  color: var(--cp-ink);
  padding: 11px 12px;
  font: inherit;
  font-weight: 750;
}

.cp-supplier-form-grid textarea {
  resize: vertical;
}

.cp-supplier-form-grid small {
  color: var(--ss-danger);
  font-weight: 800;
}

.cp-supplier-products {
  display: grid;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--cp-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--cp-shadow-soft);
}

.cp-supplier-products-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.cp-supplier-products-summary article {
  display: grid;
  gap: 6px;
  min-height: 94px;
  padding: 15px;
  border: 1px solid var(--cp-border);
  border-radius: 14px;
  background: #f8fbff;
}

.cp-supplier-products-summary span {
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 900;
}

.cp-supplier-products-summary strong {
  color: var(--cp-ink);
  font-size: 28px;
  line-height: 1;
}

.cp-supplier-product-table th,
.cp-supplier-product-table td {
  vertical-align: top;
}

.cp-supplier-product-match {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.cp-supplier-product-match.is-direct {
  color: var(--ss-success-dark);
  background: var(--ss-success-bg);
}

.cp-supplier-product-match.is-text {
  color: #9a5b00;
  background: #fff3cd;
}

.cp-supplier-product-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cp-supplier-text-matches {
  display: grid;
  gap: 14px;
  padding-top: 6px;
}

.cp-supplier-text-matches header {
  display: grid;
  gap: 4px;
}

.cp-supplier-text-matches h4 {
  margin: 0;
  color: var(--cp-ink);
  font-size: 18px;
}

.cp-supplier-text-matches p {
  margin: 0;
  color: var(--cp-muted);
  font-weight: 750;
}

.cp-supplier-access-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 850;
}

.cp-supplier-plan {
  display: grid;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--cp-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--cp-shadow-soft);
}

.cp-supplier-plan-notice {
  padding: 12px 14px;
  border: 1px solid rgba(42, 116, 214, 0.18);
  border-radius: 14px;
  background: #eef6ff;
  color: var(--cp-ink);
  font-weight: 850;
}

.cp-supplier-plan-export {
  display: grid;
  gap: 10px;
}

.cp-supplier-plan-export-notice {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid rgba(42, 116, 214, 0.18);
  border-radius: 14px;
  background: #eef6ff;
  color: var(--cp-ink);
}

.cp-supplier-plan-export-notice strong {
  font-weight: 900;
}

.cp-supplier-plan-export-notice span {
  color: var(--cp-muted);
  font-size: 13px;
  font-weight: 800;
}

.cp-supplier-plan-export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cp-supplier-plan-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.cp-supplier-plan-summary article {
  display: grid;
  gap: 6px;
  min-height: 94px;
  padding: 15px;
  border: 1px solid var(--cp-border);
  border-radius: 14px;
  background: #f8fbff;
}

.cp-supplier-plan-summary span {
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 900;
}

.cp-supplier-plan-summary strong {
  color: var(--cp-ink);
  font-size: 25px;
  line-height: 1.1;
}

.cp-supplier-plan-health {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--cp-border);
}

.cp-supplier-plan-health span {
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 900;
}

.cp-supplier-plan-health strong {
  color: var(--cp-ink);
  font-size: 22px;
}

.cp-supplier-plan-health.is-ready {
  border-color: rgba(28, 169, 91, 0.24);
  background: var(--ss-success-bg);
}

.cp-supplier-plan-health.is-requires-action {
  border-color: rgba(176, 106, 0, 0.22);
  background: #fff7df;
}

.cp-supplier-plan-health.is-not-ready {
  border-color: rgba(214, 42, 42, 0.18);
  background: #fff0f0;
}

.cp-supplier-plan-table th,
.cp-supplier-plan-table td {
  vertical-align: top;
}

.cp-supplier-plan-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #eef2f6;
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 900;
}

.cp-supplier-plan-badge.is-ready {
  color: var(--ss-success-dark);
  background: var(--ss-success-bg);
}

.cp-supplier-plan-badge.is-warning,
.cp-supplier-plan-badge.is-requires-action {
  color: #9a5b00;
  background: #fff3cd;
}

.cp-supplier-plan-badge.is-error,
.cp-supplier-plan-badge.is-not-ready {
  color: var(--ss-danger);
  background: #fff0f0;
}

.cp-supplier-plan-badge.is-text {
  margin-top: 6px;
  color: #9a5b00;
  background: #fff3cd;
}

.cp-supplier-plan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cp-supplier-plan-empty {
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px dashed var(--cp-border);
  border-radius: 16px;
  background: #f8fbff;
}

.cp-supplier-plan-empty strong {
  color: var(--cp-ink);
  font-size: 18px;
}

.cp-supplier-plan-empty p {
  max-width: 720px;
  margin: 0;
  color: var(--cp-muted);
  font-weight: 750;
}

.cp-supplier-plan-issues {
  display: grid;
  gap: 4px;
  margin-top: 8px;
}

.cp-supplier-plan-issues span {
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 800;
}

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

.cp-purchase-plan-page {
  display: grid;
  gap: 22px;
}

.cp-purchase-plan-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.7fr);
  gap: 24px;
  align-items: stretch;
  padding: 30px;
  border: 1px solid rgba(205, 53, 190, 0.16);
  border-radius: 22px;
  background: linear-gradient(135deg, #fff 0%, #fff 66%, rgba(205, 53, 190, 0.08) 100%);
}

.cp-purchase-plan-hero h2 {
  margin: 8px 0 10px;
  color: var(--cp-ink);
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1;
}

.cp-purchase-plan-hero p {
  max-width: 760px;
  color: var(--cp-muted);
  font-weight: 800;
}

.cp-purchase-plan-notice {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 24px;
  border: 1px solid var(--cp-border);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.84);
  color: var(--cp-muted);
  font-weight: 800;
}

.cp-purchase-plan-notice strong {
  color: var(--cp-ink);
  font-size: 18px;
}

.cp-purchase-plan-summary {
  display: grid;
  grid-template-columns: 1.5fr repeat(2, minmax(160px, 0.5fr));
  gap: 14px;
}

.cp-purchase-plan-summary article {
  display: grid;
  gap: 5px;
  min-height: 112px;
  padding: 18px;
  border: 1px solid var(--cp-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--cp-shadow-soft);
}

.cp-purchase-plan-summary span,
.cp-purchase-plan-summary small {
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 900;
}

.cp-purchase-plan-summary strong {
  color: var(--cp-ink);
  font-size: 24px;
}

.cp-purchase-plan-health {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid var(--cp-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--cp-shadow-soft);
}

.cp-purchase-plan-health--ready {
  border-color: rgba(40, 167, 69, 0.28);
  background: rgba(40, 167, 69, 0.08);
}

.cp-purchase-plan-health--requires-action {
  border-color: rgba(255, 193, 7, 0.36);
  background: rgba(255, 193, 7, 0.12);
}

.cp-purchase-plan-health--not-ready {
  border-color: rgba(220, 53, 69, 0.24);
  background: rgba(220, 53, 69, 0.08);
}

.cp-purchase-plan-health span,
.cp-purchase-plan-health p {
  color: var(--cp-muted);
  font-weight: 850;
}

.cp-purchase-plan-health strong {
  display: block;
  margin: 4px 0;
  color: var(--cp-ink);
  font-size: 28px;
}

.cp-purchase-plan-health-meta,
.cp-purchase-plan-validation-list,
.cp-purchase-plan-fix-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cp-purchase-plan-health-meta span,
.cp-purchase-plan-validation-list span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid var(--cp-border);
  border-radius: 999px;
  background: #fff;
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 900;
}

.cp-purchase-plan-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.cp-purchase-plan-summary-grid article {
  display: grid;
  gap: 4px;
  min-height: 96px;
  padding: 16px;
  border: 1px solid var(--cp-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--cp-shadow-soft);
}

.cp-purchase-plan-summary-grid span {
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 900;
}

.cp-purchase-plan-summary-grid strong {
  color: var(--cp-ink);
  font-size: 26px;
}

.cp-purchase-plan-export {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid var(--cp-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--cp-shadow-soft);
}

.cp-purchase-plan-export--ready {
  border-color: rgba(40, 167, 69, 0.24);
}

.cp-purchase-plan-export--requires-action {
  border-color: rgba(255, 193, 7, 0.34);
}

.cp-purchase-plan-export--not-ready {
  border-color: rgba(220, 53, 69, 0.22);
}

.cp-purchase-plan-export span,
.cp-purchase-plan-export p,
.cp-purchase-plan-export small {
  color: var(--cp-muted);
  font-weight: 850;
}

.cp-purchase-plan-export strong {
  display: block;
  margin: 4px 0;
  color: var(--cp-ink);
  font-size: 22px;
}

.cp-purchase-plan-export small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
}

.cp-purchase-plan-export-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.cp-purchase-plan-export-disabled {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--cp-border);
  border-radius: 999px;
  background: #fff;
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 900;
}

.cp-purchase-plan-empty {
  display: grid;
  gap: 12px;
  padding: 24px;
}

.cp-purchase-plan-groups {
  display: grid;
  gap: 18px;
}

.cp-purchase-plan-group {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--cp-border);
  border-radius: 16px;
  background: #fff;
}

.cp-purchase-plan-group.is-unknown {
  border-color: rgba(255, 193, 7, 0.36);
  background: rgba(255, 193, 7, 0.06);
}

.cp-purchase-plan-group-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: start;
}

.cp-purchase-plan-group-header h4 {
  margin: 0 0 4px;
  color: var(--cp-ink);
  font-size: 20px;
}

.cp-purchase-plan-group-header p {
  margin: 0;
  color: var(--cp-muted);
  font-weight: 800;
}

.cp-purchase-plan-group-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.cp-purchase-plan-group-stats span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid var(--cp-border);
  border-radius: 999px;
  background: #fff;
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 900;
}

.cp-purchase-plan-line-form {
  display: grid;
  grid-template-columns: minmax(90px, 130px) minmax(180px, 1fr) auto;
  gap: 8px;
  align-items: start;
  min-width: 360px;
}

.cp-purchase-plan-line-form input,
.cp-purchase-plan-line-form textarea {
  width: 100%;
  border: 1px solid var(--cp-border);
  border-radius: 12px;
  background: #fff;
  color: var(--cp-ink);
  padding: 9px 10px;
  font: inherit;
  font-weight: 750;
}

.cp-purchase-plan-line-form textarea {
  resize: vertical;
}

.cp-purchase-plan-source {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid var(--cp-border);
  border-radius: 999px;
  background: #fff;
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 900;
}

.cp-purchase-plan-actions,
.cp-purchase-plan-inline-form {
  display: inline-flex;
  margin: 0 0 6px;
}

.cp-purchase-plan-validation-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-bottom: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
}

.cp-purchase-plan-validation-badge.is-ready {
  background: rgba(40, 167, 69, 0.14);
  color: #0c6b30;
}

.cp-purchase-plan-validation-badge.is-warning {
  background: rgba(255, 193, 7, 0.18);
  color: #8a5a00;
}

.cp-purchase-plan-validation-badge.is-error {
  background: rgba(220, 53, 69, 0.12);
  color: #a51f2c;
}

.cp-purchase-plan-validation-message,
.cp-purchase-plan-supplier-label {
  display: block;
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 850;
}

.cp-purchase-plan-fix-links {
  margin-top: 6px;
}

.cp-purchase-plan-fix-links a,
.cp-purchase-plan-fix-links span {
  color: var(--ss-pink);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.cp-simulation-purchase-plan-form {
  margin-top: 18px;
}

@media (max-width: 1180px) {
  .cp-dashboard-v1-hero,
  .cp-dashboard-main-grid,
  .cp-dashboard-main-grid.is-attention {
    grid-template-columns: 1fr;
  }

  .cp-dashboard-kpi-grid,
  .cp-dashboard-recommendations {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cp-academy-category-grid,
  .cp-academy-guide-grid,
  .cp-planning-center-hero,
  .cp-planning-center-grid,
  .cp-data-quality-hero,
  .cp-data-quality-issue,
  .cp-planning-hero,
  .cp-planning-settings-hero,
  .cp-purchase-plan-hero,
  .cp-suppliers-hero,
  .cp-actions-hero,
  .cp-actions-page .cp-action-card,
  .cp-academy-guide-detail {
    grid-template-columns: 1fr;
  }

  .cp-planning-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cp-planning-center-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cp-data-quality-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cp-data-quality-categories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cp-simulation-summary,
  .cp-simulation-results,
  .cp-simulation-form form,
  .cp-simulation-comparison dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cp-actions-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cp-purchase-plan-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cp-purchase-plan-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cp-supplier-products-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cp-supplier-plan-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .cp-planning-center-hero,
  .cp-data-quality-hero,
  .cp-planning-center-card,
  .cp-planning-center-quick-links,
  .cp-data-quality-issue {
    padding: 18px;
  }

  .cp-planning-center-kpis,
  .cp-data-quality-summary,
  .cp-data-quality-categories {
    grid-template-columns: 1fr;
  }

  .cp-planning-center-notice {
    grid-template-columns: 1fr;
  }

  .cp-dashboard-v1-hero {
    padding: 24px;
    border-radius: 22px;
  }

  .cp-dashboard-v1-copy h1 {
    font-size: 36px;
  }

  .cp-dashboard-v1-visual {
    display: none;
  }

  .cp-dashboard-kpi-grid,
  .cp-dashboard-recommendations,
  .cp-next-list,
  .cp-return-summary-grid,
  .cp-promote-body,
  .cp-promote-body dl,
  .cp-attention-list a,
  .cp-shipshark-tip {
    grid-template-columns: 1fr;
  }

  .cp-attention-list a {
    align-items: start;
  }

  .cp-inbound-owner-card {
    min-width: 0;
  }

  .cp-planning-hero {
    padding: 22px;
  }

  .cp-planning-actions,
  .cp-planning-filters,
  .cp-actions-filters {
    align-items: stretch;
    flex-direction: column;
  }

  .cp-planning-filter-chips,
  .cp-actions-filter-chips,
  .cp-actions-state-filters {
    justify-content: flex-start;
  }

  .cp-planning-kpis,
  .cp-actions-kpis,
  .cp-purchase-plan-summary,
  .cp-purchase-plan-summary-grid,
  .cp-simulation-summary,
  .cp-simulation-results,
  .cp-simulation-form form,
  .cp-simulation-comparison dl {
    grid-template-columns: 1fr;
  }

  .cp-actions-hero {
    padding: 22px;
  }

  .cp-actions-source-notice {
    grid-template-columns: 1fr;
  }

  .cp-actions-source-badges {
    grid-column: auto;
  }

  .cp-planning-settings-grid {
    grid-template-columns: 1fr;
  }

  .cp-planning-calculation-grid {
    grid-template-columns: 1fr;
  }

  .cp-supplier-form-grid {
    grid-template-columns: 1fr;
  }

  .cp-supplier-products {
    padding: 18px;
  }

  .cp-supplier-plan {
    padding: 18px;
  }

  .cp-supplier-products-summary,
  .cp-supplier-plan-summary {
    grid-template-columns: 1fr;
  }

  .cp-campaign-item-form form {
    grid-template-columns: 1fr;
  }

  .cp-inbound-item-form form {
    grid-template-columns: 1fr;
  }

  .cp-purchase-plan-hero {
    padding: 22px;
  }

  .cp-purchase-plan-line-form {
    grid-template-columns: 1fr;
    min-width: 240px;
  }

  .cp-forecast-item-form form {
    grid-template-columns: 1fr;
  }

  .cp-purchase-plan-health,
  .cp-purchase-plan-export,
  .cp-data-quality-issue,
  .cp-purchase-plan-group-header {
    grid-template-columns: 1fr;
    display: grid;
  }

  .cp-purchase-plan-export-actions {
    justify-content: flex-start;
  }

  .cp-purchase-plan-group-stats {
    justify-content: flex-start;
  }

  .cp-academy-hero,
  .cp-academy-guide-hero {
    grid-template-columns: 1fr;
    padding: 22px;
  }

  .cp-academy-hero-card,
  .cp-academy-guide-hero-icon {
    width: 100%;
    min-height: 110px;
  }
}

/* Cascade guard: the signed-in shell has later compact defaults; dashboard owns these surfaces. */
.customer-portal.cp-signed-in .cp-dashboard-page .cp-btn,
.customer-portal.cp-signed-in .cp-dashboard-page .cp-dashboard-section-link {
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
}

.customer-portal.cp-signed-in .cp-dashboard-page .cp-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 11px;
}

.customer-portal.cp-signed-in .cp-dashboard-page .cp-section-heading h2 {
  margin: 4px 0 0;
  font-size: 22px;
}

.customer-portal.cp-signed-in .cp-dashboard-page .cp-section-kicker,
.customer-portal.cp-signed-in .cp-dashboard-page .cp-section-heading > a {
  font-size: 11px;
}

.customer-portal.cp-signed-in .cp-dashboard-page .cp-recommendation-card {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 13px;
  min-height: 174px;
  padding: 18px;
  border-radius: 16px;
  box-shadow: 0 7px 20px rgba(35, 32, 69, 0.04);
}

.customer-portal.cp-signed-in .cp-dashboard-page .cp-recommendation-card h3 {
  margin: 0;
  font-size: 16px;
}

.customer-portal.cp-signed-in .cp-dashboard-page .cp-recommendation-card p {
  margin: 6px 0 12px;
  font-size: 13px;
  line-height: 1.45;
}

.customer-portal.cp-signed-in .cp-dashboard-page .cp-recommendation-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
}

.customer-portal.cp-signed-in .cp-dashboard-page .cp-recommendation-icon svg {
  width: 18px;
  height: 18px;
}

.customer-portal.cp-signed-in .cp-dashboard-page .cp-recommendation-label {
  min-height: 0;
  margin-bottom: 6px;
  padding: 4px 7px;
  font-size: 9px;
  line-height: 1;
}

.customer-portal.cp-signed-in .cp-dashboard-page .cp-recommendation-cta {
  width: auto;
  min-height: 32px;
  margin-top: auto;
  padding: 6px 10px;
  box-shadow: none;
}

.customer-portal.cp-signed-in .cp-dashboard-page .cp-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.customer-portal.cp-signed-in .cp-dashboard-page .cp-panel-header h2,
.customer-portal.cp-signed-in .cp-dashboard-page .cp-panel h2 {
  font-size: 19px;
}

@media (max-width: 720px) {
  .customer-portal.cp-signed-in .cp-dashboard-page .cp-section-heading,
  .customer-portal.cp-signed-in .cp-dashboard-page .cp-panel-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .customer-portal.cp-signed-in .cp-dashboard-page .cp-recommendation-card {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 17px;
  }
}

/* Return Intelligence Premium overview */
.customer-portal .cp-ri-page {
  --ri-navy: #0b1b3b;
  --ri-muted: #61718e;
  --ri-pink: #c52db5;
  --ri-pink-dark: #a91da0;
  --ri-pink-soft: #fff2fc;
  --ri-green: #079653;
  --ri-green-soft: #eefbf3;
  --ri-blue: #4d86ef;
  --ri-orange: #db680e;
  --ri-orange-soft: #fff8ed;
  display: grid;
  gap: 18px;
  width: 100%;
  color: var(--ri-navy);
}

.customer-portal .cp-ri-page h1,
.customer-portal .cp-ri-page h2,
.customer-portal .cp-ri-page p {
  margin: 0;
}

.customer-portal .cp-ri-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding: 4px 0 0;
}

.customer-portal .cp-ri-premium-label {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-bottom: 7px;
  padding: 4px 9px;
  border: 1px solid #f1c9ec;
  border-radius: 999px;
  background: var(--ri-pink-soft);
  color: var(--ri-pink-dark);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.customer-portal .cp-ri-header h1 {
  color: var(--ri-navy);
  font-size: clamp(31px, 3vw, 44px);
  line-height: 1.05;
  letter-spacing: -.035em;
}

.customer-portal .cp-ri-header > div > p {
  max-width: 780px;
  margin-top: 9px;
  color: var(--ri-muted);
  font-size: 15px;
  line-height: 1.55;
}

.customer-portal .cp-ri-focus-period {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 13px;
  color: #50617e;
  font-size: 14px;
  line-height: 1.45;
}

.customer-portal .cp-ri-focus-period > span:first-child {
  color: var(--ri-pink);
}

.customer-portal .cp-ri-header-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 10px;
}

.customer-portal .cp-ri-button,
.customer-portal .cp-ri-dark-button,
.customer-portal .cp-ri-month-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid #dbe4ef;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(13, 36, 73, .06);
  color: var(--ri-navy);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.customer-portal .cp-ri-button:hover,
.customer-portal .cp-ri-month-button:hover {
  border-color: #d5a8d0;
  box-shadow: 0 6px 18px rgba(183, 44, 168, .12);
  transform: translateY(-1px);
}

.customer-portal .cp-ri-button.is-accent {
  border-color: #f0c6eb;
  color: var(--ri-pink-dark);
}

.customer-portal .cp-ri-periods {
  display: flex;
  justify-content: flex-end;
  gap: 3px;
  margin-top: -9px;
}

.customer-portal .cp-ri-periods a {
  padding: 7px 12px;
  border: 1px solid #dfe7f1;
  background: #fff;
  color: #4f607c;
  font-size: 12px;
  font-weight: 900;
}

.customer-portal .cp-ri-periods a:first-child {
  border-radius: 9px 0 0 9px;
}

.customer-portal .cp-ri-periods a:last-child {
  border-radius: 0 9px 9px 0;
}

.customer-portal .cp-ri-periods a.is-active {
  border-color: #efc9ea;
  background: var(--ri-pink-soft);
  color: var(--ri-pink-dark);
}

.customer-portal .cp-ri-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.customer-portal .cp-ri-kpis article,
.customer-portal .cp-ri-kpi-link {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-height: 126px;
  padding: 17px;
  border: 1px solid #dfe7f1;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(26, 51, 92, .06);
}

.customer-portal .cp-ri-kpi-link {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  background: linear-gradient(135deg, #fff 35%, #fff9f0 100%);
}

.customer-portal .cp-ri-kpi-link:hover {
  border-color: #efc189;
}

.customer-portal .cp-ri-kpi-link[aria-disabled="true"] {
  pointer-events: none;
}

.customer-portal .cp-ri-kpi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(145deg, #fff0fc, #f9f3ff);
  color: var(--ri-pink);
  font-size: 22px;
  font-weight: 900;
}

.customer-portal .cp-ri-kpi-icon.is-attention {
  background: #fff2e5;
  color: var(--ri-orange);
}

.customer-portal .cp-ri-kpis small,
.customer-portal .cp-ri-kpi-link small {
  display: block;
  margin-bottom: 4px;
  color: #546681;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 900;
}

.customer-portal .cp-ri-kpis strong,
.customer-portal .cp-ri-kpi-link strong {
  display: block;
  color: var(--ri-navy);
  font-size: 27px;
  line-height: 1.1;
  letter-spacing: -.025em;
}

.customer-portal .cp-ri-kpis strong em {
  color: var(--ri-navy);
  font-size: 13px;
  font-style: normal;
}

.customer-portal .cp-ri-kpis p,
.customer-portal .cp-ri-kpi-link p {
  margin-top: 8px;
  color: #667791;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 800;
}

.customer-portal .cp-ri-page .is-positive {
  color: var(--ri-green) !important;
}

.customer-portal .cp-ri-page .is-attention {
  color: var(--ri-orange) !important;
}

.customer-portal .cp-ri-status,
.customer-portal .cp-ri-alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid #cdebd9;
  border-radius: 11px;
  background: var(--ri-green-soft);
  color: #08743f;
  font-size: 14px;
  line-height: 1.5;
}

.customer-portal .cp-ri-status > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 900;
}

.customer-portal .cp-ri-status a {
  color: var(--ri-navy);
  font-weight: 900;
}

.customer-portal .cp-ri-status.is-info,
.customer-portal .cp-ri-status.is-muted {
  border-color: #d7e4f2;
  background: #f5f9fd;
  color: #45617f;
}

.customer-portal .cp-ri-status.is-attention,
.customer-portal .cp-ri-alert.is-attention {
  border-color: #f2d2ad;
  background: var(--ri-orange-soft);
  color: #a4510b;
}

.customer-portal .cp-ri-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dfe7f1;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(26, 51, 92, .055);
}

.customer-portal .cp-ri-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 17px 12px;
}

.customer-portal .cp-ri-card h2 {
  color: var(--ri-navy);
  font-size: 15px;
  line-height: 1.25;
}

.customer-portal .cp-ri-card header p {
  margin-top: 4px;
  color: var(--ri-muted);
  font-size: 14px;
  line-height: 1.5;
}

.customer-portal .cp-ri-primary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(330px, .95fr);
  gap: 12px;
}

.customer-portal .cp-ri-chart-card header {
  align-items: center;
}

.customer-portal .cp-ri-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px 12px;
  color: #596a84;
  font-size: 12px;
  font-weight: 800;
}

.customer-portal .cp-ri-legend span::before {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-radius: 50%;
  background: #dc7bd1;
  content: "";
}

.customer-portal .cp-ri-legend .is-rate::before {
  background: #813dc3;
}

.customer-portal .cp-ri-legend .is-house::before {
  width: 12px;
  height: 0;
  border-top: 2px dashed #8fa3bf;
  border-radius: 0;
  background: transparent;
}

.customer-portal .cp-ri-legend .is-repack::before {
  background: var(--ri-blue);
}

.customer-portal .cp-ri-chart-scroll {
  overflow-x: auto;
  padding: 0 12px 10px;
}

.customer-portal .cp-ri-chart {
  display: block;
  width: 100%;
  min-width: 600px;
  height: auto;
}

.customer-portal .cp-ri-chart-grid {
  stroke: #e6edf5;
  stroke-width: 1;
}

.customer-portal .cp-ri-chart-axis,
.customer-portal .cp-ri-chart-month {
  fill: #71819a;
  font-family: inherit;
  font-size: 8px;
  font-weight: 700;
}

.customer-portal .cp-ri-chart-bar.is-packages {
  fill: #de7bd4;
  opacity: .72;
}

.customer-portal .cp-ri-chart-bar.is-repack {
  fill: var(--ri-blue);
  opacity: .72;
}

.customer-portal .cp-ri-chart-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.customer-portal .cp-ri-chart-line.is-rate {
  stroke: #813dc3;
}

.customer-portal .cp-ri-chart-line.is-house {
  stroke: #8fa3bf;
  stroke-dasharray: 5 4;
}

.customer-portal .cp-ri-chart-point {
  fill: #813dc3;
  stroke: #fff;
  stroke-width: 1.3;
}

.customer-portal .cp-ri-table-scroll {
  overflow-x: auto;
}

.customer-portal .cp-ri-page table {
  width: 100%;
  border-collapse: collapse;
  color: var(--ri-navy);
  font-size: 14px;
  line-height: 1.45;
}

.customer-portal .cp-ri-page th {
  padding: 10px 12px;
  border-top: 1px solid #edf1f6;
  border-bottom: 1px solid #e4ebf3;
  background: #fbfcfe;
  color: #5e6f89;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .025em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.customer-portal .cp-ri-page td {
  padding: 10px 12px;
  border-bottom: 1px solid #e8eef5;
  vertical-align: middle;
}

.customer-portal .cp-ri-page tbody tr:last-child td {
  border-bottom: 0;
}

.customer-portal .cp-ri-products td:first-child {
  min-width: 145px;
}

.customer-portal .cp-ri-products td a {
  color: var(--ri-pink-dark);
}

.customer-portal .cp-ri-products td small {
  display: block;
  margin-top: 3px;
  color: #75849a;
  font-size: 13px;
  line-height: 1.45;
}

.customer-portal .cp-ri-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 180px;
  padding: 24px;
  color: var(--ri-muted);
  text-align: center;
}

.customer-portal .cp-ri-empty strong {
  color: var(--ri-navy);
}

.customer-portal .cp-ri-empty span,
.customer-portal .cp-ri-empty p {
  max-width: 430px;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.55;
}

.customer-portal .cp-ri-empty.is-premium {
  margin: 0 16px 16px;
  min-height: 170px;
  border: 1px dashed #edcfeb;
  border-radius: 11px;
  background: #fffaff;
}

.customer-portal .cp-ri-empty.is-premium > span {
  color: var(--ri-pink);
  font-size: 30px;
}

.customer-portal .cp-ri-insights > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 0 16px 16px;
}

.customer-portal .cp-ri-insights article {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  padding: 12px;
  border: 1px solid #ead9ed;
  border-radius: 10px;
  background: #fffaff;
}

.customer-portal .cp-ri-insights article span {
  color: var(--ri-pink);
  font-size: 17px;
}

.customer-portal .cp-ri-insights article p {
  color: #475c78;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 750;
}

.customer-portal .cp-ri-secondary-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.05fr .8fr;
  gap: 12px;
}

.customer-portal .cp-ri-treatment {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 4px 18px 20px;
}

.customer-portal .cp-ri-treatment-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 104px;
  height: 104px;
  border: 14px solid #e5b5df;
  border-top-color: var(--ri-green);
  border-radius: 50%;
  text-align: center;
}

.customer-portal .cp-ri-treatment-ring strong {
  font-size: 20px;
}

.customer-portal .cp-ri-treatment-ring span {
  color: var(--ri-muted);
  font-size: 11px;
  line-height: 1.35;
}

.customer-portal .cp-ri-treatment dl,
.customer-portal .cp-ri-treatment p {
  margin: 0;
}

.customer-portal .cp-ri-treatment dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  color: #4f617d;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 800;
}

.customer-portal .cp-ri-treatment dt i {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--ri-green);
}

.customer-portal .cp-ri-treatment p,
.customer-portal .cp-ri-treatment small {
  display: block;
  margin-top: 7px;
  color: var(--ri-muted);
  font-size: 14px;
  line-height: 1.5;
}

.customer-portal .cp-ri-unknown {
  border-color: #f1d8ba;
  background: linear-gradient(145deg, #fff 35%, #fff8ee 100%);
}

.customer-portal .cp-ri-unknown header h2 {
  color: var(--ri-orange);
}

.customer-portal .cp-ri-unknown > strong,
.customer-portal .cp-ri-unknown > p,
.customer-portal .cp-ri-unknown > a {
  margin-left: 17px;
  margin-right: 17px;
}

.customer-portal .cp-ri-unknown > strong {
  display: block;
  font-size: 18px;
}

.customer-portal .cp-ri-unknown > p {
  margin-top: 8px;
  color: var(--ri-muted);
  font-size: 14px;
  line-height: 1.5;
}

.customer-portal .cp-ri-dark-button {
  width: max-content;
  margin-top: 18px;
  margin-bottom: 18px;
  border-color: var(--ri-navy);
  background: var(--ri-navy);
  color: #fff;
}

.customer-portal .cp-ri-months > header {
  align-items: center;
}

.customer-portal .cp-ri-months > header > span {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--ri-pink-soft);
  color: var(--ri-pink-dark);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 900;
}

.customer-portal .cp-ri-months table {
  min-width: 970px;
}

.customer-portal .cp-ri-months tr.is-selected td {
  background: #fff7fd;
  color: #a8269d;
  font-weight: 850;
}

.customer-portal .cp-ri-benchmark {
  display: inline-flex;
  margin-left: 7px;
  padding: 3px 6px;
  border-radius: 999px;
  background: #eef4fb;
  color: #416283;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 900;
}

.customer-portal .cp-ri-benchmark.is-success {
  background: #e8f9ef;
  color: #087543;
}

.customer-portal .cp-ri-benchmark.is-attention {
  background: #fff2e7;
  color: #b4580c;
}

.customer-portal .cp-ri-benchmark.is-info {
  background: #eaf2ff;
  color: #3168b8;
}

.customer-portal .cp-ri-month-button {
  min-height: 31px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
}

@media (max-width: 1180px) {
  .customer-portal .cp-ri-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .customer-portal .cp-ri-primary-grid,
  .customer-portal .cp-ri-secondary-grid {
    grid-template-columns: 1fr;
  }

  .customer-portal .cp-ri-insights > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .customer-portal .cp-ri-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .customer-portal .cp-ri-header-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .customer-portal .cp-ri-periods {
    justify-content: flex-start;
    overflow-x: auto;
    margin-top: 0;
    padding-bottom: 2px;
  }

  .customer-portal .cp-ri-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .customer-portal .cp-ri-status {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .customer-portal .cp-ri-status a {
    grid-column: 2;
  }

  .customer-portal .cp-ri-chart-card header {
    align-items: flex-start;
    flex-direction: column;
  }

  .customer-portal .cp-ri-legend {
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  .customer-portal .cp-ri-header h1 {
    font-size: 31px;
  }

  .customer-portal .cp-ri-header-actions,
  .customer-portal .cp-ri-button {
    width: 100%;
  }

  .customer-portal .cp-ri-kpis,
  .customer-portal .cp-ri-insights > div {
    grid-template-columns: 1fr;
  }

  .customer-portal .cp-ri-kpis article,
  .customer-portal .cp-ri-kpi-link {
    min-height: 112px;
  }

  .customer-portal .cp-ri-treatment {
    grid-template-columns: 1fr;
  }

  .customer-portal .cp-ri-treatment-ring {
    margin: 0 auto;
  }
}

/* CP Lite product detail */
.customer-portal .cp-product-lite-page {
  --product-lite-navy: #14213e;
  --product-lite-muted: #61718b;
  --product-lite-border: #dfe7f1;
  --product-lite-pink: #c42caf;
  --product-lite-soft: #fff3fd;
  display: grid;
  gap: 14px;
  color: var(--product-lite-navy);
}

.customer-portal .cp-product-lite-back {
  display: inline-flex;
  align-items: center;
  width: max-content;
  gap: 8px;
  color: var(--product-lite-navy);
  font-size: 14px;
  font-weight: 850;
}

.customer-portal .cp-product-lite-back svg {
  width: 15px;
  transform: rotate(180deg);
}

.customer-portal .cp-product-lite-hero,
.customer-portal .cp-product-lite-kpis article,
.customer-portal .cp-product-lite-card,
.customer-portal .cp-product-lite-tabs {
  border: 1px solid var(--product-lite-border);
  background: #fff;
  box-shadow: 0 7px 22px rgba(20, 33, 62, .055);
}

.customer-portal .cp-product-lite-hero {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  min-height: 158px;
  padding: 15px;
  border-radius: 15px;
}

.customer-portal .cp-product-lite-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 126px;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(145deg, #f8f1f8, #eef4f9);
  color: var(--product-lite-pink);
}

.customer-portal .cp-product-lite-image svg {
  width: 42px;
  height: 42px;
}

.customer-portal .cp-product-lite-heading > span {
  color: var(--product-lite-pink);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.customer-portal .cp-product-lite-heading h1 {
  margin: 5px 0 8px;
  color: var(--product-lite-navy);
  font-size: clamp(28px, 2.7vw, 38px);
  line-height: 1.08;
  letter-spacing: -.025em;
}

.customer-portal .cp-product-lite-heading div {
  color: #52647e;
  font-size: 14px;
}

.customer-portal .cp-product-lite-heading div strong {
  color: var(--product-lite-muted);
}

.customer-portal .cp-product-lite-heading p {
  margin: 14px 0 0;
  color: var(--product-lite-muted);
  font-size: 14px;
  line-height: 1.5;
}

.customer-portal .cp-product-lite-hero aside {
  display: grid;
  justify-items: end;
  gap: 7px;
  min-width: 180px;
  padding-right: 8px;
}

.customer-portal .cp-product-lite-hero aside > strong {
  font-size: 32px;
  line-height: 1;
  letter-spacing: -.025em;
}

.customer-portal .cp-product-lite-hero aside strong em,
.customer-portal .cp-product-lite-kpis strong em,
.customer-portal .cp-product-lite-feature strong em {
  font-size: .55em;
  font-style: normal;
}

.customer-portal .cp-product-lite-hero aside small {
  color: var(--product-lite-muted);
  font-size: 13px;
  font-weight: 700;
}

.customer-portal .cp-product-lite-status,
.customer-portal .cp-product-lite-badge,
.customer-portal .cp-product-lite-feature b {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #f1f4f8;
  color: #607087;
  font-size: 11px;
  font-weight: 900;
  font-style: normal;
  white-space: nowrap;
}

.customer-portal .cp-product-lite-status.is-success,
.customer-portal .cp-product-lite-badge.is-success,
.customer-portal .cp-product-lite-feature b.is-success {
  background: #e7f8ed;
  color: #0e7b46;
}

.customer-portal .cp-product-lite-status.is-warning,
.customer-portal .cp-product-lite-badge.is-attention,
.customer-portal .cp-product-lite-feature b.is-attention {
  background: #fff2e6;
  color: #ae5815;
}

.customer-portal .cp-product-lite-status.is-danger {
  background: #ffebee;
  color: #bd3348;
}

.customer-portal .cp-product-lite-badge.is-info,
.customer-portal .cp-product-lite-feature b.is-info {
  background: #eaf3ff;
  color: #2767b5;
}

.customer-portal .cp-product-lite-badge.is-expected,
.customer-portal .cp-product-lite-feature b.is-expected {
  background: #f5edff;
  color: #7b3db4;
}

.customer-portal .cp-product-lite-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 9px;
}

.customer-portal .cp-product-lite-kpis article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-height: 116px;
  padding: 15px;
  border-radius: 12px;
}

.customer-portal .cp-product-lite-kpis article > span,
.customer-portal .cp-product-lite-feature > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: #f5efff;
  color: #7f37bc;
}

.customer-portal .cp-product-lite-kpis article > span svg,
.customer-portal .cp-product-lite-feature > span svg {
  width: 21px;
  height: 21px;
}

.customer-portal .cp-product-lite-kpis article > span.is-green,
.customer-portal .cp-product-lite-feature > span.is-green { background: #e9f9ef; color: #0b8b54; }
.customer-portal .cp-product-lite-kpis article > span.is-orange,
.customer-portal .cp-product-lite-feature > span.is-orange { background: #fff3e7; color: #df6a14; }
.customer-portal .cp-product-lite-kpis article > span.is-blue,
.customer-portal .cp-product-lite-feature > span.is-blue { background: #eaf3ff; color: #3476dd; }
.customer-portal .cp-product-lite-kpis article > span.is-purple,
.customer-portal .cp-product-lite-feature > span.is-purple { background: #f5edff; color: #8435bd; }
.customer-portal .cp-product-lite-kpis article > span.is-pink,
.customer-portal .cp-product-lite-feature > span.is-pink { background: #fff0fb; color: var(--product-lite-pink); }

.customer-portal .cp-product-lite-kpis small {
  display: block;
  margin-bottom: 6px;
  color: #596a84;
  font-size: 11px;
  font-weight: 850;
}

.customer-portal .cp-product-lite-kpis strong {
  display: block;
  color: var(--product-lite-navy);
  font-size: 25px;
  line-height: 1.05;
}

.customer-portal .cp-product-lite-kpis p {
  margin: 8px 0 0;
  color: var(--product-lite-muted);
  font-size: 11px;
  line-height: 1.35;
}

.customer-portal .cp-product-lite-tabs {
  display: flex;
  align-items: center;
  gap: 12px;
  overflow-x: auto;
  padding: 0 18px;
  border-radius: 12px;
}

.customer-portal .cp-product-lite-tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 10px;
  border-bottom: 2px solid transparent;
  color: #52627c;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}

.customer-portal .cp-product-lite-tabs a.is-active {
  border-color: var(--product-lite-pink);
  color: var(--product-lite-pink);
}

.customer-portal .cp-product-lite-overview {
  display: grid;
  grid-template-columns: minmax(440px, .95fr) minmax(580px, 1.55fr);
  gap: 12px;
}

.customer-portal .cp-product-lite-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.customer-portal .cp-product-lite-card {
  min-width: 0;
  overflow: hidden;
  border-radius: 13px;
}

.customer-portal .cp-product-lite-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 17px 11px;
}

.customer-portal .cp-product-lite-card h2 {
  margin: 0;
  color: var(--product-lite-navy);
  font-size: 15px;
  line-height: 1.3;
}

.customer-portal .cp-product-lite-card header p,
.customer-portal .cp-product-lite-return-card > p {
  margin: 4px 0 0;
  color: var(--product-lite-muted);
  font-size: 12px;
  line-height: 1.5;
}

.customer-portal .cp-product-lite-card header a {
  color: var(--product-lite-pink);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.customer-portal .cp-product-lite-card dl {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0 17px 14px;
}

.customer-portal .cp-product-lite-card dl > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid #edf1f6;
}

.customer-portal .cp-product-lite-card dl > div:last-child {
  border-bottom: 0;
}

.customer-portal .cp-product-lite-card dl > div.is-total {
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid #dfe7f1;
}

.customer-portal .cp-product-lite-card dt,
.customer-portal .cp-product-lite-card dd {
  margin: 0;
  font-size: 12px;
}

.customer-portal .cp-product-lite-card dt {
  color: var(--product-lite-muted);
}

.customer-portal .cp-product-lite-card dd {
  color: var(--product-lite-navy);
  font-weight: 850;
  text-align: right;
}

.customer-portal .cp-product-lite-card dd small {
  display: block;
  margin-top: 3px;
  color: var(--product-lite-muted);
  font-size: 10px;
}

.customer-portal .cp-product-lite-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 17px 7px;
}

.customer-portal .cp-product-lite-feature strong {
  font-size: 25px;
}

.customer-portal .cp-product-lite-return-card > p {
  padding: 0 17px;
}

.customer-portal .cp-product-lite-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
  margin: 7px 17px 16px;
  padding: 7px 11px;
  border: 1px solid #dce5ef;
  border-radius: 8px;
  color: #3f5574;
  background: #fff;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.customer-portal .cp-product-lite-button svg {
  width: 13px;
  height: 13px;
}

.customer-portal .cp-product-lite-full-card {
  min-height: 360px;
}

.customer-portal .cp-product-lite-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.customer-portal .cp-product-lite-table-wrap table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  color: var(--product-lite-navy);
  font-size: 12px;
}

.customer-portal .cp-product-lite-table-wrap th {
  padding: 10px 13px;
  border-top: 1px solid #edf1f6;
  border-bottom: 1px solid #dfe7f1;
  background: #fbfcfe;
  color: #64748c;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .025em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.customer-portal .cp-product-lite-table-wrap td {
  padding: 11px 13px;
  border-bottom: 1px solid #e7edf4;
  vertical-align: middle;
}

.customer-portal .cp-product-lite-table-wrap tbody tr:last-child td {
  border-bottom: 0;
}

.customer-portal .cp-product-lite-table-wrap td.is-positive {
  color: #0b8a4f;
  font-weight: 900;
}

.customer-portal .cp-product-lite-table-wrap td.is-negative {
  color: #c83a45;
  font-weight: 900;
}

.customer-portal .cp-product-lite-movement-type {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 800;
  white-space: nowrap;
}

.customer-portal .cp-product-lite-movement-type svg {
  width: 17px;
  height: 17px;
  padding: 3px;
  border-radius: 50%;
  color: #63728a;
  background: #f0f3f7;
}

.customer-portal .cp-product-lite-movement-type.is-positive svg { color: #0b8a4f; background: #e8f8ee; }
.customer-portal .cp-product-lite-movement-type.is-negative svg { color: #c83a45; background: #ffebee; }
.customer-portal .cp-product-lite-movement-type.is-inbound svg { color: #7c35b4; background: #f5edff; }

.customer-portal .cp-product-lite-chips {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 0 17px 13px;
}

.customer-portal .cp-product-lite-chips a {
  padding: 6px 12px;
  border-radius: 999px;
  background: #f4f6f9;
  color: #5d6d85;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.customer-portal .cp-product-lite-chips a.is-active {
  background: #fff0fb;
  color: var(--product-lite-pink);
}

.customer-portal .cp-product-lite-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 210px;
  padding: 28px;
  color: var(--product-lite-muted);
  text-align: center;
}

.customer-portal .cp-product-lite-empty.is-compact {
  min-height: 125px;
  margin: 0 14px 14px;
  padding: 18px;
  border: 1px dashed #dfe7f1;
  border-radius: 10px;
  background: #fbfcfe;
}

.customer-portal .cp-product-lite-empty strong {
  color: var(--product-lite-navy);
  font-size: 14px;
}

.customer-portal .cp-product-lite-empty p {
  max-width: 480px;
  margin: 7px 0 0;
  font-size: 12px;
  line-height: 1.5;
}

.customer-portal .cp-product-lite-masterdata {
  max-width: 760px;
  padding-bottom: 24px !important;
}

.customer-portal .cp-product-lite-masterdata > div {
  padding: 13px 0 !important;
}

.customer-portal .cp-product-lite-note {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid #d5e4f5;
  border-radius: 10px;
  background: #f5f9fe;
  color: #526985;
  font-size: 12px;
  line-height: 1.45;
}

.customer-portal .cp-product-lite-note svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: #3476b8;
}

@media (max-width: 1250px) {
  .customer-portal .cp-product-lite-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .customer-portal .cp-product-lite-overview {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .customer-portal .cp-product-lite-hero {
    grid-template-columns: 110px minmax(0, 1fr) auto;
    gap: 16px;
  }

  .customer-portal .cp-product-lite-image {
    width: 110px;
    height: 110px;
  }

  .customer-portal .cp-product-lite-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .customer-portal .cp-product-lite-hero {
    grid-template-columns: 90px minmax(0, 1fr);
  }

  .customer-portal .cp-product-lite-image {
    width: 90px;
    height: 90px;
  }

  .customer-portal .cp-product-lite-hero aside {
    grid-column: 1 / -1;
    justify-items: start;
    min-width: 0;
    padding: 4px 0 0;
  }

  .customer-portal .cp-product-lite-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .customer-portal .cp-product-lite-summary-grid {
    grid-template-columns: 1fr;
  }

  .customer-portal .cp-product-lite-tabs {
    padding: 0 10px;
  }
}

@media (max-width: 460px) {
  .customer-portal .cp-product-lite-hero {
    grid-template-columns: 1fr;
  }

  .customer-portal .cp-product-lite-image {
    width: 100%;
    height: 132px;
  }

  .customer-portal .cp-product-lite-heading h1 {
    font-size: 27px;
  }

  .customer-portal .cp-product-lite-kpis {
    grid-template-columns: 1fr;
  }

  .customer-portal .cp-product-lite-kpis article {
    min-height: 104px;
  }
}

/* Purchase plan draft — scoped to CP/planlaegning/indkoebsplan.php. */
.customer-portal .cp-purchase-plan-page {
  --plan-ink: #101c3b;
  --plan-muted: #61708d;
  --plan-border: #dde5f0;
  --plan-soft: #f7f9fc;
  --plan-pink: var(--cp-accent);
  --plan-pink-soft: #fff4fc;
  --plan-green: #13845c;
  --plan-green-soft: #eaf8f1;
  --plan-orange: #bf6a1c;
  --plan-orange-soft: #fff5e8;
  --plan-blue: #2e6fc4;
  --plan-blue-soft: #edf5ff;
  width: min(100%, 1580px);
  margin: 0 auto;
  color: var(--plan-ink);
}

.customer-portal .cp-purchase-plan-page,
.customer-portal .cp-purchase-plan-page * {
  box-sizing: border-box;
  min-width: 0;
}

.customer-portal .cp-purchase-plan-page .cp-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 20px;
  color: var(--plan-ink);
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
}

.customer-portal .cp-purchase-plan-page .cp-back-link svg {
  width: 16px;
  height: 16px;
  transform: rotate(180deg);
}

.customer-portal .cp-purchase-plan-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 20px;
}

.customer-portal .cp-purchase-plan-heading > p {
  margin: 0 0 10px;
  color: var(--plan-pink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.customer-portal .cp-purchase-plan-heading h1 {
  margin: 0;
  color: var(--plan-ink);
  font-size: clamp(30px, 2.25vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.customer-portal .cp-purchase-plan-heading > span {
  display: block;
  margin-top: 8px;
  color: var(--plan-muted);
  font-size: 15px;
  line-height: 1.5;
}

.customer-portal .cp-purchase-plan-draft-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  width: min(100%, 370px);
  padding: 15px 18px;
  border: 1px solid var(--plan-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(20, 33, 63, 0.045);
}

.customer-portal .cp-purchase-plan-icon,
.customer-portal .cp-purchase-plan-kpi-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--plan-blue-soft);
  color: var(--plan-blue);
}

.customer-portal .cp-purchase-plan-icon svg,
.customer-portal .cp-purchase-plan-kpi-icon svg {
  width: 20px;
  height: 20px;
}

.customer-portal .cp-purchase-plan-draft-notice strong,
.customer-portal .cp-purchase-plan-draft-notice small {
  display: block;
}

.customer-portal .cp-purchase-plan-draft-notice strong {
  color: var(--plan-ink);
  font-size: 14px;
  line-height: 1.35;
}

.customer-portal .cp-purchase-plan-draft-notice small {
  margin-top: 3px;
  color: var(--plan-muted);
  font-size: 13px;
  line-height: 1.45;
}

.customer-portal .cp-purchase-plan-page > .cp-notice {
  margin: 0 0 18px;
}

.customer-portal .cp-purchase-plan-state-card,
.customer-portal .cp-purchase-plan-empty-card,
.customer-portal .cp-purchase-plan-steps-card,
.customer-portal .cp-purchase-plan-content-card {
  border: 1px solid var(--plan-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(20, 33, 63, 0.045);
}

.customer-portal .cp-purchase-plan-state-card {
  display: grid;
  justify-items: center;
  padding: clamp(48px, 7vw, 92px) 24px;
  text-align: center;
}

.customer-portal .cp-purchase-plan-state-icon {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  margin-bottom: 20px;
  border-radius: 20px;
  background: var(--plan-pink-soft);
  color: var(--plan-pink);
}

.customer-portal .cp-purchase-plan-state-icon svg {
  width: 30px;
  height: 30px;
}

.customer-portal .cp-purchase-plan-state-card h2,
.customer-portal .cp-purchase-plan-empty-card h2,
.customer-portal .cp-purchase-plan-steps-card h2,
.customer-portal .cp-purchase-plan-content-card h2 {
  margin: 0;
  color: var(--plan-ink);
}

.customer-portal .cp-purchase-plan-state-card p {
  max-width: 600px;
  margin: 10px 0 22px;
  color: var(--plan-muted);
  font-size: 15px;
  line-height: 1.55;
}

.customer-portal .cp-purchase-plan-empty-card {
  display: grid;
  grid-template-columns: minmax(230px, 0.42fr) minmax(0, 0.58fr);
  align-items: center;
  min-height: 270px;
  padding: clamp(30px, 4vw, 56px);
}

.customer-portal .cp-purchase-plan-empty-illustration {
  position: relative;
  display: grid;
  place-items: center;
  justify-self: center;
  width: 170px;
  height: 150px;
  border-radius: 38% 62% 54% 46% / 46% 38% 62% 54%;
  background: linear-gradient(145deg, #f7edff, #fff3fa);
  color: var(--plan-pink);
}

.customer-portal .cp-purchase-plan-empty-illustration > span svg {
  width: 76px;
  height: 76px;
  stroke-width: 1.4;
}

.customer-portal .cp-purchase-plan-empty-illustration > i {
  position: absolute;
  right: 21px;
  bottom: 20px;
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--plan-pink);
  color: #fff;
  font-style: normal;
}

.customer-portal .cp-purchase-plan-empty-illustration > i svg {
  width: 19px;
  height: 19px;
}

.customer-portal .cp-purchase-plan-empty-copy h2 {
  font-size: 25px;
  letter-spacing: -0.02em;
}

.customer-portal .cp-purchase-plan-empty-copy > p {
  margin: 8px 0 20px;
  color: var(--plan-muted);
  font-size: 15px;
  line-height: 1.5;
}

.customer-portal .cp-purchase-plan-empty-actions,
.customer-portal .cp-purchase-plan-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.customer-portal .cp-purchase-plan-empty-actions .cp-btn {
  min-height: 42px;
}

.customer-portal .cp-purchase-plan-empty-actions svg {
  width: 15px;
  height: 15px;
}

.customer-portal .cp-purchase-plan-empty-copy > small {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  color: var(--plan-muted);
  font-size: 13px;
  line-height: 1.45;
}

.customer-portal .cp-purchase-plan-empty-copy > small svg {
  width: 15px;
  height: 15px;
}

.customer-portal .cp-purchase-plan-steps-card,
.customer-portal .cp-purchase-plan-content-card {
  margin-top: 18px;
  padding: 22px;
}

.customer-portal .cp-purchase-plan-steps-card > h2,
.customer-portal .cp-purchase-plan-content-header h2 {
  font-size: 19px;
}

.customer-portal .cp-purchase-plan-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  margin-top: 14px;
}

.customer-portal .cp-purchase-plan-steps article {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 94px;
  padding: 17px;
  border: 1px solid var(--plan-border);
  border-radius: 14px;
  background: #fff;
}

.customer-portal .cp-purchase-plan-steps article > span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: var(--plan-pink-soft);
  color: var(--plan-pink);
}

.customer-portal .cp-purchase-plan-steps article > span svg {
  width: 22px;
  height: 22px;
}

.customer-portal .cp-purchase-plan-steps article strong,
.customer-portal .cp-purchase-plan-steps article p {
  display: block;
}

.customer-portal .cp-purchase-plan-steps article strong {
  color: var(--plan-ink);
  font-size: 14px;
}

.customer-portal .cp-purchase-plan-steps article p {
  margin: 4px 0 0;
  color: var(--plan-muted);
  font-size: 13px;
  line-height: 1.45;
}

.customer-portal .cp-purchase-plan-steps > i {
  color: #8795ad;
  font-size: 24px;
  font-style: normal;
}

.customer-portal .cp-purchase-plan-content-card {
  overflow: visible;
}

.customer-portal .cp-purchase-plan-content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.customer-portal .cp-purchase-plan-content-header p {
  margin: 5px 0 0;
  color: var(--plan-muted);
  font-size: 13px;
}

.customer-portal .cp-purchase-plan-toolbar form {
  margin: 0;
}

.customer-portal .cp-purchase-plan-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.customer-portal .cp-purchase-plan-kpis article {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 78px;
  padding: 14px 16px;
  border: 1px solid var(--plan-border);
  border-radius: 13px;
  background: linear-gradient(140deg, #fff, #fdfcff);
}

.customer-portal .cp-purchase-plan-kpis article:nth-child(3) .cp-purchase-plan-kpi-icon {
  background: var(--plan-green-soft);
  color: var(--plan-green);
}

.customer-portal .cp-purchase-plan-kpis article:nth-child(4) .cp-purchase-plan-kpi-icon {
  background: var(--plan-orange-soft);
  color: var(--plan-orange);
}

.customer-portal .cp-purchase-plan-kpis small,
.customer-portal .cp-purchase-plan-kpis strong {
  display: block;
}

.customer-portal .cp-purchase-plan-kpis small {
  color: var(--plan-muted);
  font-size: 12px;
  line-height: 1.35;
}

.customer-portal .cp-purchase-plan-kpis strong {
  margin-top: 3px;
  color: var(--plan-ink);
  font-size: 19px;
  line-height: 1.15;
}

.customer-portal .cp-purchase-plan-kpis strong em {
  font-size: 13px;
  font-style: normal;
}

.customer-portal .cp-purchase-plan-table-wrap {
  margin-top: 16px;
  overflow-x: auto;
  border: 1px solid var(--plan-border);
  border-radius: 13px;
}

.customer-portal .cp-purchase-plan-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--plan-ink);
  font-size: 13px;
}

.customer-portal .cp-purchase-plan-table th,
.customer-portal .cp-purchase-plan-table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--plan-border);
  text-align: left;
  vertical-align: middle;
}

.customer-portal .cp-purchase-plan-table th {
  background: #f8fafc;
  color: #53627e;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  white-space: nowrap;
}

.customer-portal .cp-purchase-plan-table tbody tr:last-child td {
  border-bottom: 0;
}

.customer-portal .cp-purchase-plan-supplier-row td {
  padding: 9px 14px;
  background: #fbf8fc;
  color: #55637d;
  font-size: 12px;
}

.customer-portal .cp-purchase-plan-supplier-row svg {
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
}

.customer-portal .cp-purchase-plan-product {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--plan-ink);
  text-decoration: none;
}

.customer-portal .cp-purchase-plan-product > span:first-child {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--plan-pink-soft);
  color: var(--plan-pink);
}

.customer-portal .cp-purchase-plan-product > span:first-child svg {
  width: 18px;
  height: 18px;
}

.customer-portal .cp-purchase-plan-product strong,
.customer-portal .cp-purchase-plan-product small {
  display: block;
}

.customer-portal .cp-purchase-plan-product strong {
  font-size: 13px;
  line-height: 1.3;
}

.customer-portal .cp-purchase-plan-product small {
  margin-top: 3px;
  color: var(--plan-muted);
  font-size: 11px;
}

.customer-portal .cp-purchase-plan-missing {
  color: var(--plan-orange);
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}

.customer-portal .cp-purchase-plan-qty {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--plan-border);
  border-radius: 9px;
  background: #fff;
}

.customer-portal .cp-purchase-plan-qty:focus-within {
  border-color: var(--plan-pink);
  box-shadow: 0 0 0 3px rgba(197, 42, 176, 0.1);
}

.customer-portal .cp-purchase-plan-qty input {
  width: 84px;
  min-height: 36px;
  padding: 7px 9px;
  border: 0;
  background: transparent;
  color: var(--plan-ink);
  font: inherit;
  font-weight: 750;
  outline: none;
}

.customer-portal .cp-purchase-plan-qty > span:last-child {
  padding: 0 9px;
  color: var(--plan-muted);
  font-size: 11px;
}

.customer-portal .cp-purchase-plan-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #edf1f6;
  color: #5f6a7d;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.customer-portal .cp-purchase-plan-status.is-ready {
  background: var(--plan-green-soft);
  color: var(--plan-green);
}

.customer-portal .cp-purchase-plan-status.is-adjusted {
  background: var(--plan-blue-soft);
  color: var(--plan-blue);
}

.customer-portal .cp-purchase-plan-status.is-requires-data,
.customer-portal .cp-purchase-plan-status.is-cannot-calculate {
  background: var(--plan-orange-soft);
  color: var(--plan-orange);
}

.customer-portal .cp-purchase-plan-status.is-inbound-covered {
  background: #f4edff;
  color: #7850b8;
}

.customer-portal .cp-purchase-plan-status-text {
  display: block;
  max-width: 190px;
  margin-top: 5px;
  color: var(--plan-muted);
  font-size: 11px;
  line-height: 1.35;
}

.customer-portal .cp-purchase-plan-actions {
  position: relative;
}

.customer-portal .cp-purchase-plan-actions summary {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--plan-border);
  border-radius: 9px;
  background: #fff;
  color: var(--plan-ink);
  cursor: pointer;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  list-style: none;
}

.customer-portal .cp-purchase-plan-actions summary::-webkit-details-marker {
  display: none;
}

.customer-portal .cp-purchase-plan-actions[open] summary {
  border-color: var(--plan-pink);
}

.customer-portal .cp-purchase-plan-actions > div {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  width: 220px;
  padding: 7px;
  border: 1px solid var(--plan-border);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(19, 31, 57, 0.16);
}

.customer-portal .cp-purchase-plan-actions a,
.customer-portal .cp-purchase-plan-actions button {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--plan-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.customer-portal .cp-purchase-plan-actions a:hover,
.customer-portal .cp-purchase-plan-actions button:hover {
  background: var(--plan-soft);
}

.customer-portal .cp-purchase-plan-actions button {
  color: #b94758;
}

.customer-portal .cp-purchase-plan-empty-row td {
  height: 96px;
  color: var(--plan-muted);
  font-size: 14px;
  text-align: center;
}

.customer-portal .cp-purchase-plan-empty-row span {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--plan-soft);
  color: var(--plan-muted);
  vertical-align: middle;
}

.customer-portal .cp-purchase-plan-empty-row svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 1180px) {
  .customer-portal .cp-purchase-plan-steps {
    gap: 12px;
  }

  .customer-portal .cp-purchase-plan-steps article {
    padding: 14px;
  }

  .customer-portal .cp-purchase-plan-table {
    min-width: 1050px;
  }
}

@media (max-width: 900px) {
  .customer-portal .cp-purchase-plan-header {
    align-items: flex-start;
  }

  .customer-portal .cp-purchase-plan-empty-card {
    grid-template-columns: minmax(150px, 0.35fr) minmax(0, 0.65fr);
    padding: 30px;
  }

  .customer-portal .cp-purchase-plan-empty-illustration {
    width: 140px;
    height: 128px;
  }

  .customer-portal .cp-purchase-plan-steps {
    grid-template-columns: 1fr;
  }

  .customer-portal .cp-purchase-plan-steps > i {
    display: none;
  }

  .customer-portal .cp-purchase-plan-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .customer-portal .cp-purchase-plan-content-header {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .customer-portal .cp-purchase-plan-header {
    flex-direction: column;
  }

  .customer-portal .cp-purchase-plan-draft-notice {
    width: 100%;
  }

  .customer-portal .cp-purchase-plan-empty-card {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
  }

  .customer-portal .cp-purchase-plan-empty-illustration {
    width: 126px;
    height: 112px;
  }

  .customer-portal .cp-purchase-plan-empty-illustration > span svg {
    width: 56px;
    height: 56px;
  }

  .customer-portal .cp-purchase-plan-empty-actions {
    justify-content: center;
  }

  .customer-portal .cp-purchase-plan-empty-copy > small {
    justify-content: center;
  }

  .customer-portal .cp-purchase-plan-steps-card,
  .customer-portal .cp-purchase-plan-content-card {
    padding: 16px;
  }

  .customer-portal .cp-purchase-plan-kpis {
    grid-template-columns: 1fr;
  }

  .customer-portal .cp-purchase-plan-toolbar {
    display: grid;
    width: 100%;
  }

  .customer-portal .cp-purchase-plan-toolbar .cp-btn,
  .customer-portal .cp-purchase-plan-toolbar form,
  .customer-portal .cp-purchase-plan-toolbar form .cp-btn {
    width: 100%;
  }

  .customer-portal .cp-purchase-plan-table-wrap {
    overflow: visible;
    border: 0;
  }

  .customer-portal .cp-purchase-plan-table {
    display: block;
    min-width: 0;
  }

  .customer-portal .cp-purchase-plan-table thead {
    display: none;
  }

  .customer-portal .cp-purchase-plan-table tbody,
  .customer-portal .cp-purchase-plan-table tr,
  .customer-portal .cp-purchase-plan-table td {
    display: block;
    width: 100%;
  }

  .customer-portal .cp-purchase-plan-table tr:not(.cp-purchase-plan-supplier-row):not(.cp-purchase-plan-empty-row) {
    margin: 10px 0;
    overflow: visible;
    border: 1px solid var(--plan-border);
    border-radius: 13px;
    background: #fff;
  }

  .customer-portal .cp-purchase-plan-table tr:not(.cp-purchase-plan-supplier-row):not(.cp-purchase-plan-empty-row) td {
    display: grid;
    grid-template-columns: minmax(110px, 0.42fr) minmax(0, 0.58fr);
    gap: 12px;
    padding: 11px 13px;
    border-bottom: 1px solid var(--plan-border);
    text-align: right;
  }

  .customer-portal .cp-purchase-plan-table tr:not(.cp-purchase-plan-supplier-row):not(.cp-purchase-plan-empty-row) td::before {
    content: attr(data-label);
    color: var(--plan-muted);
    font-size: 11px;
    font-weight: 800;
    text-align: left;
    text-transform: uppercase;
  }

  .customer-portal .cp-purchase-plan-table tr:not(.cp-purchase-plan-supplier-row):not(.cp-purchase-plan-empty-row) td:last-child {
    border-bottom: 0;
  }

  .customer-portal .cp-purchase-plan-product {
    justify-content: flex-end;
    text-align: left;
  }

  .customer-portal .cp-purchase-plan-status-text {
    margin-left: auto;
  }

  .customer-portal .cp-purchase-plan-actions {
    justify-self: end;
  }

  .customer-portal .cp-purchase-plan-actions > div {
    position: fixed;
    right: 18px;
    bottom: 18px;
    top: auto;
    width: min(280px, calc(100vw - 36px));
  }

  .customer-portal .cp-purchase-plan-supplier-row td {
    margin-top: 18px;
    border: 0;
    border-radius: 10px;
  }

  .customer-portal .cp-purchase-plan-empty-row td {
    display: block;
    padding: 34px 18px;
  }
}