.rp-shell {
  --rp-purple: #50337f;
  --rp-orange: #ee8a2c;
  --rp-red: #b83b49;
  --rp-green: #2c795d;
  --rp-blue: #326e9f;
  --rp-ink: #292531;
  --rp-muted: #6e6977;
  --rp-line: #e5e1e9;
  display: grid;
  gap: 15px;
  color: var(--rp-ink);
}

.rp-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 27px 29px;
  border-radius: 18px;
  color: white;
  background:
    radial-gradient(circle at 88% 10%, rgba(244,152,59,.36), transparent 28%),
    linear-gradient(128deg, #281f36, #52337b 62%, #6f4591);
  box-shadow: 0 18px 38px rgba(44,30,59,.15);
}
.rp-hero::after { content: ''; position: absolute; inset: auto -35px -70px auto; width: 230px; height: 170px; border: 34px solid rgba(255,255,255,.055); border-radius: 50%; }
.rp-hero > * { position: relative; z-index: 1; }
.rp-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; color: #dfd5ec; font-size: 11px; font-weight: 850; letter-spacing: .14em; }
.rp-kicker b, .rp-beta { padding: 4px 7px; border-radius: 999px; background: var(--rp-orange); color: white; font-size: 9px; letter-spacing: .08em; }
.rp-hero h1 { max-width: 760px; margin: 0; font-size: clamp(26px, 3.1vw, 39px); line-height: 1.08; }
.rp-hero h1 span { color: #ffc17f; }
.rp-hero p { max-width: 800px; margin: 10px 0 0; color: #e9e2f1; font-size: 13px; line-height: 1.6; }
.rp-mode { flex: 0 0 auto; padding: 7px 10px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; background: rgba(255,255,255,.11); color: white; font-size: 9px; font-weight: 800; letter-spacing: .08em; }

.rp-boundary { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 10px; align-items: center; padding: 12px 15px; border: 1px solid #d9cde6; border-left: 4px solid var(--rp-purple); border-radius: 11px; background: #faf7fd; }
.rp-boundary > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--rp-purple); background: #eee6f7; }
.rp-boundary strong, .rp-boundary p { display: block; }
.rp-boundary strong { font-size: 11px; }
.rp-boundary p { margin: 3px 0 0; color: var(--rp-muted); font-size: 11px; line-height: 1.45; }
.rp-stale-banner { border-color: #edcbd0; border-left-color: var(--rp-red); background: #fff6f7; }
.rp-stale-banner > span { color: var(--rp-red); background: #f9dfe3; font-weight: 900; }
.rp-stale-banner strong, .rp-stale-banner p { color: var(--rp-red); }

.rp-metrics { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 11px; }
.rp-metrics article { display: grid; gap: 3px; padding: 14px 15px; border: 1px solid var(--rp-line); border-top: 3px solid var(--rp-purple); border-radius: 12px; background: white; }
.rp-metrics article.critical { border-top-color: var(--rp-red); }
.rp-metrics article.overdue { border-top-color: var(--rp-orange); }
.rp-metrics article.ack { border-top-color: var(--rp-green); }
.rp-metrics span { color: var(--rp-muted); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.rp-metrics strong { font-size: 25px; }
.rp-metrics small { color: var(--rp-muted); font-size: 9px; }

.rp-card { overflow: hidden; border: 1px solid var(--rp-line); border-radius: 14px; background: white; box-shadow: 0 4px 15px rgba(40,31,51,.045); }
.rp-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--rp-line); }
.rp-card h2 { margin: 0; font-size: 15px; }
.rp-card header p { margin: 3px 0 0; color: var(--rp-muted); font-size: 10px; }
.rp-filters { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 9px; padding: 12px 14px; background: #faf9fb; }
.rp-filters label { display: grid; gap: 4px; }
.rp-filters label > span { color: var(--rp-muted); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.rp-filters select { min-width: 0; height: 33px; padding: 6px 8px; border: 1px solid #ddd7e2; border-radius: 8px; background: white; color: var(--rp-ink); font: inherit; font-size: 10px; }

.rp-queue { display: grid; gap: 10px; }
.rp-item { overflow: hidden; border: 1px solid var(--rp-line); border-left: 4px solid var(--rp-purple); border-radius: 13px; background: white; box-shadow: 0 4px 14px rgba(40,31,51,.04); }
.rp-item.critical { border-left-color: var(--rp-red); }
.rp-item.high { border-left-color: #d45e3d; }
.rp-item.medium { border-left-color: var(--rp-orange); }
.rp-item.low, .rp-item.info { border-left-color: var(--rp-blue); }
.rp-item.acknowledged { opacity: .72; }
.rp-item-head { display: flex; align-items: center; gap: 7px; padding: 10px 13px; border-bottom: 1px solid #eeeaf1; background: #fcfbfd; }
.rp-severity, .rp-category, .rp-state { padding: 4px 7px; border-radius: 999px; font-size: 8px; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.rp-severity { color: white; background: var(--rp-purple); }
.critical .rp-severity { background: var(--rp-red); }
.high .rp-severity { background: #c8573a; }
.medium .rp-severity { background: var(--rp-orange); }
.low .rp-severity, .info .rp-severity { background: var(--rp-blue); }
.rp-category { color: var(--rp-purple); background: #eee8f5; }
.rp-state { margin-left: auto; color: var(--rp-muted); background: #efedf2; }
.acknowledged .rp-state { color: var(--rp-green); background: #e7f4ed; }
.rp-overdue-flag { padding: 4px 7px; border-radius: 999px; background: #fff0df; color: #a75512; font-size: 8px; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }

.rp-item-body { display: grid; grid-template-columns: minmax(0,1fr) 240px; gap: 18px; padding: 15px 16px; }
.rp-copy > span { color: var(--rp-muted); font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.rp-copy h3 { margin: 5px 0 4px; font-size: 16px; }
.rp-copy > p { margin: 0; color: #56515f; font-size: 11px; line-height: 1.5; }
.rp-account { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-self: start; }
.rp-account > div { padding: 9px; border-radius: 9px; background: #f7f5f9; }
.rp-account span, .rp-account strong, .rp-account small { display: block; }
.rp-account span { color: var(--rp-muted); font-size: 8px; text-transform: uppercase; }
.rp-account strong { margin-top: 4px; font-size: 10px; }
.rp-account small { margin-top: 2px; color: var(--rp-muted); font-size: 8px; }
.rp-voicemail { display: grid; gap: 10px; margin: 0 16px 12px; padding: 12px; border: 1px solid #d8cce5; border-radius: 10px; background: linear-gradient(135deg,#faf7fd,#fffaf4); }
.rp-voicemail-facts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.rp-voicemail-facts > div { min-width: 0; padding: 8px 9px; border-radius: 8px; background: rgba(255,255,255,.82); }
.rp-voicemail-facts span,
.rp-voicemail-facts strong,
.rp-voicemail-facts small,
.rp-voicemail-recording span,
.rp-voicemail-recording small { display: block; }
.rp-voicemail-facts span,
.rp-voicemail-recording span { color: var(--rp-muted); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.rp-voicemail-facts strong { overflow-wrap: anywhere; margin-top: 4px; font-size: 10px; }
.rp-voicemail-facts small,
.rp-voicemail-recording small { margin-top: 2px; color: var(--rp-muted); font-size: 8px; }
.rp-voicemail-recording { display: grid; grid-template-columns: minmax(150px,.55fr) minmax(240px,1fr); gap: 12px; align-items: center; }
.rp-voicemail-recording audio { width: 100%; min-width: 0; height: 34px; accent-color: var(--rp-purple); }
.rp-voicemail-unavailable { margin: 0; padding: 8px 10px; border-radius: 8px; background: #f2eff5; color: var(--rp-muted); font-size: 9px; }

.rp-evidence { margin-top: 10px; }
.rp-evidence summary { width: fit-content; color: var(--rp-purple); font-size: 9px; font-weight: 800; cursor: pointer; }
.rp-evidence > div { display: grid; gap: 5px; margin-top: 7px; padding: 8px; border-radius: 8px; background: #f8f6fa; }
.rp-evidence p { display: grid; grid-template-columns: 115px minmax(0,1fr) auto; gap: 8px; align-items: start; margin: 0; font-size: 9px; }
.rp-evidence p strong { color: #4d4654; }
.rp-evidence p span { color: var(--rp-muted); }
.rp-evidence code { color: #938b9b; font-size: 8px; }

.rp-item footer { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 15px; align-items: center; padding: 11px 15px; border-top: 1px solid #eeeaf1; background: #fcfbfd; }
.rp-item footer > div:first-child span, .rp-item footer > div:first-child strong { display: block; }
.rp-item footer > div:first-child span { color: var(--rp-muted); font-size: 8px; text-transform: uppercase; }
.rp-item footer > div:first-child strong { margin-top: 3px; font-size: 10px; }
.rp-actions { display: flex; align-items: center; gap: 7px; }
.rp-actions button { min-height: 31px; padding: 7px 10px; border: 1px solid #d9d3df; border-radius: 8px; background: white; color: #493e54; font: inherit; font-size: 9px; font-weight: 800; cursor: pointer; }
.rp-actions button:hover { border-color: var(--rp-purple); color: var(--rp-purple); }
.rp-actions button.primary { display: inline-flex; align-items: center; gap: 5px; color: white; border-color: var(--rp-purple); background: var(--rp-purple); }
.rp-ack-note { color: var(--rp-green); font-size: 8px; }
.rp-empty { display: grid; justify-items: center; gap: 5px; padding: 45px; border: 1px dashed #d9d2df; border-radius: 14px; background: white; color: var(--rp-muted); text-align: center; }
.rp-empty > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #e7f5ef; color: var(--rp-green); font-size: 20px; }
.rp-empty strong { color: var(--rp-ink); }
.rp-empty p { margin: 0; font-size: 10px; }

.rp-authoritative .rp-hero { align-items: center; }
.rp-refresh,
.rp-save,
.rp-error button {
  position: relative;
  z-index: 1;
  min-height: 36px;
  padding: 8px 13px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 9px;
  background: rgba(255,255,255,.14);
  color: white;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.rp-refresh:disabled,
.rp-save:disabled { opacity: .58; cursor: default; }
.rp-page-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.rp-page-header h1 { margin: 0; color: var(--rp-ink); font-size: 22px; }
.rp-page-header .rp-refresh { background: var(--rp-purple); border-color: var(--rp-purple); }
.rp-page-header .rp-refresh:focus-visible { outline: 2px solid var(--rp-purple); outline-offset: 3px; }
.rp-authority-lock { padding: 28px; }
.rp-authority-lock strong { font-size: 17px; }
.rp-authority-lock p { margin: 6px 0 0; color: var(--rp-muted); font-size: 11px; }
.rp-authority-filters { grid-template-columns: repeat(4,minmax(0,1fr)) minmax(220px,1.35fr); }
.rp-authority-filters input,
.rp-owner-control select,
.rp-inline-control select,
.rp-action-note input,
.rp-preferences input {
  min-width: 0;
  width: 100%;
  height: 33px;
  padding: 6px 8px;
  border: 1px solid #ddd7e2;
  border-radius: 8px;
  background: white;
  color: var(--rp-ink);
  font: inherit;
  font-size: 10px;
}
.rp-production-grid { display: grid; grid-template-columns: minmax(0,1fr) 355px; gap: 14px; align-items: start; }
.rp-side { display: grid; gap: 12px; position: sticky; top: 14px; }
.rp-side-body { padding: 13px 14px; }
.rp-source-count { color: var(--rp-muted); font-size: 8px; font-weight: 750; }
.rp-owner-control { display: grid; gap: 4px; }
.rp-owner-control > span,
.rp-inline-control > span,
.rp-action-note label > span,
.rp-preferences label > span { color: var(--rp-muted); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.rp-follow-up { display: grid; gap: 3px; margin: 0 16px 12px; padding: 10px 11px; border: 1px solid #d8cce5; border-radius: 9px; background: #faf7fd; }
.rp-follow-up span { color: var(--rp-purple); font-size: 8px; font-weight: 850; text-transform: uppercase; }
.rp-follow-up strong { font-size: 10px; }
.rp-follow-up small { color: var(--rp-muted); font-size: 8px; }
.rp-action-note { display: grid; grid-template-columns: minmax(0,1fr) 150px; gap: 8px; padding: 0 16px 12px; }
.rp-action-note label { display: grid; gap: 4px; }
.rp-authority-item .rp-account { grid-template-columns: 1fr; }
.rp-authority-item .rp-actions { justify-content: flex-end; flex-wrap: wrap; max-width: 610px; }
.rp-inline-control { display: inline-flex; align-items: center; gap: 5px; }
.rp-inline-control select { width: 90px; height: 31px; padding: 4px 6px; }
.rp-readonly,
.rp-saving { color: var(--rp-muted); font-size: 8px; font-weight: 750; }
.rp-saving { color: var(--rp-purple); }
.rp-panel-state { display: grid; gap: 4px; padding: 12px; border-radius: 9px; background: #f7f5f9; color: var(--rp-muted); font-size: 10px; }
.rp-panel-state.error { border: 1px solid #edcbd0; background: #fff6f7; color: var(--rp-red); }
.rp-digest-counts { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.rp-digest-counts > div { display: grid; gap: 2px; padding: 8px; border-radius: 8px; background: #f7f5f9; }
.rp-digest-counts span,
.rp-digest-group span { color: var(--rp-muted); font-size: 8px; text-transform: uppercase; }
.rp-digest-counts strong { font-size: 17px; }
.rp-digest-groups { display: grid; gap: 5px; margin-top: 9px; }
.rp-digest-group { display: flex; align-items: center; justify-content: space-between; padding: 7px 8px; border-bottom: 1px solid var(--rp-line); }
.rp-digest-group strong { font-size: 10px; }
.rp-next-digest { margin: 10px 0 0; color: var(--rp-muted); font-size: 9px; }
.rp-notification-list { display: grid; gap: 7px; }
.rp-notification-overflow { margin-top: 10px; }
.rp-notification-overflow > summary { padding: 8px; color: var(--rp-purple); font-size: 14px; font-weight: 700; cursor: pointer; }
.rp-notification-overflow > summary:focus-visible { outline: 2px solid var(--rp-purple); outline-offset: 2px; }
.rp-notification-overflow > .rp-notification-list { margin-top: 8px; }
.rp-notification-list > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 3px 7px; align-items: center; padding: 8px; border: 1px solid var(--rp-line); border-radius: 8px; }
.rp-notification-list span { grid-column: 1; color: var(--rp-orange); font-size: 7px; font-weight: 850; text-transform: uppercase; }
.rp-notification-list strong { grid-column: 1; font-size: 9px; }
.rp-notification-list small { grid-column: 1; color: var(--rp-muted); font-size: 8px; }
.rp-notification-list button { grid-column: 2; grid-row: 1 / span 3; padding: 5px 7px; border: 1px solid #d9d3df; border-radius: 7px; background: white; color: var(--rp-purple); font: inherit; font-size: 8px; font-weight: 800; cursor: pointer; }
.rp-preferences { display: grid; gap: 9px; }
.rp-preferences > label:not(.rp-check) { display: grid; gap: 4px; }
.rp-pref-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.rp-pref-row label { display: grid; gap: 4px; }
.rp-check { display: flex; align-items: center; gap: 7px; }
.rp-check input { width: 15px; height: 15px; }
.rp-check > span { text-transform: none !important; font-size: 9px !important; }
.rp-save { border-color: var(--rp-purple); background: var(--rp-purple); }
.rp-channel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.rp-channel-grid > div { display: grid; gap: 2px; padding: 8px; border: 1px solid var(--rp-line); border-radius: 8px; }
.rp-channel-grid span { color: var(--rp-muted); font-size: 8px; }
.rp-channel-grid strong { font-size: 10px; }
.rp-channel-grid small { color: var(--rp-muted); font-size: 7px; }
.rp-channel-grid .active { border-color: #b9ddcc; background: #f0faf5; }
.rp-channel-grid .active strong { color: var(--rp-green); }
.rp-channel-grid .unavailable strong { color: #766e7d; }
.rp-provider-note { margin: 9px 0 0; color: var(--rp-muted); font-size: 8px; line-height: 1.45; }
.rp-muted { color: var(--rp-muted); font-size: 9px; }
.rp-error button { margin-top: 5px; border-color: var(--rp-purple); background: var(--rp-purple); }
.rp-load-more { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 9px; }
.rp-load-more button { min-height: 32px; padding: 7px 11px; border: 1px solid var(--rp-purple); border-radius: 8px; background: white; color: var(--rp-purple); font: inherit; font-size: 9px; font-weight: 800; cursor: pointer; }
.rp-load-more button:disabled { opacity: .55; cursor: default; }
.rp-load-more span { color: var(--rp-muted); font-size: 8px; }

@media (max-width: 1120px) {
  .rp-metrics { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .rp-filters { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .rp-production-grid { grid-template-columns: 1fr; }
  .rp-side { position: static; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .rp-voicemail-facts { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .rp-hero { align-items: flex-start; flex-direction: column; }
  .rp-item-body, .rp-item footer { grid-template-columns: 1fr; }
  .rp-actions { flex-wrap: wrap; }
  .rp-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .rp-side { grid-template-columns: 1fr; }
  .rp-action-note { grid-template-columns: 1fr; }
  .rp-voicemail-recording { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .rp-filters, .rp-metrics, .rp-account { grid-template-columns: 1fr; }
  .rp-evidence p { grid-template-columns: 1fr; }
  .rp-voicemail-facts { grid-template-columns: 1fr; }
}