/* ============================================================
   Shared surfaces for the pages built on the control API:
   Campaigns (pc-), Automations (pa-), Segments (ps-),
   Inbound (pi-), Sending domains (pd-).

   These five each carried their own hardcoded greys — transparent
   panels outlined in rgba(127,137,158,.2) — while the rest of the
   product draws white cards on the page wash using the design
   system in platform-dashboard.css. Against Contacts or Overview
   they read as unfinished rather than as a quieter style.

   Everything below is expressed in the --sd-* tokens, so these
   pages now follow the product instead of drifting from it, and
   there is one place to change a surface rather than five.
   ============================================================ */

/* ------------------------------- page ------------------------------- */

.pc-page, .pa-page, .ps-page, .pi-page, .pd-page, .pk-page, .pc-page, .pa-page, .ps-page, .pi-page, .pm-page, .pk-page, .pc-page, .pa-page, .ps-page, .pi-page, .pw-page, .pk-page, .pc-page, .pa-page, .ps-page, .pi-page, .pm-page, .pk-page, .pc-page, .pa-page, .ps-page, .pi-page, .pl-page, .pk-page, .pc-page, .pa-page, .ps-page, .pi-page, .pm-page, .pk-page, .pc-page, .pa-page, .ps-page, .pi-page, .pw-page, .pk-page, .pc-page, .pa-page, .ps-page, .pi-page, .pm-page, .pk-page {
  width: 100%;
  max-width: min(1500px, 100%);
  margin: 0 auto;
  min-width: 0;
  padding: 2px 0 60px;
  color: var(--sd-ink);
}

/* -------------------------------- head ------------------------------- */

/* The prebuilt bundle styles the bare element `header` for its own top bar —
   sticky, fixed height, blurred background, border. That rule catches every
   <header> inside the app, including these page heads, so a head taller than
   its fixed height spilled over the cards below it. Undo it here rather than
   avoid the element: <header> is the right tag for a page heading. */
.pc-head, .pa-head, .ps-head, .pi-head, .pd-head, .pk-head, .pc-head, .pa-head, .ps-head, .pi-head, .pm-head, .pk-head, .pc-head, .pa-head, .ps-head, .pi-head, .pw-head, .pk-head, .pc-head, .pa-head, .ps-head, .pi-head, .pm-head, .pk-head, .pc-head, .pa-head, .ps-head, .pi-head, .pl-head, .pk-head, .pc-head, .pa-head, .ps-head, .pi-head, .pm-head, .pk-head, .pc-head, .pa-head, .ps-head, .pi-head, .pw-head, .pk-head, .pc-head, .pa-head, .ps-head, .pi-head, .pm-head, .pk-head {
  position: static;
  height: auto;
  min-height: 0;
  background: none;
  backdrop-filter: none;
  border-bottom: 0;
  z-index: auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
/* The small line above the title is the section kicker the rest of the
   product uses — AUDIENCE, MARKETING. It is a label, not fine print. */
.pc-head small, .pa-head small, .ps-head small, .pi-head small, .pd-head small, .pk-head small, .pc-head small, .pa-head small, .ps-head small, .pi-head small, .pm-head small, .pk-head small, .pc-head small, .pa-head small, .ps-head small, .pi-head small, .pw-head small, .pk-head small, .pc-head small, .pa-head small, .ps-head small, .pi-head small, .pm-head small, .pk-head small, .pc-head small, .pa-head small, .ps-head small, .pi-head small, .pl-head small, .pk-head small, .pc-head small, .pa-head small, .ps-head small, .pi-head small, .pm-head small, .pk-head small, .pc-head small, .pa-head small, .ps-head small, .pi-head small, .pw-head small, .pk-head small, .pc-head small, .pa-head small, .ps-head small, .pi-head small, .pm-head small, .pk-head small {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sd-blue-ink);
}
.pc-head h1, .pa-head h1, .ps-head h1, .pi-head h1, .pd-head h1,
.pc-head h2, .pa-head h2, .ps-head h2, .pi-head h2, .pd-head h2, .pc-head h2, .pa-head h2, .ps-head h2, .pi-head h2, .pm-head h2, .pc-head h2, .pa-head h2, .ps-head h2, .pi-head h2, .pw-head h2, .pc-head h2, .pa-head h2, .ps-head h2, .pi-head h2, .pm-head h2, .pc-head h2, .pa-head h2, .ps-head h2, .pi-head h2, .pl-head h2, .pc-head h2, .pa-head h2, .ps-head h2, .pi-head h2, .pm-head h2, .pc-head h2, .pa-head h2, .ps-head h2, .pi-head h2, .pw-head h2, .pc-head h2, .pa-head h2, .ps-head h2, .pi-head h2, .pm-head h2 {
  margin: 6px 0 5px;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--sd-ink);
}
.pc-head p, .pa-head p, .ps-head p, .pi-head p, .pd-head p, .pk-head p, .pc-head p, .pa-head p, .ps-head p, .pi-head p, .pm-head p, .pk-head p, .pc-head p, .pa-head p, .ps-head p, .pi-head p, .pw-head p, .pk-head p, .pc-head p, .pa-head p, .ps-head p, .pi-head p, .pm-head p, .pk-head p, .pc-head p, .pa-head p, .ps-head p, .pi-head p, .pl-head p, .pk-head p, .pc-head p, .pa-head p, .ps-head p, .pi-head p, .pm-head p, .pk-head p, .pc-head p, .pa-head p, .ps-head p, .pi-head p, .pw-head p, .pk-head p, .pc-head p, .pa-head p, .ps-head p, .pi-head p, .pm-head p, .pk-head p {
  margin: 0;
  color: var(--sd-mut);
  font-size: 14px;
  line-height: 1.55;
  max-width: 74ch;
}
.pc-head > div:first-child, .pa-head > div:first-child, .ps-head > div:first-child,
.pi-head > div:first-child, .pd-head > div:first-child, .pk-head > div:first-child, .pi-head > div:first-child, .pm-head > div:first-child, .pk-head > div:first-child, .pi-head > div:first-child, .pw-head > div:first-child, .pk-head > div:first-child, .pi-head > div:first-child, .pm-head > div:first-child, .pk-head > div:first-child, .pi-head > div:first-child, .pl-head > div:first-child, .pk-head > div:first-child, .pi-head > div:first-child, .pm-head > div:first-child, .pk-head > div:first-child, .pi-head > div:first-child, .pw-head > div:first-child, .pk-head > div:first-child, .pi-head > div:first-child, .pm-head > div:first-child, .pk-head > div:first-child {
  flex: 1 1 420px;
  min-width: 0;
}
.pc-head-actions, .pa-head-actions, .ps-head-actions, .pi-head-actions, .pd-head-actions, .pc-head-actions, .pa-head-actions, .ps-head-actions, .pi-head-actions, .pm-head-actions, .pc-head-actions, .pa-head-actions, .ps-head-actions, .pi-head-actions, .pw-head-actions, .pc-head-actions, .pa-head-actions, .ps-head-actions, .pi-head-actions, .pm-head-actions, .pc-head-actions, .pa-head-actions, .ps-head-actions, .pi-head-actions, .pl-head-actions, .pc-head-actions, .pa-head-actions, .ps-head-actions, .pi-head-actions, .pm-head-actions, .pc-head-actions, .pa-head-actions, .ps-head-actions, .pi-head-actions, .pw-head-actions, .pc-head-actions, .pa-head-actions, .ps-head-actions, .pi-head-actions, .pm-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ------------------------------- buttons ----------------------------- */

