:root {
  --muda-cp-navy: #0a3048;
  --muda-cp-navy-deep: #062438;
  --muda-cp-green: #13845b;
  --muda-cp-gold: #b98112;
  --muda-cp-red: #a72b39;
  --muda-cp-ink: #172b35;
  --muda-cp-muted: #5d707a;
  --muda-cp-line: #d8e2e7;
  --muda-cp-soft: #eef4f6;
  --muda-cp-surface: #fff;
}

.muda-candidate-portal {
  background: #eef3f5;
  color: var(--muda-cp-ink);
}

.muda-cp-sidebar {
  flex-basis: 236px;
  padding: 1.1rem 1rem;
  background: var(--muda-cp-navy-deep);
}

.muda-cp-sidebar-head {
  flex: 0 0 auto;
}

.muda-cp-menu-toggle {
  display: none;
}

.muda-cp-nav-link {
  margin-bottom: 0.18rem;
  color: rgb(255 255 255 / 78%);
  transition: color 150ms ease, background-color 150ms ease;
}

.muda-cp-nav-link:hover,
.muda-cp-nav-link:focus-visible {
  color: #fff;
  background: rgb(255 255 255 / 9%);
}

.muda-cp-nav-link.is-active {
  color: #fff;
  background: #24506a;
}

.muda-cp-push-nav {
  appearance: none;
  cursor: pointer;
  text-align: left;
}

.muda-cp-push-nav[hidden] {
  display: none !important;
}

