
.cp-portal { font-size: clamp(10.5px, 0.55rem + 0.35vw, 13.5px); line-height: 1.4; color: var(--app-text); background: var(--app-bg); }
.cp-head { display: flex; align-items: center; gap: 0.9em; padding: 0.8em 1.2em; color: var(--on-ink-soft); background: var(--ink); }
.cp-head b { font-weight: 700; color: var(--on-ink); }
.cp-head > span:nth-child(2) { padding-left: 0.9em; border-left: 1px solid var(--line-on-ink); }
.cp-user { display: flex; align-items: center; gap: 0.5em; margin-left: auto; color: var(--on-ink); }
.cp-user .k-avatar { width: 1.9em; height: 1.9em; font-size: 0.8em; }
.cp-nav { display: flex; gap: 0.2em; padding: 0 0.8em; overflow: hidden; white-space: nowrap; background: var(--card); border-bottom: 1px solid var(--app-border); }
.cp-nav span { padding: 0.8em 0.7em; font-weight: 600; color: var(--app-text-3); border-bottom: 2px solid transparent; }
.cp-nav span.on { color: var(--orange-text); border-bottom-color: var(--orange); }
.cp-body { display: grid; gap: 1em; padding: 1.2em; }
.cp-form { padding: 1em; border-radius: 0.9em; background: var(--card); border: 1px solid var(--app-border); }
.page-client-portal .k-table th small { font-weight: 500; color: var(--app-text-3); }
.page-client-portal .k-shell .k-table th small { display: block; font-size: 0.86em; }
.cp-hero { display: grid; gap: var(--space-4); align-items: stretch; }
.cp-hero > * { min-width: 0; }
.cp-hero > .mock-note { grid-column: 1 / -1; }
.cp-hero .cp-hero-portal { display: flex; flex-direction: column; }
.cp-hero .cp-portal { flex: 1; }
.cp-hero .cp-hero-staff { align-self: start; border-radius: var(--radius-card); border-color: var(--line); background: var(--card); box-shadow: var(--shadow); }
.cp-staff-title { margin-bottom: 0.9em; padding-bottom: 0.8em; border-bottom: 1px solid var(--app-border); font-family: var(--font-display); font-size: 0.8em; font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--app-text-3); }
.cp-prev-head { display: grid; gap: 0.1em; }
.cp-prev-head b { font-weight: 600; color: var(--app-text); }
.cp-prev-head span { font-size: 0.86em; color: var(--app-text-3); }
.cp-prev { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.35em; margin: 0.8em 0; }
.cp-prev li { padding: 0.5em 0.2em; border-radius: 0.5em; text-align: center; font-size: 0.78em; font-weight: 600; color: var(--orange-text); background: var(--orange-wash); box-shadow: inset 0 0 0 1px var(--orange-line); transition: background-color 0.4s, color 0.4s, box-shadow 0.4s; }
.js [data-step="3"] .cp-prev li, .js [data-step="4"] .cp-prev li, [data-steps]:not([data-step]) .cp-prev li { color: var(--green-text); background: var(--green-bg); box-shadow: none; }
.cp-prev-btns { display: flex; gap: 0.5em; }
.js [data-step="2"] .cp-prev-btns .k-btn--primary { animation: kPulse 1.2s ease-in-out infinite; }
.cp-switches { width: min(100%, 27rem); }
.cp-toggles { display: grid; gap: 0.45em; }
.cp-toggles li { display: flex; align-items: center; gap: 0.9em; padding: 0.65em 0.85em; border-radius: 0.75em; background: var(--card); border: 1px solid var(--app-border); }
.cp-toggles li.is-master { margin-bottom: 0.4em; box-shadow: inset 3px 0 0 var(--orange); }
.cp-toggles li > div { flex: 1; min-width: 0; display: grid; }
.cp-toggles b { font-weight: 600; color: var(--app-text); }
.cp-toggles li > div span { font-size: 0.84em; color: var(--app-text-3); }
.cp-users { display: grid; gap: var(--space-4); }
.cp-2fa { justify-self: end; width: min(100%, 19rem); margin-top: calc(var(--space-8) * -1); margin-right: var(--space-4); box-shadow: var(--shadow-lg); z-index: var(--z-raised); position: relative; }
@media (max-width: 40em) { .cp-2fa { margin-top: 0; margin-right: 0; justify-self: stretch; width: auto; } }
.cp-2fa-title { font-size: 0.76em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--app-text-3); }
.cp-2fa-code { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.4em; margin: 0.7em 0; }
.cp-2fa-code span { display: grid; place-content: center; aspect-ratio: 1 / 1.15; border-radius: 0.55em; font-family: var(--font-display); font-weight: 600; font-size: 1.4em; color: var(--app-text); background: var(--app-bg-alt); border: 1px solid var(--app-border); }
.cp-2fa-ok { font-weight: 600; font-size: 0.92em; color: var(--green-text); }
.cp-pip { display: inline-grid; place-content: center; width: 1.7em; height: 1.7em; margin-right: 0.55em; border-radius: 50%; font-size: 0.78em; font-weight: 700; vertical-align: 0.05em; }
.cp-pip--w { color: var(--blue-text); background: var(--blue-bg); }
.cp-pip--c { color: var(--purple-text); background: var(--purple-bg); }
.cp-pip--y { color: var(--orange-text); background: var(--orange-wash); }
.page-client-portal .cp-ts tbody th { white-space: nowrap; overflow: visible; text-overflow: clip; min-width: 7.5em; max-width: none; }
.cp-legend { flex-wrap: wrap; }
.cp-legend b.cp-pip { margin-right: 0.4em; }
.cp-chips { display: flex; flex-wrap: wrap; gap: 0.4em; margin-bottom: 0.9em; }
.cp-charts { display: grid; gap: 0.8em; }
@media (min-width: 40em) { .cp-charts { grid-template-columns: 1.2fr 1fr; } }
.page-client-portal .cp-bars { grid-template-columns: repeat(6, 1fr); height: 9em; }
.page-client-portal .cp-bars span:nth-child(n+6) i { background: linear-gradient(180deg, var(--orange-light), var(--orange-deep)); }
.cp-export { display: flex; justify-content: flex-end; margin-top: 0.9em; }
.cp-thread { display: grid; gap: 0.7em; }
.cp-msg { display: grid; gap: 0.2em; max-width: 88%; padding: 0.7em 0.9em; border-radius: 0.9em; border-bottom-left-radius: 0.25em; color: var(--app-text-2); background: var(--card); border: 1px solid var(--app-border); }
.cp-msg b { font-size: 0.84em; font-weight: 600; color: var(--app-text); }
.cp-msg time { font-size: 0.76em; color: var(--app-text-3); }
.cp-msg--us { justify-self: end; border-radius: 0.9em; border-bottom-right-radius: 0.25em; background: var(--orange-tint); border-color: var(--orange-line); }
.cp-target { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3em 0.7em; padding: 0.6em 0.9em; border-radius: 0.75em; background: var(--amber-bg); color: var(--amber-text); }
.cp-target span { font-size: 0.76em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.cp-target b { font-weight: 600; }
.cp-target em { margin-left: auto; font-style: normal; font-size: 0.84em; }
.cp-keys li > div span { font-variant-numeric: tabular-nums; }
.page-client-portal .cp-ts thead th:first-child { width: 30%; }
.page-client-portal .k-shell .k-table th, .page-client-portal .k-shell .k-table td { padding-inline: 0.7em; }
.page-client-portal .k-shell .k-table tbody th { white-space: normal; }
.page-client-portal .k-shell .k-table td:last-child, .page-client-portal .k-shell .k-table thead th:last-child { width: 1%; padding-right: 0.9em; }
.cp-prev-btns { flex-wrap: wrap; align-items: center; }
.cp-prev-hint { font-size: 0.8em; line-height: 1.3; color: var(--app-text-3); }
.cp-hero .cp-nav { gap: 0; padding-inline: 0.6em; }
.cp-hero .cp-nav span { padding-inline: 0.55em; }
.cp-prev-note { margin-bottom: 0.9em; }
.cp-hero .cp-hero-staff { align-self: stretch; }
.cp-hero .cp-form { grid-template-columns: 1fr 1fr; }
.cp-wait { align-self: center; }
.cp-prev-wrap { display: grid; gap: 0 1.4em; }
.cp-prev-wrap > * { min-width: 0; }
@media (min-width: 40em) {
  .cp-prev-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
  .cp-prev-wrap .cp-prev { margin-top: 0; }
  .cp-prev-wrap .cp-prev-note { margin-bottom: 0.7em; }
  .cp-hero .cp-form { grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.75fr) minmax(0, 1.25fr) minmax(0, 1.25fr); }
}
@media (min-width: 60em) { .fhero--j .cp-portal, .fhero--j .cp-hero-staff { font-size: 12px; } }
.fhero--j .cp-staff-title { margin-bottom: 0.7em; padding-bottom: 0.6em; }
.jp-screen .cp-users { max-width: 44rem; }
@media (min-width: 44em) {
  .jp-screen .cp-users { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); align-items: center; }
  .jp-screen .cp-2fa { justify-self: stretch; width: auto; margin: 0; }
}
.jp-screen .cp-switches { width: min(100%, 30rem); }
.jp-screen--plain .k-ba { width: 100%; }
.page-client-portal .fhero-facts li { flex: 1 1 42%; max-width: none; }
.cp-users .k-pick li > div { flex: 1; }
.cp-users .k-pick .a-swap > * { justify-self: end; }
@media (min-width: 40em) {
  .cp-users .k-pick li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 8.4em; }
  .cp-users .k-pick li > :last-child { justify-self: end; }
}
@media (max-width: 35.99em) { .js .page-client-portal .jx--side .jx-tabs > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
