/* ═══════════════════════════════════════════════════════════════
   光音社 · 登录角色动画 — 布局 / 缩放 / 眼睛按钮
   （4 个角色本体样式在 login-characters.js 内联，这里只管容器与排版）
   移植自 CareerCompass AnimatedCharacters，零依赖纯 DOM + CSS transform
   ═══════════════════════════════════════════════════════════════ */

/* 动画舞台：原始 550×400，用 transform:scale 适配不同容器 */
.lc-stage-wrap{width:100%;display:flex;justify-content:center;align-items:flex-end;overflow:hidden}
.lc-stage{position:relative;width:550px;height:400px;flex:none;transform-origin:bottom center}
.lc-stage-wrap.is-modal{height:264px}
.lc-stage-wrap.is-modal .lc-stage{transform:scale(.66)}
.lc-stage-wrap.is-card{height:206px}
.lc-stage-wrap.is-card .lc-stage{transform:scale(.50)}

/* 下载页登录卡里的动画横幅（柔和渐变底） */
.lc-card-banner{
  border-radius:16px;margin-bottom:18px;
  background:linear-gradient(160deg,#f3f0ff,#eaf0ff 55%,#fff1e9);
}

/* 下载页：登录前左栏动画面板 */
.dl-anim{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:24px;padding:36px 20px 28px;
  background:linear-gradient(160deg,#f3f0ff,#e9ecff 55%,#fef3ec);
  min-height:560px;
  animation:paneIn .5s cubic-bezier(.22,1,.36,1);
}
.dl-anim[hidden]{display:none}
.dl-anim-stage{flex:1;width:100%;display:flex;justify-content:center;align-items:flex-end}
.dl-anim-cap{
  margin-top:18px;font-size:15px;color:#6e6e73;letter-spacing:.3px;font-weight:500;
}

/* ═══ 登录态：左右合并成一张横向卡（对齐参考截图比例） ═══ */
.dl-wrap.login-mode{
  grid-template-columns:1.05fr .95fr;
  gap:0;
  max-width:1080px;
  border-radius:26px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:0 20px 60px rgba(0,0,0,.10);
  align-items:stretch;
  height:660px;
}
.dl-wrap.login-mode .dl-anim{
  border-radius:0;
  background:#ededed;
  box-shadow:none;
  min-height:0;
  padding:24px 24px 0;
  justify-content:flex-end;
}
.dl-wrap.login-mode .dl-card{
  border:0;border-radius:0;box-shadow:none;
  display:flex;flex-direction:column;justify-content:center;
  padding:40px 52px;overflow-y:auto;
}
.dl-wrap.login-mode .dl-anim-cap{display:none}
/* 角色铺满左栏：桌面大尺寸，窄屏逐级缩小防溢出 */
.dl-anim .lc-stage-wrap.is-card{height:auto;align-items:flex-end}
.dl-anim .lc-stage-wrap.is-card .lc-stage{transform:scale(1)}
@media(max-width:1180px){
  .dl-anim .lc-stage-wrap.is-card .lc-stage{transform:scale(.86)}
}
@media(max-width:1040px){
  .dl-anim .lc-stage-wrap.is-card .lc-stage{transform:scale(.74)}
}
@media(max-width:960px){
  .dl-wrap.login-mode{grid-template-columns:1fr;height:auto;max-width:460px}
  .dl-wrap.login-mode .dl-anim{padding:32px 20px 0;min-height:300px}
  .dl-wrap.login-mode .dl-card{padding:32px 28px;overflow-y:visible}
  .dl-anim .lc-stage-wrap.is-card .lc-stage{transform:scale(.78)}
}
@media(max-width:560px){
  .dl-anim .lc-stage-wrap.is-card .lc-stage{transform:scale(.6)}
}

/* 密码框包裹 + 眼睛按钮（显示/隐藏密码，驱动“偷看”动画） */
.lc-pass-wrap{position:relative;display:flex;align-items:center}
.lc-pass-wrap > input{flex:1;width:100%;padding-right:42px !important}
.lc-eye{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  border:0;background:transparent;cursor:pointer;color:#86868b;padding:0;
  transition:color .15s ease;
}
.lc-eye:hover{color:#1d1d1f}
.lc-eye .lc-eye-off{display:none}
.lc-eye.is-on .lc-eye-open{display:none}
.lc-eye.is-on .lc-eye-off{display:block}

/* ═══ 积分商城登录弹窗：两栏（左动画 / 右表单），对齐下载页 52:48 灰底比例 ═══ */
.sm-card.sm-card-login{max-width:820px;flex-direction:row;align-items:stretch}
.sm-card-login .lc-panel{
  position:relative;flex:0 0 52%;
  background:#ededed;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  overflow:hidden;
}
.sm-card-login .lc-panel-stage{width:100%;display:flex;justify-content:center;align-items:flex-end}
.sm-card-login .lc-panel-brand{
  position:absolute;top:22px;left:24px;z-index:5;
  font-size:14px;font-weight:600;color:#1d1d1f;letter-spacing:.3px;
}
.sm-card-login .lc-formcol{flex:1;display:flex;flex-direction:column;min-width:0;justify-content:center}
/* 弹窗角色放大铺满左栏 */
.sm-card-login .lc-stage-wrap.is-modal{height:auto;align-items:flex-end}
.sm-card-login .lc-stage-wrap.is-modal .lc-stage{transform:scale(.82)}

/* 弹窗内登录/注册切换链接 + 角色选择 + 成功提示 */
.lm-link{color:var(--sp-blue,#0066cc);text-decoration:none;font-weight:500}
.lm-link:hover{text-decoration:underline}
.lc-role{display:flex;gap:8px}
.lc-role-btn{
  flex:1;padding:9px 6px;cursor:pointer;
  background:#fff;border:1px solid var(--sp-border,#d2d2d7);
  border-radius:10px;color:var(--sp-text-2,#424245);
  font-size:13px;font-family:inherit;
  transition:.16s cubic-bezier(.4,0,.2,1);
}
.lc-role-btn:hover{border-color:var(--sp-blue,#0066cc);color:var(--sp-text,#1d1d1f)}
.lc-role-btn.active{
  background:var(--sp-blue,#0066cc);border-color:var(--sp-blue,#0066cc);color:#fff;font-weight:500;
}
.lm-ok{
  margin:0;padding:9px 12px;border-radius:10px;font-size:13px;line-height:1.5;
  background:#eafaf0;color:#0a7d34;border:1px solid #bfe8cd;
}
.lm-ok[hidden]{display:none}

@media(max-width:640px){
  .sm-card.sm-card-login{flex-direction:column;max-width:420px}
  .sm-card-login .lc-panel{flex:none;min-height:200px}
  .sm-card-login .lc-stage-wrap.is-modal{height:auto}
  .sm-card-login .lc-stage-wrap.is-modal .lc-stage{transform:scale(.5)}
}