.muda-cp-push-nav-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.muda-cp-push-state {
  flex: 0 0 auto;
  min-width: 2.25rem;
  padding: 0.18rem 0.35rem;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 999px;
  color: rgb(255 255 255 / 78%);
  background: rgb(255 255 255 / 8%);
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.muda-cp-push-nav[data-push-state="on"] .muda-cp-push-state {
  border-color: rgb(103 221 168 / 42%);
  color: #d8fae9;
  background: rgb(19 132 91 / 34%);
}

.muda-cp-push-nav[data-push-state="blocked"] .muda-cp-push-state {
  border-color: rgb(240 161 170 / 38%);
  color: #ffd8dc;
  background: rgb(183 53 67 / 20%);
}

.muda-cp-push-nav[data-push-state="install"] .muda-cp-push-state {
  border-color: rgb(226 188 104 / 38%);
  color: #ffe8b2;
  background: rgb(185 129 18 / 20%);
}

.muda-cp-push-nav.is-active {
  color: #c9f5df;
  background: rgb(19 132 91 / 20%);
}

.muda-cp-push-nav.is-active:hover,
.muda-cp-push-nav.is-active:focus-visible {
  color: #fff;
  background: rgb(19 132 91 / 30%);
}

.muda-cp-push-nav:disabled {
  cursor: not-allowed;
  opacity: 0.68;
}

.muda-cp-push-nav[aria-busy="true"] {
  cursor: wait;
}

.muda-cp-sidebar-logout-form {
  margin: 0.2rem 0 0;
}

.muda-cp-sidebar-logout {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.7rem;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #f0a1aa;
  background: rgb(183 53 67 / 7%);
  font-weight: 700;
  text-align: left;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.muda-cp-sidebar-logout:hover,
.muda-cp-sidebar-logout:focus-visible {
  border-color: rgb(240 161 170 / 28%);
  color: #ffd8dc;
  background: rgb(183 53 67 / 13%);
}

.muda-cp-kapy {
  position: relative;
  display: flex;
  gap: 0.25rem;
  align-items: center;
  justify-content: center;
  padding: 0.36rem 0.62rem;
  border: 1px solid rgb(79 224 218 / 58%);
  border-radius: 7px;
  color: #e9ffff;
  background: rgb(9 56 76 / 72%);
  box-shadow: 0 0 8px rgb(57 221 208 / 24%);
  text-decoration: none;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  opacity: 0.62;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.muda-cp-kapy:hover,
.muda-cp-kapy:focus-visible {
  border-color: #79f2e6;
  color: #fff;
  background: #10465b;
  box-shadow: 0 0 8px rgb(57 221 208 / 42%);
  opacity: 0.86;
}

.muda-cp-kapy span {
  color: rgb(231 255 252 / 72%);
  font-size: 0.68rem;
  line-height: 1;
}

.muda-cp-kapy strong {
  font-size: 0.78rem;
  line-height: 1;
}

.muda-cp-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 4.25rem;
  padding: 0.62rem 1.35rem;
  box-shadow: 0 2px 6px rgb(18 45 57 / 7%);
}

.muda-cp-topbar-title strong {
  color: var(--muda-cp-ink);
}

.muda-cp-account-actions,
.muda-cp-topbar-notifications,
.muda-cp-account-button {
  display: flex;
  align-items: center;
}

.muda-cp-account-actions {
  min-width: 0;
  gap: 0.55rem;
}

.muda-cp-topbar-notifications {
  position: relative;
  width: 44px;
  min-width: 44px;
  height: 44px;
  justify-content: center;
  border: 1px solid var(--muda-cp-line);
  border-radius: 7px;
  color: #36525f;
  background: #fff;
  font-size: 1.05rem;
  text-decoration: none;
}

.muda-cp-topbar-notifications:hover,
.muda-cp-topbar-notifications:focus-visible {
  border-color: #8daeba;
  color: var(--muda-cp-navy);
  background: #f7fafb;
}

.muda-cp-topbar-notifications.is-updated {
  animation: muda-cp-notification-pulse 700ms ease-out;
}

@keyframes muda-cp-notification-pulse {
  0% {
    box-shadow: 0 0 0 0 rgb(180 35 54 / 28%);
    transform: scale(1);
  }
  45% {
    box-shadow: 0 0 0 8px rgb(180 35 54 / 0%);
    transform: scale(1.06);
  }
  100% {
    box-shadow: 0 0 0 0 rgb(180 35 54 / 0%);
    transform: scale(1);
  }
}

.muda-cp-topbar-notification-count {
  position: absolute;
  top: 2px;
  right: 2px;
  display: grid;
  min-width: 1.12rem;
  height: 1.12rem;
  padding: 0 0.22rem;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  background: #b42336;
  font-size: 0.6rem;
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  line-height: 1;
}

.muda-cp-account-button {
  min-width: 0;
  min-height: 44px;
  gap: 0.55rem;
  padding: 0.3rem 0.55rem 0.3rem 0.35rem;
  border: 1px solid var(--muda-cp-line);
  border-radius: 7px;
  color: var(--muda-cp-ink);
  background: #fff;
  font-size: 0.8rem;
  font-weight: 750;
  text-decoration: none;
}

.muda-cp-account-button:hover,
.muda-cp-account-button:focus-visible {
  border-color: #8daeba;
  color: var(--muda-cp-navy);
  background: #f7fafb;
}

.muda-cp-account-avatar {
  display: grid;
  width: 2.1rem;
  height: 2.1rem;
  flex: 0 0 2.1rem;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  color: var(--muda-cp-navy);
  background: #e5eef2;
  font-weight: 850;
}

.muda-cp-account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.muda-cp-account-name {
  max-width: 13rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.muda-cp-main {
  width: min(100%, 1180px);
  padding: 1.35rem;
}

.muda-cp-profile-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 1.6rem;
  align-items: center;
  padding: 1.5rem;
  border: 1px solid #cbdbe1;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 6px rgb(23 53 66 / 8%);
}

.muda-cp-profile-identity {
  display: grid;
  min-width: 0;
  gap: 1rem;
}

.muda-cp-profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.muda-cp-profile-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.muda-cp-profile-status,
.muda-cp-photo-state {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
}

.muda-cp-profile-status {
  padding: 0.32rem 0.58rem;
  color: #34505d;
  background: #e9f0f3;
}

.muda-cp-profile-status.is-approved {
  color: #0e6946;
  background: #dff3ea;
}

.muda-cp-profile-status.is-rejected {
  color: #8d2634;
  background: #fae6e9;
}

.muda-cp-profile-status.is-submitted {
  color: #775506;
  background: #fff1ca;
}

.muda-cp-profile-hero h1 {
  margin: 0.55rem 0 0;
  color: #102a37;
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  font-weight: 850;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.muda-cp-profile-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1rem;
  margin-top: 0.65rem;
  color: #4f6671;
  font-size: 0.84rem;
}

.muda-cp-profile-contact span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 0.4rem;
  overflow-wrap: anywhere;
}

.muda-cp-profile-contact i {
  color: var(--muda-cp-green);
}

.muda-cp-completion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem 1rem;
  align-items: end;
  max-width: 46rem;
}