.pc-btn, .pa-btn, .ps-btn, .pi-btn, .pd-btn, .pk-btn, .pd-copy, .pc-btn, .pa-btn, .ps-btn, .pi-btn, .pm-btn, .pk-btn, .pd-copy, .pc-btn, .pa-btn, .ps-btn, .pi-btn, .pw-btn, .pk-btn, .pd-copy, .pc-btn, .pa-btn, .ps-btn, .pi-btn, .pm-btn, .pk-btn, .pd-copy, .pc-btn, .pa-btn, .ps-btn, .pi-btn, .pl-btn, .pk-btn, .pd-copy, .pc-btn, .pa-btn, .ps-btn, .pi-btn, .pm-btn, .pk-btn, .pd-copy, .pc-btn, .pa-btn, .ps-btn, .pi-btn, .pw-btn, .pk-btn, .pd-copy, .pc-btn, .pa-btn, .ps-btn, .pi-btn, .pm-btn, .pk-btn, .pd-copy {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  border: 1px solid var(--sd-line);
  background:var(--paper,#fff);
  color: var(--sd-ink);
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: box-shadow .16s ease, transform .16s ease, background .16s ease, border-color .16s ease;
}
.pc-btn:hover, .pa-btn:hover, .ps-btn:hover, .pi-btn:hover, .pd-btn:hover, .pk-btn:hover, .pd-copy:hover, .pc-btn:hover, .pa-btn:hover, .ps-btn:hover, .pi-btn:hover, .pm-btn:hover, .pk-btn:hover, .pd-copy:hover, .pc-btn:hover, .pa-btn:hover, .ps-btn:hover, .pi-btn:hover, .pw-btn:hover, .pk-btn:hover, .pd-copy:hover, .pc-btn:hover, .pa-btn:hover, .ps-btn:hover, .pi-btn:hover, .pm-btn:hover, .pk-btn:hover, .pd-copy:hover, .pc-btn:hover, .pa-btn:hover, .ps-btn:hover, .pi-btn:hover, .pl-btn:hover, .pk-btn:hover, .pd-copy:hover, .pc-btn:hover, .pa-btn:hover, .ps-btn:hover, .pi-btn:hover, .pm-btn:hover, .pk-btn:hover, .pd-copy:hover, .pc-btn:hover, .pa-btn:hover, .ps-btn:hover, .pi-btn:hover, .pw-btn:hover, .pk-btn:hover, .pd-copy:hover, .pc-btn:hover, .pa-btn:hover, .ps-btn:hover, .pi-btn:hover, .pm-btn:hover, .pk-btn:hover, .pd-copy:hover {
  border-color: #c9d6ea;
  box-shadow: var(--sd-shadow-sm);
  transform: translateY(-1px);
}
.pc-btn:active, .pa-btn:active, .ps-btn:active, .pi-btn:active, .pd-btn:active, .pc-btn:active, .pa-btn:active, .ps-btn:active, .pi-btn:active, .pm-btn:active, .pc-btn:active, .pa-btn:active, .ps-btn:active, .pi-btn:active, .pw-btn:active, .pc-btn:active, .pa-btn:active, .ps-btn:active, .pi-btn:active, .pm-btn:active, .pc-btn:active, .pa-btn:active, .ps-btn:active, .pi-btn:active, .pl-btn:active, .pc-btn:active, .pa-btn:active, .ps-btn:active, .pi-btn:active, .pm-btn:active, .pc-btn:active, .pa-btn:active, .ps-btn:active, .pi-btn:active, .pw-btn:active, .pc-btn:active, .pa-btn:active, .ps-btn:active, .pi-btn:active, .pm-btn:active { transform: translateY(0); }
.pc-btn.primary, .pa-btn.primary, .ps-btn.primary, .pi-btn.primary, .pd-btn.primary, .pk-btn.primary, .pc-btn.primary, .pa-btn.primary, .ps-btn.primary, .pi-btn.primary, .pm-btn.primary, .pk-btn.primary, .pc-btn.primary, .pa-btn.primary, .ps-btn.primary, .pi-btn.primary, .pw-btn.primary, .pk-btn.primary, .pc-btn.primary, .pa-btn.primary, .ps-btn.primary, .pi-btn.primary, .pm-btn.primary, .pk-btn.primary, .pc-btn.primary, .pa-btn.primary, .ps-btn.primary, .pi-btn.primary, .pl-btn.primary, .pk-btn.primary, .pc-btn.primary, .pa-btn.primary, .ps-btn.primary, .pi-btn.primary, .pm-btn.primary, .pk-btn.primary, .pc-btn.primary, .pa-btn.primary, .ps-btn.primary, .pi-btn.primary, .pw-btn.primary, .pk-btn.primary, .pc-btn.primary, .pa-btn.primary, .ps-btn.primary, .pi-btn.primary, .pm-btn.primary, .pk-btn.primary {
  background: linear-gradient(180deg, #4a8bf7, var(--sd-blue));
  border-color: var(--sd-blue-ink);
  color: #fff;
  box-shadow: 0 6px 16px rgba(54, 126, 245, .28);
}
.pc-btn.primary:hover, .pa-btn.primary:hover, .ps-btn.primary:hover,
.pi-btn.primary:hover, .pd-btn.primary:hover, .pi-btn.primary:hover, .pm-btn.primary:hover, .pi-btn.primary:hover, .pw-btn.primary:hover, .pi-btn.primary:hover, .pm-btn.primary:hover, .pi-btn.primary:hover, .pl-btn.primary:hover, .pi-btn.primary:hover, .pm-btn.primary:hover, .pi-btn.primary:hover, .pw-btn.primary:hover, .pi-btn.primary:hover, .pm-btn.primary:hover {
  background: linear-gradient(180deg, #5895f8, #2f74ea);
}
.pc-btn.danger, .pa-btn.danger, .ps-btn.danger, .pi-btn.danger, .pd-btn.danger, .pk-btn.danger, .pc-btn.danger, .pa-btn.danger, .ps-btn.danger, .pi-btn.danger, .pm-btn.danger, .pk-btn.danger, .pc-btn.danger, .pa-btn.danger, .ps-btn.danger, .pi-btn.danger, .pw-btn.danger, .pk-btn.danger, .pc-btn.danger, .pa-btn.danger, .ps-btn.danger, .pi-btn.danger, .pm-btn.danger, .pk-btn.danger, .pc-btn.danger, .pa-btn.danger, .ps-btn.danger, .pi-btn.danger, .pl-btn.danger, .pk-btn.danger, .pc-btn.danger, .pa-btn.danger, .ps-btn.danger, .pi-btn.danger, .pm-btn.danger, .pk-btn.danger, .pc-btn.danger, .pa-btn.danger, .ps-btn.danger, .pi-btn.danger, .pw-btn.danger, .pk-btn.danger, .pc-btn.danger, .pa-btn.danger, .ps-btn.danger, .pi-btn.danger, .pm-btn.danger, .pk-btn.danger {
  color: #b32020;
  border-color: #f0c9c9;
}
.pc-btn.danger:hover, .pa-btn.danger:hover, .ps-btn.danger:hover,
.pi-btn.danger:hover, .pd-btn.danger:hover, .pi-btn.danger:hover, .pm-btn.danger:hover, .pi-btn.danger:hover, .pw-btn.danger:hover, .pi-btn.danger:hover, .pm-btn.danger:hover, .pi-btn.danger:hover, .pl-btn.danger:hover, .pi-btn.danger:hover, .pm-btn.danger:hover, .pi-btn.danger:hover, .pw-btn.danger:hover, .pi-btn.danger:hover, .pm-btn.danger:hover {
  background: rgba(220, 38, 38, .05);
  border-color: #e4a9a9;
}
.pc-btn.sm, .pa-btn.sm, .ps-btn.sm, .pi-btn.sm, .pd-btn.sm, .pk-btn.sm, .pd-copy, .pc-btn.sm, .pa-btn.sm, .ps-btn.sm, .pi-btn.sm, .pm-btn.sm, .pk-btn.sm, .pd-copy, .pc-btn.sm, .pa-btn.sm, .ps-btn.sm, .pi-btn.sm, .pw-btn.sm, .pk-btn.sm, .pd-copy, .pc-btn.sm, .pa-btn.sm, .ps-btn.sm, .pi-btn.sm, .pm-btn.sm, .pk-btn.sm, .pd-copy, .pc-btn.sm, .pa-btn.sm, .ps-btn.sm, .pi-btn.sm, .pl-btn.sm, .pk-btn.sm, .pd-copy, .pc-btn.sm, .pa-btn.sm, .ps-btn.sm, .pi-btn.sm, .pm-btn.sm, .pk-btn.sm, .pd-copy, .pc-btn.sm, .pa-btn.sm, .ps-btn.sm, .pi-btn.sm, .pw-btn.sm, .pk-btn.sm, .pd-copy, .pc-btn.sm, .pa-btn.sm, .ps-btn.sm, .pi-btn.sm, .pm-btn.sm, .pk-btn.sm, .pd-copy {
  padding: 6px 11px;
  font-size: 12.5px;
  border-radius: 8px;
}
.pc-btn[disabled], .pa-btn[disabled], .ps-btn[disabled],
.pi-btn[disabled], .pd-btn[disabled], .pi-btn[disabled], .pm-btn[disabled], .pi-btn[disabled], .pw-btn[disabled], .pi-btn[disabled], .pm-btn[disabled], .pi-btn[disabled], .pl-btn[disabled], .pi-btn[disabled], .pm-btn[disabled], .pi-btn[disabled], .pw-btn[disabled], .pi-btn[disabled], .pm-btn[disabled] {
  opacity: .55;
  cursor: default;
  box-shadow: none;
  transform: none;
}

/* ------------------------------- figures ----------------------------- */

.pc-stats, .pa-stats, .ps-stats, .pi-stats, .pd-stats, .pk-stats, .pc-stats, .pa-stats, .ps-stats, .pi-stats, .pm-stats, .pk-stats, .pc-stats, .pa-stats, .ps-stats, .pi-stats, .pw-stats, .pk-stats, .pc-stats, .pa-stats, .ps-stats, .pi-stats, .pm-stats, .pk-stats, .pc-stats, .pa-stats, .ps-stats, .pi-stats, .pl-stats, .pk-stats, .pc-stats, .pa-stats, .ps-stats, .pi-stats, .pm-stats, .pk-stats, .pc-stats, .pa-stats, .ps-stats, .pi-stats, .pw-stats, .pk-stats, .pc-stats, .pa-stats, .ps-stats, .pi-stats, .pm-stats, .pk-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}
.pc-stat, .pa-stat, .ps-stat, .pi-stat, .pd-stats > div, .pk-stats > div, .pc-stat, .pa-stat, .ps-stat, .pi-stat, .pm-stats > div, .pk-stats > div, .pc-stat, .pa-stat, .ps-stat, .pi-stat, .pw-stats > div, .pk-stats > div, .pc-stat, .pa-stat, .ps-stat, .pi-stat, .pm-stats > div, .pk-stats > div, .pc-stat, .pa-stat, .ps-stat, .pi-stat, .pl-stats > div, .pk-stats > div, .pc-stat, .pa-stat, .ps-stat, .pi-stat, .pm-stats > div, .pk-stats > div, .pc-stat, .pa-stat, .ps-stat, .pi-stat, .pw-stats > div, .pk-stats > div, .pc-stat, .pa-stat, .ps-stat, .pi-stat, .pm-stats > div, .pk-stats > div {
  background: var(--sd-card);
  border: 1px solid var(--sd-line);
  border-radius: 16px;
  box-shadow: var(--sd-shadow-sm);
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.pc-stat span, .pa-stat span, .ps-stat span, .pi-stat span, .pd-stats > div span, .pk-stats > div span, .pc-stat span, .pa-stat span, .ps-stat span, .pi-stat span, .pm-stats > div span, .pk-stats > div span, .pc-stat span, .pa-stat span, .ps-stat span, .pi-stat span, .pw-stats > div span, .pk-stats > div span, .pc-stat span, .pa-stat span, .ps-stat span, .pi-stat span, .pm-stats > div span, .pk-stats > div span, .pc-stat span, .pa-stat span, .ps-stat span, .pi-stat span, .pl-stats > div span, .pk-stats > div span, .pc-stat span, .pa-stat span, .ps-stat span, .pi-stat span, .pm-stats > div span, .pk-stats > div span, .pc-stat span, .pa-stat span, .ps-stat span, .pi-stat span, .pw-stats > div span, .pk-stats > div span, .pc-stat span, .pa-stat span, .ps-stat span, .pi-stat span, .pm-stats > div span, .pk-stats > div span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--sd-mut);
}
.pc-stat b, .pa-stat b, .ps-stat b, .pi-stat b, .pd-stats > div b, .pk-stats > div b, .pc-stat b, .pa-stat b, .ps-stat b, .pi-stat b, .pm-stats > div b, .pk-stats > div b, .pc-stat b, .pa-stat b, .ps-stat b, .pi-stat b, .pw-stats > div b, .pk-stats > div b, .pc-stat b, .pa-stat b, .ps-stat b, .pi-stat b, .pm-stats > div b, .pk-stats > div b, .pc-stat b, .pa-stat b, .ps-stat b, .pi-stat b, .pl-stats > div b, .pk-stats > div b, .pc-stat b, .pa-stat b, .ps-stat b, .pi-stat b, .pm-stats > div b, .pk-stats > div b, .pc-stat b, .pa-stat b, .ps-stat b, .pi-stat b, .pw-stats > div b, .pk-stats > div b, .pc-stat b, .pa-stat b, .ps-stat b, .pi-stat b, .pm-stats > div b, .pk-stats > div b {
  font-size: clamp(20px, 2vw, 27px);
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

/* -------------------------- panels and tables ------------------------ */

.pc-table-wrap, .pa-table-wrap, .ps-table-wrap, .pi-table-wrap, .pd-recwrap, .pk-table-wrap, .pc-table-wrap, .pa-table-wrap, .ps-table-wrap, .pi-table-wrap, .pm-table-wrap, .pk-table-wrap, .pc-table-wrap, .pa-table-wrap, .ps-table-wrap, .pi-table-wrap, .pw-table-wrap, .pk-table-wrap, .pc-table-wrap, .pa-table-wrap, .ps-table-wrap, .pi-table-wrap, .pm-table-wrap, .pk-table-wrap, .pc-table-wrap, .pa-table-wrap, .ps-table-wrap, .pi-table-wrap, .pl-table-wrap, .pk-table-wrap, .pc-table-wrap, .pa-table-wrap, .ps-table-wrap, .pi-table-wrap, .pm-table-wrap, .pk-table-wrap, .pc-table-wrap, .pa-table-wrap, .ps-table-wrap, .pi-table-wrap, .pw-table-wrap, .pk-table-wrap, .pc-table-wrap, .pa-table-wrap, .ps-table-wrap, .pi-table-wrap, .pm-table-wrap, .pk-table-wrap {
  background: var(--sd-card);
  border: 1px solid var(--sd-line);
  border-radius: 18px;
  box-shadow: var(--sd-shadow-sm);
  overflow-x: auto;
}
.pc-table, .pa-table, .ps-table, .pi-table, .pd-records, .pk-table, .pc-table, .pa-table, .ps-table, .pi-table, .pm-table, .pk-table, .pc-table, .pa-table, .ps-table, .pi-table, .pw-table, .pk-table, .pc-table, .pa-table, .ps-table, .pi-table, .pm-table, .pk-table, .pc-table, .pa-table, .ps-table, .pi-table, .pl-table, .pk-table, .pc-table, .pa-table, .ps-table, .pi-table, .pm-table, .pk-table, .pc-table, .pa-table, .ps-table, .pi-table, .pw-table, .pk-table, .pc-table, .pa-table, .ps-table, .pi-table, .pm-table, .pk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.pc-table th, .pa-table th, .ps-table th, .pi-table th, .pd-records th, .pk-table th, .pc-table th, .pa-table th, .ps-table th, .pi-table th, .pm-table th, .pk-table th, .pc-table th, .pa-table th, .ps-table th, .pi-table th, .pw-table th, .pk-table th, .pc-table th, .pa-table th, .ps-table th, .pi-table th, .pm-table th, .pk-table th, .pc-table th, .pa-table th, .ps-table th, .pi-table th, .pl-table th, .pk-table th, .pc-table th, .pa-table th, .ps-table th, .pi-table th, .pm-table th, .pk-table th, .pc-table th, .pa-table th, .ps-table th, .pi-table th, .pw-table th, .pk-table th, .pc-table th, .pa-table th, .ps-table th, .pi-table th, .pm-table th, .pk-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color:var(--muted,#8b99ad);
  padding: 12px 16px;
  border-bottom: 1px solid var(--sd-line);
}
.pc-table td, .pa-table td, .ps-table td, .pi-table td, .pd-records td, .pk-table td, .pc-table td, .pa-table td, .ps-table td, .pi-table td, .pm-table td, .pk-table td, .pc-table td, .pa-table td, .ps-table td, .pi-table td, .pw-table td, .pk-table td, .pc-table td, .pa-table td, .ps-table td, .pi-table td, .pm-table td, .pk-table td, .pc-table td, .pa-table td, .ps-table td, .pi-table td, .pl-table td, .pk-table td, .pc-table td, .pa-table td, .ps-table td, .pi-table td, .pm-table td, .pk-table td, .pc-table td, .pa-table td, .ps-table td, .pi-table td, .pw-table td, .pk-table td, .pc-table td, .pa-table td, .ps-table td, .pi-table td, .pm-table td, .pk-table td {
  padding: 13px 16px;
  border-bottom: 1px solid #eef2f8;
  vertical-align: middle;
}
.pc-table tbody tr:hover, .pa-table tbody tr:hover, .ps-table tbody tr:hover,
.pi-table tbody tr:hover, .pd-records tbody tr:hover, .pk-table tbody tr:hover, .pi-table tbody tr:hover, .pm-table tbody tr:hover, .pk-table tbody tr:hover, .pi-table tbody tr:hover, .pw-table tbody tr:hover, .pk-table tbody tr:hover, .pi-table tbody tr:hover, .pm-table tbody tr:hover, .pk-table tbody tr:hover, .pi-table tbody tr:hover, .pl-table tbody tr:hover, .pk-table tbody tr:hover, .pi-table tbody tr:hover, .pm-table tbody tr:hover, .pk-table tbody tr:hover, .pi-table tbody tr:hover, .pw-table tbody tr:hover, .pk-table tbody tr:hover, .pi-table tbody tr:hover, .pm-table tbody tr:hover, .pk-table tbody tr:hover { background:var(--sd-sunk,#f7faff); }
.pc-table tr:last-child td, .pa-table tr:last-child td, .ps-table tr:last-child td,
.pi-table tr:last-child td, .pd-records tr:last-child td, .pk-table tr:last-child td, .pi-table tr:last-child td, .pm-table tr:last-child td, .pk-table tr:last-child td, .pi-table tr:last-child td, .pw-table tr:last-child td, .pk-table tr:last-child td, .pi-table tr:last-child td, .pm-table tr:last-child td, .pk-table tr:last-child td, .pi-table tr:last-child td, .pl-table tr:last-child td, .pk-table tr:last-child td, .pi-table tr:last-child td, .pm-table tr:last-child td, .pk-table tr:last-child td, .pi-table tr:last-child td, .pw-table tr:last-child td, .pk-table tr:last-child td, .pi-table tr:last-child td, .pm-table tr:last-child td, .pk-table tr:last-child td { border-bottom: 0; }
.pc-table td small, .pa-table td small, .ps-table td small,
.pi-table td small, .pd-records td small, .pk-table td small, .pi-table td small, .pm-table td small, .pk-table td small, .pi-table td small, .pw-table td small, .pk-table td small, .pi-table td small, .pm-table td small, .pk-table td small, .pi-table td small, .pl-table td small, .pk-table td small, .pi-table td small, .pm-table td small, .pk-table td small, .pi-table td small, .pw-table td small, .pk-table td small, .pi-table td small, .pm-table td small, .pk-table td small {
  display: block;
  color: var(--sd-mut);
  font-size: 11.5px;
  margin-top: 2px;
}

/* Cards used where a row would be too cramped — an automation, a segment,
   a domain and its records. Same surface as a panel so the pages read as
   one product whichever shape the data takes. */
.pa-card, .ps-card, .pd-card, .pd-detail, .pk-detail, .pa-card, .ps-card, .pd-card, .pm-detail, .pk-detail, .pa-card, .ps-card, .pd-card, .pw-detail, .pk-detail, .pa-card, .ps-card, .pd-card, .pm-detail, .pk-detail, .pa-card, .ps-card, .pw-card, .pd-detail, .pk-detail, .pa-card, .ps-card, .pw-card, .pm-detail, .pk-detail {
  background: var(--sd-card);
  border: 1px solid var(--sd-line);
  border-radius: 18px;
  box-shadow: var(--sd-shadow-sm);
  padding: 18px 20px;
  min-width: 0;
}
.pa-cards, .ps-cards, .pd-list, .pa-cards, .ps-cards, .pw-list { display: flex; flex-direction: column; gap: 12px; }

/* A panel nested inside a card keeps the border that separates it but drops
   the shadow — two stacked shadows read as a lifted sheet on a lifted sheet. */
.pd-detail .pd-recwrap,
.pa-card .pa-table-wrap,
.ps-card .ps-table-wrap { box-shadow: none; border-radius: 14px; }

/* ------------------------------- chips ------------------------------- */

.pc-tag, .pc-badge, .pa-badge, .pi-badge, .pd-tag, .pk-tag, .pc-tag, .pc-badge, .pa-badge, .pi-badge, .pm-tag, .pk-tag, .pc-tag, .pc-badge, .pa-badge, .pi-badge, .pw-tag, .pk-tag, .pc-tag, .pc-badge, .pa-badge, .pi-badge, .pm-tag, .pk-tag, .pc-tag, .pc-badge, .pa-badge, .pi-badge, .pl-tag, .pk-tag, .pc-tag, .pc-badge, .pa-badge, .pi-badge, .pm-tag, .pk-tag, .pc-tag, .pc-badge, .pa-badge, .pi-badge, .pw-tag, .pk-tag, .pc-tag, .pc-badge, .pa-badge, .pi-badge, .pm-tag, .pk-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
  border: 0;
  color: var(--sd-mut);
  background:var(--sd-sunk,#eef2f8);
}
.pc-badge.good, .pa-badge.good, .pi-badge.active, .pd-tag.ok, .pk-tag.ok, .pc-badge.good, .pa-badge.good, .pi-badge.active, .pm-tag.ok, .pk-tag.ok, .pc-badge.good, .pa-badge.good, .pi-badge.active, .pw-tag.ok, .pk-tag.ok, .pc-badge.good, .pa-badge.good, .pi-badge.active, .pm-tag.ok, .pk-tag.ok, .pc-badge.good, .pa-badge.good, .pi-badge.active, .pl-tag.ok, .pk-tag.ok, .pc-badge.good, .pa-badge.good, .pi-badge.active, .pm-tag.ok, .pk-tag.ok, .pc-badge.good, .pa-badge.good, .pi-badge.active, .pw-tag.ok, .pk-tag.ok, .pc-badge.good, .pa-badge.good, .pi-badge.active, .pm-tag.ok, .pk-tag.ok {
  color: #147c3d;
  background: rgba(22, 163, 74, .1);
}
.pc-badge.amber, .pa-badge.amber, .pi-badge.paused, .pd-tag.wait, .pk-tag.wait, .pc-badge.amber, .pa-badge.amber, .pi-badge.paused, .pm-tag.wait, .pk-tag.wait, .pc-badge.amber, .pa-badge.amber, .pi-badge.paused, .pw-tag.wait, .pk-tag.wait, .pc-badge.amber, .pa-badge.amber, .pi-badge.paused, .pm-tag.wait, .pk-tag.wait, .pc-badge.amber, .pa-badge.amber, .pi-badge.paused, .pl-tag.wait, .pk-tag.wait, .pc-badge.amber, .pa-badge.amber, .pi-badge.paused, .pm-tag.wait, .pk-tag.wait, .pc-badge.amber, .pa-badge.amber, .pi-badge.paused, .pw-tag.wait, .pk-tag.wait, .pc-badge.amber, .pa-badge.amber, .pi-badge.paused, .pm-tag.wait, .pk-tag.wait {
  color: #955f0d;
  background: rgba(217, 155, 32, .13);
}
.pc-badge.bad, .pa-badge.bad, .pk-tag.bad {
  color: #b32020;
  background: rgba(220, 38, 38, .1);
}
.pc-badge.blue, .pa-badge.blue, .pk-tag.blue {
  color: var(--sd-blue-ink);
  background: rgba(54, 126, 245, .09);
}

/* ---------------------------- empty states --------------------------- */

/* A dashed outline reads as a drop target or an unfinished component. An
   empty page is a normal state, so it gets the same card as a full one. */
.pc-empty, .pa-empty, .ps-empty, .pi-empty, .pk-empty, .pc-empty, .pa-empty, .ps-empty, .pm-empty, .pk-empty, .pc-empty, .pa-empty, .ps-empty, .pw-empty, .pk-empty, .pc-empty, .pa-empty, .ps-empty, .pm-empty, .pk-empty, .pc-empty, .pa-empty, .ps-empty, .pl-empty, .pk-empty, .pc-empty, .pa-empty, .ps-empty, .pm-empty, .pk-empty, .pc-empty, .pa-empty, .ps-empty, .pw-empty, .pk-empty, .pc-empty, .pa-empty, .ps-empty, .pm-empty, .pk-empty {
  background: var(--sd-card);
  border: 1px solid var(--sd-line);
  border-radius: 18px;
  box-shadow: var(--sd-shadow-sm);
  padding: 52px 24px;
  text-align: center;
}
.pc-empty h3, .pa-empty h3, .ps-empty h3, .pi-empty h3, .pk-empty h3, .pc-empty h3, .pa-empty h3, .ps-empty h3, .pm-empty h3, .pk-empty h3, .pc-empty h3, .pa-empty h3, .ps-empty h3, .pw-empty h3, .pk-empty h3, .pc-empty h3, .pa-empty h3, .ps-empty h3, .pm-empty h3, .pk-empty h3, .pc-empty h3, .pa-empty h3, .ps-empty h3, .pl-empty h3, .pk-empty h3, .pc-empty h3, .pa-empty h3, .ps-empty h3, .pm-empty h3, .pk-empty h3, .pc-empty h3, .pa-empty h3, .ps-empty h3, .pw-empty h3, .pk-empty h3, .pc-empty h3, .pa-empty h3, .ps-empty h3, .pm-empty h3, .pk-empty h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  color: var(--sd-ink);
}
.pc-empty p, .pa-empty p, .ps-empty p, .pi-empty p, .pk-empty p, .pc-empty p, .pa-empty p, .ps-empty p, .pm-empty p, .pk-empty p, .pc-empty p, .pa-empty p, .ps-empty p, .pw-empty p, .pk-empty p, .pc-empty p, .pa-empty p, .ps-empty p, .pm-empty p, .pk-empty p, .pc-empty p, .pa-empty p, .ps-empty p, .pl-empty p, .pk-empty p, .pc-empty p, .pa-empty p, .ps-empty p, .pm-empty p, .pk-empty p, .pc-empty p, .pa-empty p, .ps-empty p, .pw-empty p, .pk-empty p, .pc-empty p, .pa-empty p, .ps-empty p, .pm-empty p, .pk-empty p {
  margin: 0 auto;
  max-width: 56ch;
  color: var(--sd-mut);
  font-size: 13.5px;
  line-height: 1.6;
}

/* ------------------------------- prose ------------------------------- */

.pc-note, .pa-note, .pi-note, .pd-note, .pk-note, .pi-dim, .ps-about, .pc-note, .pa-note, .pi-note, .pm-note, .pk-note, .pi-dim, .ps-about, .pc-note, .pa-note, .pi-note, .pw-note, .pk-note, .pi-dim, .ps-about, .pc-note, .pa-note, .pi-note, .pm-note, .pk-note, .pi-dim, .ps-about, .pc-note, .pa-note, .pi-note, .pl-note, .pk-note, .pi-dim, .ps-about, .pc-note, .pa-note, .pi-note, .pm-note, .pk-note, .pi-dim, .ps-about, .pc-note, .pa-note, .pi-note, .pw-note, .pk-note, .pi-dim, .ps-about, .pc-note, .pa-note, .pi-note, .pm-note, .pk-note, .pi-dim, .ps-about {
  color: var(--sd-mut);
  font-size: 13px;
  line-height: 1.6;
}

/* ------------------------------ notices ------------------------------ */

.pi-notice, .pi-key-note, .pd-banner, .pk-banner, .pi-notice, .pi-key-note, .pm-banner, .pk-banner, .pi-notice, .pi-key-note, .pw-banner, .pk-banner, .pi-notice, .pi-key-note, .pm-banner, .pk-banner, .pi-notice, .pi-key-note, .pl-banner, .pk-banner, .pi-notice, .pi-key-note, .pm-banner, .pk-banner, .pi-notice, .pi-key-note, .pw-banner, .pk-banner, .pi-notice, .pi-key-note, .pm-banner, .pk-banner {
  border-radius: 14px;
  padding: 13px 16px;
  font-size: 13.5px;
  line-height: 1.6;
  border: 1px solid var(--sd-line);
  background: var(--sd-card);
  box-shadow: var(--sd-shadow-sm);
}
.pi-notice, .pd-banner.wait, .pk-banner.wait, .pi-notice, .pm-banner.wait, .pk-banner.wait, .pi-notice, .pw-banner.wait, .pk-banner.wait, .pi-notice, .pm-banner.wait, .pk-banner.wait, .pi-notice, .pl-banner.wait, .pk-banner.wait, .pi-notice, .pm-banner.wait, .pk-banner.wait, .pi-notice, .pw-banner.wait, .pk-banner.wait, .pi-notice, .pm-banner.wait, .pk-banner.wait {
  border-color: rgba(217, 155, 32, .3);
  background: #fffaf0;
  color: #7c4d09;
}
.pi-key-note, .pd-banner.ok, .pk-banner.ok, .pi-key-note, .pm-banner.ok, .pk-banner.ok, .pi-key-note, .pw-banner.ok, .pk-banner.ok, .pi-key-note, .pm-banner.ok, .pk-banner.ok, .pi-key-note, .pl-banner.ok, .pk-banner.ok, .pi-key-note, .pm-banner.ok, .pk-banner.ok, .pi-key-note, .pw-banner.ok, .pk-banner.ok, .pi-key-note, .pm-banner.ok, .pk-banner.ok {
  border-color: rgba(22, 163, 74, .3);
  background: #f2fbf5;
  color: #146c37;
}
.pd-banner.bad, .pk-banner.bad, .pm-banner.bad, .pk-banner.bad, .pw-banner.bad, .pk-banner.bad, .pm-banner.bad, .pk-banner.bad, .pl-banner.bad, .pk-banner.bad, .pm-banner.bad, .pk-banner.bad, .pw-banner.bad, .pk-banner.bad, .pm-banner.bad, .pk-banner.bad {
  border-color: rgba(220, 38, 38, .28);
  background: #fef4f4;
  color: #a81f1f;
}

/* ------------------------------- inputs ------------------------------ */

.pc-input, .pa-input, .ps-input, .pi-input, .pd-add input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  font: inherit;
  font-size: 13.5px;
  border: 1px solid var(--sd-line);
  background:var(--paper,#fff);
  color: var(--sd-ink);
}
.pc-input:focus, .pa-input:focus, .ps-input:focus, .pi-input:focus, .pd-add input:focus {
  outline: none;
  border-color: var(--sd-blue);
  box-shadow: 0 0 0 3px rgba(54, 126, 245, .15);
}
.pc-grid label, .pa-grid label, .ps-grid label, .pi-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--sd-mut);
  min-width: 0;
}

/* ------------------------------ dialogs ------------------------------ */

.pc-dialog, .pa-dialog, .ps-dialog, .pi-dialog {
  background: var(--sd-card);
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-r-lg);
  box-shadow: var(--sd-shadow-md);
}
.pc-dialog h2, .pa-dialog h2, .ps-dialog h2, .pi-dialog h2 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.01em;
}

/* ------------------------------- toast ------------------------------- */

.pc-toast, .pa-toast, .ps-toast, .pi-toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 600;
  max-width: min(560px, 92vw);
  background: var(--sd-ink);
  color: #fff;
  box-shadow: var(--sd-shadow-md);
}