/* ═══════════════════════════════════════════════════════════════
   光音社 · 全站统一登录/注册浮窗（自包含，零依赖 shop.css）
   配合 auth-modal.js 使用；角色动画依赖 login-characters.js/.css
   ═══════════════════════════════════════════════════════════════ */
.am-modal{
  position:fixed;inset:0;z-index:3000;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;
}
.am-modal[hidden]{display:none}
.am-mask{
  position:absolute;inset:0;background:rgba(0,0,0,.45);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  animation:amFade .2s ease;
}
@keyframes amFade{from{opacity:0}to{opacity:1}}

.am-card{
  position:relative;width:100%;max-width:820px;
  background:#fff;border-radius:24px;overflow:hidden;
  display:flex;flex-direction:row;align-items:stretch;
  box-shadow:0 30px 80px rgba(0,0,0,.18);
  animation:amPop .25s cubic-bezier(.4,0,.2,1);
  max-height:90vh;
}
@keyframes amPop{from{transform:scale(.96) translateY(10px);opacity:0}to{transform:none;opacity:1}}

/* 左：动画灰底面板（对齐下载页 52:48） */
.am-panel{
  position:relative;flex:0 0 52%;
  background:#ededed;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  overflow:hidden;
}
.am-panel-brand{
  position:absolute;top:22px;left:24px;z-index:5;
  font-size:14px;font-weight:600;color:#1d1d1f;letter-spacing:.3px;
}
.am-panel-stage{width:100%;display:flex;justify-content:center;align-items:flex-end}
.am-panel-stage .lc-stage-wrap.is-modal{height:auto;align-items:flex-end}
.am-panel-stage .lc-stage-wrap.is-modal .lc-stage{transform:scale(.82)}