.muda-cp-completion strong,
.muda-cp-completion span {
  display: block;
}

.muda-cp-completion > div:first-child > strong {
  font-size: 0.92rem;
}

.muda-cp-completion span {
  margin-top: 0.12rem;
  color: var(--muda-cp-muted);
  font-size: 0.76rem;
}

.muda-cp-completion > strong {
  font-size: 1.12rem;
}

.muda-cp-completion .progress {
  grid-column: 1 / -1;
  height: 0.55rem;
  border-radius: 999px;
  background: #dfe8ec;
}

.muda-cp-completion-guidance {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1.1rem;
  border: 1px solid #d2dfe4;
  border-left: 4px solid var(--muda-cp-gold);
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 3px 7px rgb(23 53 66 / 7%);
}

.muda-cp-completion-guidance.is-editor {
  margin-top: 0;
}

.muda-cp-completion-guidance-head {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
}

.muda-cp-completion-guidance-icon {
  display: grid;
  width: 2.4rem;
  height: 2.4rem;
  place-items: center;
  border-radius: 7px;
  color: #805a08;
  background: #fff1c9;
  font-size: 1.05rem;
}

.muda-cp-completion-guidance-kicker {
  display: block;
  margin-bottom: 0.12rem;
  color: #8a620b;
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.muda-cp-completion-guidance h2,
.muda-cp-completion-guidance p {
  margin: 0;
}

.muda-cp-completion-guidance h2 {
  color: #173542;
  font-size: 1rem;
}

.muda-cp-completion-guidance-head p {
  margin-top: 0.16rem;
  color: var(--muda-cp-muted);
  font-size: 0.78rem;
}

.muda-cp-completion-guidance-head .btn {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 0.4rem;
}

.muda-cp-completion-guidance-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.muda-cp-completion-guidance-list li {
  min-width: 0;
  padding: 0.68rem 0.75rem;
  border: 1px solid #dce5e9;
  border-radius: 6px;
  background: #f8fafb;
}

.muda-cp-completion-guidance-list li > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.65rem;
}

.muda-cp-completion-guidance-list strong {
  color: #254451;
  font-size: 0.8rem;
}

.muda-cp-completion-guidance-list li > div > span {
  color: #8a620b;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  white-space: nowrap;
}

.muda-cp-completion-guidance-list p {
  margin-top: 0.25rem;
  color: #60747e;
  font-size: 0.74rem;
  line-height: 1.4;
}

.muda-cp-profile-photo-wrap {
  display: grid;
  gap: 0.65rem;
  justify-items: center;
}

.muda-cp-profile-photo {
  display: grid;
  width: 172px;
  height: 172px;
  place-items: center;
  overflow: hidden;
  border: 4px solid #fff;
  border-radius: 50%;
  color: var(--muda-cp-navy);
  background: #dce9ee;
  box-shadow: 0 0 0 1px #b7cbd3, 0 4px 8px rgb(20 54 68 / 16%);
  font-size: 3rem;
  font-weight: 850;
}

.muda-cp-profile-photo img,
.muda-cp-photo-editor-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.muda-cp-photo-state {
  padding: 0.28rem 0.55rem;
  color: #405a66;
  background: #e9f0f3;
  text-align: center;
}

