/* M21 — a team introduction, not an organisation diagram. Brand illustration only;
   no live activity, business records or implied connected services.
   团队展示，不是组织图；不表示实时工作、业务记录或服务已接入。 */
.i5 .login.login--m21 {
  --login-max: 1320px;
  background: var(--mos-canvas);
}
.i5 .login--m21 .login__masthead { padding: 28px 40px 20px; }
.i5 .login--m21 .login__workspace {
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr);
  gap: clamp(48px, 6vw, 88px); padding: 24px 40px 48px;
}
.i5 .login--m21 .login__intro-content .login__eyebrow {
  font: 500 13px/20px var(--mos-font-ui); letter-spacing: .12em;
  margin-bottom: 16px; color: var(--mos-text-secondary);
}
.i5 .login--m21 .login__headline {
  font: 600 clamp(34px, 3.05vw, 44px)/1.38 var(--mos-font-ui);
  letter-spacing: -.025em; max-width: none;
}
.i5 .login--m21 .login__intro-content .login__promise {
  font: 400 14px/24px var(--mos-font-ui); max-width: 480px; margin-top: 18px;
}
.i5 .login--m21 .login__panel {
  max-width: 430px; padding: 34px 32px 28px; gap: 26px;
  border-radius: 14px; box-shadow: 0 8px 30px color-mix(in srgb, var(--mos-text) 3%, transparent);
}
.i5 .login--m21 .login__panel h1 { font: 600 27px/38px var(--mos-font-ui); letter-spacing: -.02em; }
.i5 .login--m21 .login__heading .login__eyebrow { color: var(--mos-text-muted); letter-spacing: .04em; margin-bottom: 10px; }
.i5 .login--m21 .login__form { gap: 18px; }
.i5 .login--m21 .login__form input { background: var(--mos-surface); }
.i5 .login--m21 .login__assistance { padding-top: 18px; }
.i5 .login--m21 .login__page-footer { padding-bottom: 20px; }

/* The shared stage gives these familiar portraits one place to work together. */
.i5 .login-ensemble { margin: 30px 0 0; max-width: 620px; }
.i5 .login-ensemble > figcaption {
  font: 500 13px/20px var(--mos-font-ui); color: var(--mos-text-secondary);
}
.i5 .login-ensemble__stage { position: relative; height: 292px; isolation: isolate; }
.i5 .login-ensemble__stage::before {
  content: ""; position: absolute; z-index: -1; left: 7%; right: 7%; top: 30px; height: 190px;
  border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--mos-accent-soft) 80%, transparent), transparent 70%);
}
.i5 .login-ensemble__setting {
  position: absolute; inset: 0; width: 100%; height: 100%; color: var(--mos-border); opacity: .72;
}
.i5 .login-ensemble__people {
  position: relative; display: grid; grid-template-columns: 1fr 1.3fr 1fr 1fr;
  gap: 6px; align-items: start; padding: 22px 6px 0;
}
.i5 :is(.login-ensemble__lead, .login-ensemble__member) {
  display: flex; min-width: 0; flex-direction: column; align-items: center; text-align: center;
}
.i5 .login-ensemble__portrait {
  position: relative; display: flex; justify-content: center; align-items: end;
  width: 100%; height: 154px;
}
.i5 .login-ensemble__portrait::after {
  content: ""; position: absolute; bottom: 3px; width: 66%; height: 9px; z-index: -1;
  border-radius: 50%; background: color-mix(in srgb, var(--mos-text) 9%, transparent); filter: blur(6px);
}
.i5 .login-ensemble__portrait img {
  display: block; width: min(100%, 116px); height: auto; aspect-ratio: 1; object-fit: contain;
}
.i5 .login-ensemble__lead .login-ensemble__portrait img { width: min(100%, 158px); }
.i5 :is(.login-ensemble__lead, .login-ensemble__member) > strong {
  font: 600 14px/21px var(--mos-font-ui); margin-top: 8px; color: var(--mos-text);
}
.i5 :is(.login-ensemble__lead, .login-ensemble__member) > span {
  font: 400 12px/18px var(--mos-font-ui); margin-top: 3px; color: var(--mos-text-secondary);
}
.i5 .login-ensemble__assistants {
  display: flex; align-items: center; gap: 14px; padding-top: 16px;
  border-top: 1px solid var(--mos-border);
}
.i5 .login-ensemble__assistant-faces { display: flex; padding-left: 6px; flex: none; }
.i5 .login-ensemble__assistant-faces img {
  display: block; width: 36px; height: 36px; object-fit: contain; margin-left: -6px;
  background: var(--mos-surface); border: 2px solid var(--mos-canvas); border-radius: 50%;
}
.i5 .login-ensemble__assistants p { margin: 0; display: grid; gap: 2px; }
.i5 .login-ensemble__assistants strong { font: 500 13px/20px var(--mos-font-ui); color: var(--mos-text); }
.i5 .login-ensemble__assistants p > span { font: 400 12px/20px var(--mos-font-ui); color: var(--mos-text-secondary); }

@media (min-width: 1600px) {
  .i5 .login--m21 .login__workspace { padding-block: 36px 56px; }
}
@media (max-width: 1100px) and (min-width: 801px) {
  .i5 .login--m21 .login__workspace { grid-template-columns: minmax(0, 1fr) minmax(330px, .85fr); gap: 36px; padding-inline: 28px; }
  .i5 .login--m21 .login__masthead { padding-inline: 28px; }
  .i5 .login--m21 .login__headline { font-size: 34px; }
  .i5 .login--m21 .login__panel { padding: 28px 24px; }
  .i5 .login-ensemble__stage { height: 252px; }
  .i5 .login-ensemble__portrait { height: 120px; }
  .i5 .login-ensemble__lead .login-ensemble__portrait img { width: 130px; }
  .i5 .login-ensemble__people { padding-top: 18px; gap: 3px; }
}
@media (max-width: 800px) {
  .i5 .login.login--m21 { background: var(--mos-surface); }
  .i5 .login--m21 .login__masthead { padding: 14px 24px 8px; }
  .i5 .login--m21 .login__workspace { display: block; padding: 0 24px 24px; }
  .i5 .login--m21 .login__panel {
    max-width: none; margin: 0; padding: 22px 0 0; border: 0; border-top: 1px solid var(--mos-border);
    border-radius: 0; background: transparent; box-shadow: none; gap: 22px;
  }
  .i5 .login--m21 .login__intro-content .login__mobile-line { font: 400 17px/24px var(--mos-font-ui); }
  .i5 .login-ensemble { display: none; }
  .i5 .login--m21 .login__panel h1 { font-size: 26px; line-height: 36px; }
  .i5 .login--m21 .login__form input { font-size: 16px; }
  .i5 .login--m21 .login__page-footer { padding: 12px 24px 20px; }
}
@media (max-width: 360px) {
  .i5 .login--m21 .login__masthead, .i5 .login--m21 .login__workspace, .i5 .login--m21 .login__page-footer { padding-inline: 20px; }
}