/* 右：表单列 */
.am-formcol{flex:1;display:flex;flex-direction:column;min-width:0;justify-content:center;overflow-y:auto}
.am-close{
  position:absolute;top:14px;right:14px;z-index:6;
  width:30px;height:30px;border-radius:50%;
  background:#f5f5f7;border:0;color:#424245;
  font-size:20px;line-height:1;cursor:pointer;transition:.15s ease;
}
.am-close:hover{background:#e3e3e8;color:#1d1d1f}

.am-head{padding:30px 36px 0}
.am-tag{
  display:inline-block;padding:3px 10px;border-radius:50px;
  background:#f5f5f7;color:#424245;font-size:11px;font-weight:500;
  letter-spacing:1px;margin-bottom:8px;
}
.am-head h3{font-size:22px;font-weight:600;color:#1d1d1f;letter-spacing:-.3px;margin:0}
.am-body{padding:20px 36px 4px}

.am-form{display:flex;flex-direction:column;gap:16px}
.am-field{display:flex;flex-direction:column;gap:8px}
.am-field label{font-size:12px;color:#6e6e73;font-weight:500;letter-spacing:.3px}
.am-field input{
  padding:11px 14px;border-radius:10px;
  background:#fff;border:1px solid #d2d2d7;color:#1d1d1f;
  font-size:14px;font-family:inherit;outline:none;
  transition:.15s ease;
}
.am-field input:focus{border-color:#0066cc;box-shadow:0 0 0 3px rgba(0,102,204,.12)}
.am-field input::placeholder{color:#86868b}

.am-foot{display:flex;gap:8px;padding:18px 36px 30px}
.am-btn{
  flex:1;padding:12px;border-radius:980px;
  font-size:14px;font-weight:400;cursor:pointer;font-family:inherit;
  border:1px solid #d2d2d7;background:#fff;color:#1d1d1f;
  transition:.15s ease;
}
.am-btn-ghost:hover{background:#f5f5f7}
.am-btn-primary{background:#0066cc;border-color:#0066cc;color:#fff}
.am-btn-primary:hover{background:#0077ed;border-color:#0077ed}
.am-btn-primary:disabled{opacity:.45;cursor:not-allowed}

.am-err{margin:0;padding:9px 12px;border-radius:10px;font-size:13px;background:#fff1f0;color:#bf2600;border:1px solid #ffd6d0}
.am-err[hidden]{display:none}
.am-ok{margin:0;padding:9px 12px;border-radius:10px;font-size:13px;line-height:1.5;background:#eafaf0;color:#0a7d34;border:1px solid #bfe8cd}
.am-ok[hidden]{display:none}
.am-tip{margin:0;font-size:12px;line-height:1.6;color:#86868b}
.am-link{color:#0066cc;text-decoration:none;font-weight:500;cursor:pointer}
.am-link:hover{text-decoration:underline}

/* 角色选择器 */
.am-role{display:flex;gap:8px}
.am-role-btn{
  flex:1;padding:9px 6px;cursor:pointer;
  background:#fff;border:1px solid #d2d2d7;border-radius:10px;
  color:#424245;font-size:13px;font-family:inherit;
  transition:.16s cubic-bezier(.4,0,.2,1);
}
.am-role-btn:hover{border-color:#0066cc;color:#1d1d1f}
.am-role-btn.active{background:#0066cc;border-color:#0066cc;color:#fff;font-weight:500}

/* 密码框 + 眼睛 */
.am-pass{position:relative;display:flex;align-items:center}
.am-pass > input{flex:1;width:100%;padding-right:42px !important}
.am-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;
}
.am-eye:hover{color:#1d1d1f}
.am-eye .am-eye-off{display:none}
.am-eye.is-on .am-eye-open{display:none}
.am-eye.is-on .am-eye-off{display:block}

@media(max-width:640px){
  .am-card{flex-direction:column;max-width:420px}
  .am-panel{flex:none;min-height:190px}
  .am-panel-stage .lc-stage-wrap.is-modal .lc-stage{transform:scale(.5)}
  .am-head{padding:26px 24px 0}
  .am-body{padding:18px 24px 4px}
  .am-foot{padding:16px 24px 24px}
}

/* ── 导航栏已登录头像（信息页/下载页用，shop 页由 shop.css 提供同名样式）── */
.nav-avatar{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  border:1px solid #d2d2d7;cursor:pointer;padding:0;
  margin-right:12px;overflow:hidden;position:relative;
  background:linear-gradient(160deg,#e8f1fa,#cfe2f3);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:500;color:#1d1d1f;
  transition:.2s cubic-bezier(.4,0,.2,1);
}
.nav-avatar[hidden]{display:none}
/* 首屏防闪：has-session 由 head 内联脚本同步设置，已登录则首帧就藏 CTA、露头像 */
html.has-session .nav-cta{display:none!important}
html.has-session .nav-avatar{display:flex}
/* boot 头像内容：缓存的照片/首字母在首帧前直接渲染，避免「占位♪→真实头像」的二次闪 */
html.av-img .nav-avatar{background-image:var(--gy-av-img);background-size:cover;background-position:center}
html.av-img .nav-avatar>span{visibility:hidden}
html.av-ini .nav-avatar>span{font-size:0}
html.av-ini .nav-avatar>span::after{content:var(--gy-av-ini);font-size:16px;line-height:1}
.nav-avatar:hover{box-shadow:0 0 0 3px rgba(0,102,204,.15)}
.nav-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nav-avatar span{line-height:1}

/* ═══ 头像下拉菜单（hover 展开：个人资料 / 订单管理 / 安全管理 / 退出登录）═══ */
.am-dd{
  position:fixed;z-index:3200;width:248px;
  background:#fff;border:1px solid #e3e3e8;border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.16);
  padding:14px;opacity:0;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease;
  font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;
}
.am-dd[hidden]{display:none}
.am-dd.is-open{opacity:1;transform:none}
.am-dd-head{display:flex;align-items:center;gap:10px;padding:2px 4px 12px;border-bottom:1px solid #f0f0f2}
.am-dd-av{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;overflow:hidden;position:relative;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#e8f1fa,#cfe2f3);
  color:#1d1d1f;font-size:17px;font-weight:600;
}
.am-dd-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.am-dd-id{min-width:0;display:flex;flex-direction:column;gap:2px}
.am-dd-id strong{font-size:15px;font-weight:600;color:#1d1d1f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-dd-id em{font-size:12px;color:#86868b;font-style:normal}
.am-dd-pts{
  margin:12px 0;padding:12px;border-radius:12px;text-align:center;
  background:linear-gradient(135deg,#f5f9ff,#eef4fb);border:1px solid #e6eefc;
}
.am-dd-pts b{display:block;font-size:22px;font-weight:700;color:#0066cc;font-variant-numeric:tabular-nums}
.am-dd-pts span{font-size:11px;color:#86868b}
.am-dd-menu{display:flex;flex-direction:column;gap:2px}
.am-dd-item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:10px 10px;border:0;border-radius:10px;background:transparent;
  cursor:pointer;font-family:inherit;font-size:14px;color:#1d1d1f;text-align:left;
  transition:background .14s ease;
}
.am-dd-item:hover{background:#f5f5f7}
.am-dd-item i{font-style:normal;font-size:16px;width:20px;text-align:center;flex-shrink:0}
.am-dd-item span{flex:1}
.am-dd-item em{font-style:normal;color:#c7c7cc;font-size:16px}
.am-dd-item.danger{color:#bf2600}
.am-dd-item.danger:hover{background:#fff1f0}

/* ═══ 账户子浮窗（个人资料 / 订单管理 / 安全管理 共用）═══ */
.am-acct{
  position:fixed;inset:0;z-index:3100;display:flex;align-items:center;justify-content:center;padding:24px;
  font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;
}
.am-acct[hidden]{display:none}
.am-acct-mask{position:absolute;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:amFade .2s ease}
.am-acct-card{
  position:relative;width:100%;max-width:440px;max-height:90vh;overflow-y:auto;
  background:#fff;border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.18);
  animation:amPop .25s cubic-bezier(.4,0,.2,1);
}
.am-acct-head{padding:26px 28px 16px;border-bottom:1px solid #f0f0f2}
.am-acct-head h3{font-size:21px;font-weight:600;color:#1d1d1f;letter-spacing:-.3px;margin:0}
.am-acct-body{padding:22px 28px 26px}
.am-acct-foot{display:flex;gap:8px;margin-top:20px}

/* 个人资料 */
.am-ac-top{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.am-ac-av{
  width:64px;height:64px;border-radius:50%;flex-shrink:0;position:relative;overflow:visible;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#e8f1fa,#cfe2f3);color:#1d1d1f;font-size:26px;font-weight:600;
}
.am-ac-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.am-ac-av-edit{
  position:absolute;right:-2px;bottom:-2px;width:24px;height:24px;border-radius:50%;
  background:#0066cc;border:2px solid #fff;color:#fff;font-size:12px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.am-ac-av-edit:hover{background:#0077ed}
.am-ac-idblk{display:flex;flex-direction:column;gap:3px;min-width:0}
.am-ac-idblk strong{font-size:19px;font-weight:600;color:#1d1d1f}
.am-ac-idblk em{font-size:13px;color:#86868b;font-style:normal}
.am-ac-avmsg{font-size:12px;color:#0a7d34;min-height:15px}
.am-ac-pts{padding:18px;border-radius:14px;text-align:center;background:linear-gradient(135deg,#f5f9ff,#eef4fb);border:1px solid #e6eefc}
.am-ac-pts-big{font-size:34px;font-weight:700;color:#0066cc;font-variant-numeric:tabular-nums;line-height:1}
.am-ac-pts-lb{font-size:13px;color:#86868b;margin-top:6px}
.am-ac-pts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid #e6eefc}
.am-ac-cell b{display:block;font-size:18px;font-weight:600;color:#1d1d1f;font-variant-numeric:tabular-nums}
.am-ac-cell span{display:block;font-size:11px;color:#86868b;margin-top:3px}

/* 订单管理 */
.am-od-loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:40px 0;color:#86868b;font-size:14px}
.am-spinner{width:22px;height:22px;border:3px solid #e3e3e8;border-top-color:#0066cc;border-radius:50%;animation:amSpin .8s linear infinite}
@keyframes amSpin{to{transform:rotate(360deg)}}
.am-od-empty{text-align:center;padding:36px 12px;color:#86868b}
.am-od-ico{font-size:38px;margin-bottom:10px}
.am-od-empty h4{font-size:16px;font-weight:600;color:#1d1d1f;margin:0 0 6px}
.am-od-empty p{font-size:13px;margin:0}
.am-od-list{display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow-y:auto}
.am-od-item{padding:13px 15px;border:1px solid #e3e3e8;border-radius:13px;background:#fafafc}
.am-od-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
.am-od-row strong{font-size:14px;font-weight:600;color:#1d1d1f}
.am-od-cost{font-size:13px;color:#0066cc;font-weight:600;white-space:nowrap}
.am-od-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;color:#86868b}
.am-od-status{padding:2px 9px;border-radius:50px;font-size:11px;font-weight:500}
.os-pending{background:#fff4e5;color:#b25e00}
.os-confirmed{background:#e8f1ff;color:#0058c7}
.os-shipped{background:#eef0ff;color:#5145cd}
.os-done{background:#eafaf0;color:#0a7d34}
.os-cancelled{background:#f0f0f2;color:#86868b}
.am-od-extra{flex-basis:100%;color:#6e6e73}

/* 安全管理 */
.am-sec-acct{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;margin-bottom:18px;border-radius:12px;background:#f5f5f7;font-size:13px;color:#86868b}
.am-sec-acct strong{color:#1d1d1f;font-weight:600}

@media(max-width:640px){
  .am-acct-card{max-width:420px;border-radius:18px}
  .am-acct-head,.am-acct-body{padding-left:20px;padding-right:20px}
  .am-dd{width:230px}
}