.muda-cp-review-note,
.muda-cp-profile-review-wait,
.muda-cp-photo-pending {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.8rem 0.9rem;
  border-radius: 7px;
}

.muda-cp-review-note {
  border: 1px solid #e4c575;
  color: #604708;
  background: #fff8df;
}

.muda-cp-review-note strong,
.muda-cp-review-note p,
.muda-cp-profile-review-wait strong,
.muda-cp-profile-review-wait p {
  margin: 0;
}

.muda-cp-review-note p,
.muda-cp-profile-review-wait p {
  margin-top: 0.15rem;
  font-size: 0.82rem;
}

.muda-cp-profile-layout {
  margin-top: 1rem;
  overflow: hidden;
  border: 1px solid var(--muda-cp-line);
  border-radius: 8px;
  background: #fff;
}

.muda-cp-profile-section,
.muda-cp-editor-section {
  padding: 1.35rem;
  background: #fff;
}

.muda-cp-profile-layout .muda-cp-profile-section + .muda-cp-profile-section {
  border-top: 1px solid var(--muda-cp-line);
}

.muda-cp-profile-section-heading {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}

.muda-cp-profile-section-heading > span {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 2.35rem;
  place-items: center;
  border-radius: 7px;
  color: #0e657f;
  background: #e2f1f4;
  font-size: 1rem;
}

.muda-cp-profile-section-heading h2,
.muda-cp-profile-section-heading p {
  margin: 0;
}

.muda-cp-profile-section-heading h2 {
  color: #183641;
  font-size: 1.08rem;
  font-weight: 820;
  letter-spacing: 0;
}

.muda-cp-profile-section-heading p {
  margin-top: 0.16rem;
  color: var(--muda-cp-muted);
  font-size: 0.79rem;
}

.muda-cp-profile-data-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.muda-cp-profile-data-grid > div {
  min-width: 0;
  padding: 0.78rem 0;
  border-bottom: 1px solid #e7edef;
}

.muda-cp-profile-data-grid > div:nth-child(odd) {
  padding-right: 1.2rem;
}

.muda-cp-profile-data-grid > div:nth-child(even) {
  padding-left: 1.2rem;
}

.muda-cp-profile-data-grid dt {
  color: var(--muda-cp-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.muda-cp-profile-data-grid dd {
  margin: 0.22rem 0 0;
  color: var(--muda-cp-ink);
  font-size: 0.88rem;
  font-weight: 720;
  overflow-wrap: anywhere;
}

.muda-cp-profile-summary,
.muda-cp-profile-tags-block {
  margin-top: 1rem;
}

.muda-cp-profile-summary:first-of-type {
  margin-top: 0;
  margin-bottom: 0.5rem;
  padding: 0.9rem 1rem;
  border-radius: 7px;
  background: #f3f7f8;
}

.muda-cp-profile-summary h3,
.muda-cp-profile-tags-block h3 {
  margin: 0;
  color: #36525f;
  font-size: 0.78rem;
  font-weight: 800;
}

.muda-cp-profile-summary p,
.muda-cp-profile-tags-block p {
  max-width: 72ch;
  margin: 0.35rem 0 0;
  color: #4e6570;
  font-size: 0.86rem;
  line-height: 1.6;
  white-space: pre-line;
}

.muda-cp-profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.55rem;
}

.muda-cp-profile-tags span {
  padding: 0.32rem 0.58rem;
  border: 1px solid #b9d6de;
  border-radius: 999px;
  color: #19556a;
  background: #edf7f9;
  font-size: 0.76rem;
  font-weight: 720;
}

.muda-cp-profile-tags.is-language span {
  border-color: #c8d9c9;
  color: #28633f;
  background: #f0f7f1;
}

.muda-cp-documents-section {
  margin-top: 1rem;
  border: 1px solid var(--muda-cp-line);
  border-radius: 8px;
}

.muda-cp-readonly-documents {
  border-top: 1px solid #e2eaed;
}

.muda-cp-readonly-document {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.9rem 0;
  border-bottom: 1px solid #e2eaed;
}

.muda-cp-readonly-document-copy,
.muda-cp-readonly-document-meta {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.muda-cp-readonly-document-copy strong {
  color: var(--muda-cp-ink);
  font-size: 0.88rem;
  font-weight: 800;
}

.muda-cp-readonly-document-copy span,
.muda-cp-readonly-document-copy small {
  color: var(--muda-cp-muted);
  font-size: 0.76rem;
  overflow-wrap: anywhere;
}

.muda-cp-readonly-document-meta {
  justify-items: end;
}

.muda-cp-documents-empty {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem;
  border: 1px dashed #b9cbd2;
  border-radius: 7px;
  color: #405a66;
  background: #f6f9fa;
}

.muda-cp-documents-empty > span {
  display: grid;
  width: 2.6rem;
  height: 2.6rem;
  flex: 0 0 2.6rem;
  place-items: center;
  border-radius: 7px;
  color: #0e657f;
  background: #e2f1f4;
  font-size: 1.1rem;
}

.muda-cp-documents-empty strong,
.muda-cp-documents-empty p {
  margin: 0;
}

.muda-cp-documents-empty strong {
  color: var(--muda-cp-ink);
  font-size: 0.9rem;
}

.muda-cp-documents-empty p {
  margin-top: 0.15rem;
  color: var(--muda-cp-muted);
  font-size: 0.78rem;
}

.muda-cp-submit-band {
  border-color: #b8d6ca;
  background: #f4faf7;
}

.muda-cp-profile-review-wait {
  margin-top: 1rem;
  border: 1px solid #d9c381;
  color: #624c0a;
  background: #fff8df;
}

.muda-cp-editor-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.7rem 0 1rem;
}

.muda-cp-notification-head-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.55rem;
}

