/* 出镜达人登录封面：CJ 是产品图标，人物素材不参与品牌标识。 */
body:not(.account-ready) .topbar { display: none; }
body:not(.account-ready) .shell { width: 100%; min-height: 100vh; }
body:not(.account-ready) { background: radial-gradient(circle at 50% 20%, rgba(109,74,255,.16), transparent 34%), linear-gradient(180deg,#0b0e17 0%,#080b12 100%); }
body:not(.account-ready) .ambient-a { width: 500px; height: 500px; right: calc(50% - 250px); top: -320px; background: #735cff; opacity: .18; }
body:not(.account-ready) .ambient-b { width: 360px; height: 360px; left: calc(50% - 180px); bottom: -300px; background: #344cff; opacity: .08; }
body:has(#accountView:not(.hidden)) .topbar { display: flex; }
body:has(#accountView:not(.hidden)) .shell { width: min(1240px, calc(100% - 48px)); min-height: auto; }
body:has(#accountView:not(.hidden)) { background: radial-gradient(circle at 50% -20%,#1d1642 0,transparent 42%),var(--bg); }
.login-layout { width: min(520px, calc(100% - 32px)); min-height: 100vh; margin: 0 auto; padding: 58px 0; display: flex; flex-direction: column; justify-content: center; gap: 34px; }
.login-brand { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cj-mark { position: relative; width: 84px; height: 84px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 25px; background: linear-gradient(145deg,#9b8cff 0%,#6d4aff 52%,#4d35c8 100%); box-shadow: 0 20px 60px rgba(85,60,220,.32), inset 0 1px rgba(255,255,255,.32); color: #fff; font-size: 25px; font-weight: 800; letter-spacing: -.06em; }
.cj-mark::after { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(255,255,255,.13); border-radius: 19px; pointer-events: none; }
.login-brand h1 { margin: 22px 0 0; font-size: 44px; line-height: 1.1; letter-spacing: .08em; font-weight: 720; }
.login-brand p { margin: 12px 0 0; color: #939bad; font-size: 15px; letter-spacing: .26em; text-indent: .26em; }
.login-card { width: 100%; padding: 30px 32px 32px; gap: 18px; background: rgba(16,20,31,.78); border-color: rgba(255,255,255,.095); border-radius: 20px; box-shadow: 0 26px 70px rgba(0,0,0,.32); backdrop-filter: blur(18px); }
.login-heading { text-align: center; margin-bottom: 2px; }
.login-heading h2 { font-size: 21px; letter-spacing: .02em; }
.login-heading p { margin: 7px 0 0; color: #8992a6; font-size: 12px; }
.login-card label { gap: 7px; color: #d5dae5; font-size: 12px; font-weight: 600; }
.login-card input { height: 52px; border-radius: 11px; background: rgba(7,10,17,.72); border-color: rgba(255,255,255,.1); }
.login-card .field-row { grid-template-columns: 1fr 120px; }
.login-card .secondary { background: #1b2131; color: #e4e7ef; border-color: rgba(255,255,255,.09); }
.login-card .primary { height: 52px; margin-top: 2px; border-radius: 11px; background: linear-gradient(135deg,#8b79ff,#6752ed); }
.login-card .hint { min-height: 18px; text-align: left; }
.trial-state { width: 100%; padding: 30px 32px 32px; display: grid; justify-items: center; gap: 18px; text-align: center; background: rgba(16,20,31,.82); }
.trial-state h2 { margin: 0; font-size: 21px; }
.trial-state p { margin: 7px 0 0; color: #a8b0c1; font-size: 13px; }
.trial-check { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: rgba(52,211,153,.12); color: #5ee0ac; }
.trial-check svg { width: 25px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.trial-state .ghost { border: 1px solid rgba(255,255,255,.1); }
.brand-mark { width: 38px; height: 38px; font-size: 11px; letter-spacing: -.04em; }
@media (max-width: 600px) {
  .login-layout { padding: 38px 0; gap: 28px; }
  .cj-mark { width: 72px; height: 72px; border-radius: 22px; }
  .login-brand h1 { font-size: 36px; }
  .login-card { padding: 25px 20px 26px; }
  .trial-state { padding: 25px 20px 26px; }
  .login-card .field-row { grid-template-columns: 1fr 112px; }
}
@media (prefers-reduced-motion: reduce) {
  .cj-mark, .login-card { transition: none; }
}