/* Shared customer activation and password controls use the existing APP login theme. */
.activation-main { width: min(100%, 420px); margin: 28px auto 48px; }
.activation-main h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -.03em; margin-bottom: 16px; }
.activation-main p { line-height: 1.6; }
.activation-security { color: #123cff; font-size: .8125rem; font-weight: 700; margin: 16px 0 8px; }
.activation-shield { width: 64px; height: 72px; color: #123cff; }
.activation-shield svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.shield-outline { fill: #f1f5ff; stroke-dasharray: 190; animation: shield-trace 1.2s ease-out both; }
@keyframes shield-trace { from { stroke-dashoffset: 190; } to { stroke-dashoffset: 0; } }
.activation-welcome { font-size: 1rem; margin-bottom: 12px; }
.activation-identity { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; margin-bottom: 22px; border-top: 1px solid #e1e7f0; border-bottom: 1px solid #e1e7f0; overflow-wrap: anywhere; }
.activation-identity span { color: #526079; font-size: .875rem; }
.activation-main .form-label { font-weight: 600; font-size: .875rem; }
.activation-main .form-control { min-height: 48px; border-color: #bdc9dc; }
.activation-main .form-control:focus { border-color: #123cff; box-shadow: 0 0 0 3px #123cff1a; }
.activation-main .kapy-password-group { border: 1px solid #bdc9dc; border-radius: 8px; overflow: clip; }
.activation-main .kapy-password-group:focus-within { border-color: #123cff; box-shadow: 0 0 0 3px #123cff1a; }
.activation-main .kapy-password-group .form-control { border: 0; box-shadow: none; }
.activation-main .kapy-password-toggle { border: 0; border-radius: 0; min-width: 48px; min-height: 48px; color: #526079; background: #fff; }
.activation-main .kapy-password-toggle:hover { background: #edf2fc; color: #123cff; }
.activation-main .kapy-password-toggle:focus-visible { outline: 2px solid #123cff; outline-offset: -4px; }
.kapy-password-icon { width: 21px; height: 21px; }
.activation-main .form-text, .activation-footer { color: #526079; font-size: .8125rem; }
.activation-footer { margin-top: 28px; padding-top: 18px; border-top: 1px solid #e1e7f0; }
.password-strength { margin: -4px 0 10px; }
.strength-heading { display: flex; justify-content: space-between; gap: 12px; font-size: .8125rem; margin-bottom: 8px; }
.strength-track { height: 5px; border-radius: 8px; background: #e8edf5; overflow: hidden; }
.strength-track span { display: block; height: 100%; width: 0; border-radius: inherit; transition: width 180ms ease-out, background-color 180ms ease-out; }
.password-strength[data-level='1'] [data-strength-fill] { width: 33.33%; background: #c52c3b; }
.password-strength[data-level='2'] [data-strength-fill] { width: 66.66%; background: #aa6500; }
.password-strength[data-level='3'] [data-strength-fill] { width: 100%; background: #16804d; }
.password-strength[data-level='1'] strong, .password-match[data-matched='false'] { color: #b52333; }
.password-strength[data-level='2'] strong { color: #935700; }
.password-strength[data-level='3'] strong, .password-match[data-matched='true'] { color: #137343; }
.password-requirement { margin-top: 0; margin-bottom: 22px; }
.password-match { margin-top: -8px; margin-bottom: 18px; }
.activation-main .kapy-primary-button { min-height: 48px; background: #123cff; border-color: #123cff; color: #fff; font-weight: 600; border-radius: 8px; }
.activation-main .kapy-primary-button:hover { background: #0b2ddb; border-color: #0b2ddb; }
@media (max-width: 575.98px) { .activation-main { margin-top: 16px; } .activation-main h1 { font-size: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { .shield-outline { animation: none; } .strength-track span { transition: none; } }

/* Keep account setup comfortable on a small laptop without making controls smaller. */
.customer-activation .login-page { padding-top: 16px; }
.customer-activation .login-header { margin-bottom: 12px; }
.activation-main { margin-top: 8px; margin-bottom: 28px; }
.activation-shield { width: 42px; height: 48px; }
.activation-security { margin-top: 10px; }
.activation-main h1 { margin-bottom: 10px; }
.activation-welcome { margin-bottom: 8px; }
.activation-identity { padding: 10px 0; margin-bottom: 16px; }
.password-requirement { margin-bottom: 16px; }
.activation-footer { margin-top: 20px; padding-top: 12px; }

/* The verified welcome panel and password form share one compact laptop layout. */
.activation-password-layout {
  width: min(100%, 1000px);
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  column-gap: 72px;
  margin-block: 12px 24px;
}
.activation-password-layout .activation-intro {
  position: relative;
  min-width: 0;
  padding: 30px 36px 32px;
  border-radius: 16px;
  color: #f5f8ff;
  background: #111e38;
}
.welcome-status { display: flex; align-items: center; gap: 8px; color: #a5f3d1; font-size: .8125rem; font-weight: 600; }
.welcome-status svg { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.welcome-status circle { fill: #1c3e3e; stroke: none; }
.welcome-shield { width: 196px; height: 170px; margin: 18px auto 14px; }
.welcome-shield svg { width: 100%; height: 100%; overflow: visible; }
.welcome-orbit { stroke: #81a7f5; stroke-opacity: .14; stroke-width: 1; }
.welcome-orbit-detail { stroke: #81a7f5; stroke-opacity: .4; stroke-width: 1; stroke-linecap: round; }
.welcome-shield-edge { stroke-dasharray: 390; }
@keyframes welcome-shield-trace { from { stroke-dashoffset: 390; } to { stroke-dashoffset: 0; } }
.activation-password-layout .activation-welcome { margin: 0; overflow-wrap: anywhere; letter-spacing: -.025em; line-height: 1.25; }
.welcome-greeting { display: block; margin-bottom: 4px; color: #bacceb; font-size: 1.125rem; font-weight: 500; letter-spacing: 0; }
.welcome-name { display: block; font-size: 2rem; font-weight: 700; }
.activation-password-layout .welcome-description { max-width: 32ch; margin: 12px 0 0; color: #bacceb; font-size: .875rem; line-height: 1.6; }
.activation-password-layout .welcome-identity {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin: 24px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid #34425c;
  border-bottom: 0;
}
.welcome-company-icon { width: 24px; height: 24px; flex-shrink: 0; stroke: #91aff0; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.welcome-company-copy { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.welcome-company-copy strong { font-size: .875rem; font-weight: 600; }
.activation-password-layout .welcome-company-copy span { color: #bacceb; font-size: .8125rem; }
.activation-password-layout .activation-form-panel { min-width: 0; }
.activation-password-layout h1 { margin-bottom: 24px; }
.activation-password-layout .activation-footer { margin-bottom: 0; }
@media (min-width: 768px) and (max-height: 650px) {
  .activation-password-layout { margin-block: 0 8px; }
  .activation-password-layout .activation-intro { padding-block: 24px; }
  .welcome-shield { width: 140px; height: 122px; margin-block: 12px; }
  .welcome-name { font-size: 1.75rem; }
  .activation-password-layout .welcome-identity { margin-top: 18px; padding-top: 14px; }
  .activation-password-layout h1 { margin-bottom: 16px; }
  .activation-password-layout .mb-3 { margin-bottom: 14px !important; }
  .activation-password-layout .form-label { margin-bottom: 7px; }
  .activation-password-layout .strength-heading { margin-bottom: 6px; }
  .activation-password-layout [data-strength-tip] { margin-bottom: 6px; }
  .activation-password-layout .password-requirement { margin-bottom: 10px; }
  .activation-password-layout .password-match { margin-bottom: 10px; }
  .activation-password-layout .activation-footer { margin-top: 12px; padding-top: 8px; }
}
@media (max-width: 991.98px) {
  .activation-password-layout { column-gap: 36px; }
  .activation-password-layout .activation-intro { padding-inline: 28px; }
  .welcome-name { font-size: 1.75rem; }
}
@media (max-width: 767.98px) {
  .activation-password-layout { display: block; max-width: 420px; margin-top: 4px; margin-bottom: 16px; }
  .activation-password-layout .activation-intro {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 12px;
    padding: 16px;
    margin-bottom: 20px;
  }
  .welcome-shield { width: 52px; height: 46px; margin: 0 0 0 -5px; grid-column: 1; grid-row: 1 / 3; }
  .welcome-status { grid-column: 2; margin-bottom: 6px; font-size: .75rem; }
  .activation-password-layout .activation-welcome { grid-column: 2; line-height: 1.3; }
  .welcome-greeting, .welcome-name { display: inline; font-size: 1rem; }
  .welcome-greeting { margin-right: 4px; }
  .activation-password-layout .welcome-description { display: none; }
  .activation-password-layout .welcome-identity { grid-column: 1 / -1; margin-top: 12px; padding-top: 10px; }
  .welcome-company-icon { width: 20px; height: 20px; }
  .welcome-company-copy { gap: 2px; }
  .activation-password-layout h1 { margin-bottom: 20px; }
}
/* Motion starts only after the existing pause control is available. */
.activation-password-layout .login-motion-toggle { color: #bacceb; top: 10px; right: 10px; bottom: auto; }
.activation-password-layout .login-motion-toggle:hover { color: #f5f8ff; background: #233554; }
.welcome-status { padding-right: 32px; }
@media (prefers-reduced-motion: no-preference) {
  .motion-ready .welcome-shield svg { transform-origin: 50% 55%; animation: welcome-shield-breathe 7s ease-in-out infinite; }
  .motion-ready .welcome-shield-edge { animation: welcome-shield-trace 3.2s ease-out both, welcome-shield-light 7s ease-in-out 3.2s infinite; }
  .motion-ready .welcome-orbit-motion { transform-origin: 112px 95px; animation: welcome-orbit-turn 18s linear infinite; }
  .motion-paused .welcome-shield * { animation-play-state: paused !important; }
}
@keyframes welcome-shield-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.02); }
}
@keyframes welcome-shield-light {
  0%, 100% { stroke-opacity: .55; }
  50% { stroke-opacity: 1; }
}
@keyframes welcome-orbit-turn { to { transform: rotate(360deg); } }
@media (max-width: 767.98px) {
  .activation-password-layout .login-motion-toggle { width: 32px; height: 32px; padding: 8px; top: 8px; right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-shield svg, .welcome-shield-edge, .welcome-orbit-motion { animation: none; }
}