.muda-cp-notification-head-actions form {
  margin: 0;
}

.muda-cp-notification-head-actions [data-candidate-push-toggle].is-active {
  border-color: #8ec7ae;
  color: #08633f;
  background: #edf8f2;
}

.muda-cp-new-notification {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.8rem;
  padding: 0.72rem 0.85rem;
  border: 1px solid #9fc8d4;
  border-radius: 7px;
  color: #123f50;
  background: #eef7f9;
  box-shadow: 0 5px 14px rgb(17 54 70 / 8%);
  font-size: 0.84rem;
  font-weight: 700;
}

.muda-cp-new-notification span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.muda-cp-live-status {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1090;
  max-width: min(24rem, calc(100vw - 2rem));
  padding: 0.78rem 0.9rem;
  border: 1px solid #9fc8b6;
  border-radius: 7px;
  color: #0b5638;
  background: #f1faf5;
  box-shadow: 0 12px 28px rgb(11 36 47 / 18%);
  font-size: 0.82rem;
  font-weight: 700;
}

.muda-cp-live-status.is-error {
  border-color: #e4a8b0;
  color: #8d2131;
  background: #fff4f5;
}

.muda-cp-editor-heading h1,
.muda-cp-editor-heading p {
  margin: 0;
}

.muda-cp-editor-heading h1 {
  font-size: 1.65rem;
  font-weight: 850;
  letter-spacing: 0;
}

.muda-cp-editor-heading p {
  margin-top: 0.28rem;
  color: var(--muda-cp-muted);
  font-size: 0.84rem;
}

.muda-cp-editor-completion {
  min-width: 7rem;
  padding: 0.65rem 0.8rem;
  border-radius: 7px;
  color: #0d6645;
  background: #e3f3eb;
  text-align: right;
}

.muda-cp-editor-completion strong,
.muda-cp-editor-completion span {
  display: block;
}

.muda-cp-editor-completion strong {
  font-size: 1.15rem;
}

.muda-cp-editor-completion span {
  font-size: 0.7rem;
}

.muda-cp-profile-form {
  display: grid;
  gap: 1rem;
}

.muda-cp-editor-section {
  border: 1px solid var(--muda-cp-line);
  border-radius: 8px;
}

.muda-cp-savebar {
  justify-content: flex-end;
  gap: 0.6rem;
  border-radius: 7px;
}

.muda-cp-photo-editor {
  display: grid;
  gap: 1rem;
  margin-top: 0.7rem;
}

.muda-cp-photo-preview {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem;
  border: 1px solid var(--muda-cp-line);
  border-radius: 8px;
  background: #fff;
}

.muda-cp-photo-editor-image {
  display: grid;
  width: 190px;
  height: 190px;
  place-items: center;
  overflow: hidden;
  border: 4px solid #fff;
  border-radius: 50%;
  color: var(--muda-cp-navy);
  background: #dce9ee;
  box-shadow: 0 0 0 1px #b7cbd3, 0 4px 8px rgb(20 54 68 / 16%);
  font-size: 3.2rem;
  font-weight: 850;
}

.muda-cp-photo-preview h1 {
  margin: 0.65rem 0 0.35rem;
  font-size: 1.55rem;
  font-weight: 850;
  letter-spacing: 0;
}

.muda-cp-photo-preview > div:last-child > p {
  max-width: 68ch;
  margin: 0;
  color: var(--muda-cp-muted);
  line-height: 1.6;
}

.muda-cp-photo-pending {
  width: fit-content;
  margin-top: 0.9rem;
  color: #6f530b;
  background: #fff4d3;
  font-size: 0.82rem;
}

.muda-cp-photo-upload-panel {
  padding: 1.35rem;
  border: 1px solid var(--muda-cp-line);
  border-radius: 8px;
  background: #fff;
}

.muda-cp-photo-upload-form {
  display: grid;
  gap: 1rem;
}

.muda-cp-photo-upload-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
}

.muda-cp-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.muda-cp-pagination span {
  color: var(--muda-cp-muted);
  font-size: 0.78rem;
  font-weight: 750;
}

@media (max-width: 991.98px) {
  .muda-cp-profile-hero {
    grid-template-columns: minmax(0, 1fr) 150px;
  }

  .muda-cp-profile-photo {
    width: 140px;
    height: 140px;
  }

  .muda-cp-account-name {
    max-width: 8rem;
  }
}

@media (max-width: 767.98px) {
  .muda-cp-shell {
    display: block;
  }

  .muda-cp-sidebar {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    padding: 0.65rem 0.8rem;
    box-shadow: 0 2px 6px rgb(2 20 31 / 18%);
  }

  .muda-cp-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .muda-cp-brand {
    min-width: 0;
    padding: 0;
    border-bottom: 0;
  }

  .muda-cp-brand img {
    width: 2.35rem;
    height: 2.35rem;
  }

  .muda-cp-menu-toggle {
    display: inline-grid;
    width: 44px;
    min-width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: 7px;
    color: #fff;
    background: rgb(255 255 255 / 7%);
    font-size: 1.35rem;
    line-height: 1;
    transition: background-color 150ms ease, border-color 150ms ease;
  }

  .muda-cp-menu-toggle:hover,
  .muda-cp-menu-toggle:focus-visible,
  .muda-cp-menu-toggle[aria-expanded="true"] {
    border-color: rgb(255 255 255 / 38%);
    background: rgb(255 255 255 / 14%);
  }

  .muda-cp-sidebar .muda-cp-navigation {
    grid-column: auto;
    grid-row: auto;
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgb(255 255 255 / 12%);
  }

  .muda-cp-sidebar .muda-cp-navigation.show,
  .muda-cp-sidebar .muda-cp-navigation.collapsing {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
  }

  .muda-cp-sidebar .muda-cp-navigation.collapse:not(.show) {
    display: none;
  }

  .muda-cp-nav-link {
    width: 100%;
    margin: 0;
    padding: 0.62rem 0.68rem;
    font-size: 0.82rem;
  }

  .muda-cp-nav-count {
    margin-left: auto;
  }

  .muda-cp-sidebar .muda-cp-sidebar-logout-form {
    grid-column: auto;
    grid-row: auto;
    margin: 0;
  }

  .muda-cp-sidebar-logout {
    height: 100%;
    padding: 0.62rem 0.68rem;
    font-size: 0.82rem;
  }

  .muda-cp-kapy {
    display: none;
  }

  .muda-cp-completion-guidance {
    padding: 0.9rem;
  }

  .muda-cp-completion-guidance-head {
    grid-template-columns: 2.4rem minmax(0, 1fr);
  }

  .muda-cp-completion-guidance-head .btn {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
  }

  .muda-cp-completion-guidance-list {
    grid-template-columns: 1fr;
  }

  .muda-cp-topbar {
    display: flex;
    min-height: 3.75rem;
    padding: 0.45rem 0.8rem;
  }

  .muda-cp-topbar-title small {
    display: none;
  }

  .muda-cp-main {
    padding: 0.9rem;
  }

  .muda-cp-profile-hero {
    grid-template-columns: 1fr;
    padding: 1.1rem;
  }

  .muda-cp-profile-photo-wrap {
    grid-row: 1;
  }

  .muda-cp-profile-photo {
    width: 124px;
    height: 124px;
  }

  .muda-cp-profile-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .muda-cp-profile-actions .btn {
    justify-content: center;
  }

  .muda-cp-profile-hero h1 {
    font-size: 1.65rem;
    text-align: center;
  }

  .muda-cp-profile-status {
    margin-inline: auto;
  }

  .muda-cp-profile-contact {
    justify-content: center;
  }

  .muda-cp-profile-data-grid {
    grid-template-columns: 1fr;
  }

  .muda-cp-profile-data-grid > div:nth-child(odd),
  .muda-cp-profile-data-grid > div:nth-child(even) {
    padding-inline: 0;
  }

  .muda-cp-profile-section,
  .muda-cp-editor-section,
  .muda-cp-photo-upload-panel {
    padding: 1rem;
  }

  .muda-cp-editor-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .muda-cp-notification-head-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .muda-cp-notification-head-actions .btn,
  .muda-cp-notification-head-actions form {
    width: 100%;
  }

  .muda-cp-notification-head-actions .btn {
    justify-content: center;
  }

  .muda-cp-new-notification {
    align-items: stretch;
    flex-direction: column;
  }

  .muda-cp-new-notification .btn {
    justify-content: center;
    width: 100%;
  }

  .muda-cp-editor-completion {
    width: fit-content;
    text-align: left;
  }

  .muda-cp-photo-preview {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 1.1rem;
    text-align: center;
  }

  .muda-cp-photo-editor-image {
    width: 150px;
    height: 150px;
  }

  .muda-cp-photo-preview .muda-cp-photo-state,
  .muda-cp-photo-pending {
    margin-inline: auto;
  }

  .muda-cp-readonly-document {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .muda-cp-readonly-document-meta {
    grid-column: 2;
    justify-items: start;
  }
}

@media (max-width: 575.98px) {
  .muda-cp-topbar-title strong {
    font-size: 0.82rem;
  }

  .muda-cp-account-name,
  .muda-cp-account-button > i {
    display: none;
  }

  .muda-cp-account-button {
    width: 44px;
    padding: 0;
  }

  .muda-cp-account-button {
    justify-content: center;
  }

  .muda-cp-profile-actions {
    grid-template-columns: 1fr;
  }

  .muda-cp-completion {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .muda-cp-profile-contact {
    display: grid;
    justify-content: stretch;
  }

  .muda-cp-profile-contact span {
    justify-content: center;
  }

  .muda-cp-photo-upload-actions,
  .muda-cp-savebar {
    display: grid;
    grid-template-columns: 1fr;
  }

  .muda-cp-photo-upload-actions .btn,
  .muda-cp-savebar .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .muda-cp-nav-link,
  .muda-cp-kapy,
  .muda-cp-menu-toggle,
  .muda-cp-sidebar-logout,
  .muda-cp-topbar-notifications.is-updated {
    animation: none;
    transition: none;
  }
}