/* ============================================================================
   绘枢 · 登录 / 注册弹窗改版（2026-10-04）
   ------------------------------------------------------------------------
   借鉴对象（老板 10-04 提供三张竞品截图）：
     · 即梦 —— 左品牌 hero + 右表单的双栏结构
     · MXAI —— 居中大标题 + 副题「开启 AI 创作之旅」
     · 剪映 —— 大圆角无标签输入框、渐变主按钮、底部第三方登录
   ------------------------------------------------------------------------
   使用范围：目前仅 index.html / chat.html 引入（<link> 放在页内 </style> 之后）。
   painting-canvas.html **刻意未接入**（该文件本地领先线上，属另一窗口未发布工作，
   等它的窗口发版时再加 link，本文件对其无害）。

   🔴 三条共享文件铁律（与 sb.css / wx-login.js 同一套，改之前先读）：
   1) 颜色一律用本文件自带的 --lg-* 令牌（字面值），**绝不取宿主页变量**
      （四页 --s1 含义都不同：index 是色值、chat 是 4px 间距！）。
   2) 一切规则挂在 #loginDialog 作用域下，绝不碰页面同名类
      （.form-row / .mini-btn / .dialog 各页都在用）。
   3) 🔴 特异性陷阱：id 选择器（1,0,x）永远赢过页面的双类选择器（0,2,0）——
      所以页面用 class 控制显隐的（index 的 .form-row.hide / .login-tip.hide），
      这里必须**成对补一条 .hide{display:none!important}**，否则隐藏的行会全部
      漏出来（注册的邮箱/验证码/邀请码行在登录态全部可见 = 生产事故）。
   ⚠️ 注释里绝不能出现 `*` 紧跟 `/`（会把注释提前闭合，见 sb.css 09-19 事故）。
   ============================================================================ */

#loginDialog{
  --lg-bg:#ffffff; --lg-text:#18181b; --lg-text2:#6b7280; --lg-text3:#9ca3af;
  --lg-field:#f4f4f7; --lg-field-focus:#ffffff; --lg-border:#e9e9ec;
  --lg-v600:#7c3aed; --lg-v500:#8b5cf6;
  --lg-grad:linear-gradient(120deg,#6d5ef0 0%,#8b5cf6 55%,#a855f7 100%);
}
:root[data-theme="dark"] #loginDialog{
  --lg-bg:#141419; --lg-text:#f4f4f5; --lg-text2:#a1a1aa; --lg-text3:#71717a;
  --lg-field:#1d1d24; --lg-field-focus:#1d1d24; --lg-border:#2b2b35;
}

/* ---------- 双栏容器（左 hero + 右表单） ---------- */
#loginDialog .dialog.lg-box{
  display:flex; flex-direction:row; align-items:stretch;
  width:100%; max-width:calc(100vw - 32px);
  /* 老内核不支持 min() → 上一行 calc 兜底，支持的上限再收到 760px */
  max-width:min(760px, calc(100vw - 32px));
  max-height:calc(100vh - 40px);
  padding:0; overflow:hidden;
  background:var(--lg-bg); color:var(--lg-text);
  border:1px solid var(--lg-border); border-radius:20px;
  box-shadow:0 30px 80px rgba(24,20,60,.22);
}

/* ---------- 左侧品牌面板（渐变恒定，不随主题翻转） ---------- */
#loginDialog .lg-hero{
  flex:0 0 264px; position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:flex-start;
  padding:28px 26px 22px; color:#fff;
  background:
    radial-gradient(420px 260px at -60px -80px, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(360px 300px at 115% 118%, rgba(56,189,248,.38), transparent 55%),
    linear-gradient(155deg,#4338ca 0%,#6d5ef0 45%,#8b5cf6 78%,#a855f7 100%);
}
#loginDialog .lg-logo{height:26px;width:auto;display:block;align-self:flex-start}
#loginDialog .lg-slogan{
  margin-top:36px; font-size:24px; font-weight:800; line-height:1.45;
  letter-spacing:1.5px;
}
#loginDialog .lg-feats{
  list-style:none; margin:26px 0 0; padding:0;
  display:flex; flex-direction:column; gap:12px;
  font-size:13px; font-weight:500; color:rgba(255,255,255,.9); line-height:1.5;
}
#loginDialog .lg-feats li{position:relative; padding-left:22px}
#loginDialog .lg-feats li::before{
  content:"✓"; position:absolute; left:0; top:0;
  font-size:12px; font-weight:700; color:rgba(255,255,255,.95);
}
#loginDialog .lg-gift{
  margin-top:auto; padding:8px 13px; border-radius:999px;
  font-size:12px; font-weight:600; line-height:1.5; color:#fff;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.30);
}

/* ---------- 右侧表单主列 ---------- */
#loginDialog .lg-main{
  flex:1 1 auto; min-width:0; position:relative;
  display:flex; flex-direction:column;
  padding:30px 34px 22px; overflow-y:auto;
}
#loginDialog .lg-main .icon-x{
  position:absolute; top:12px; right:12px; z-index:2;
  width:30px; height:30px; border-radius:9px; border:none;
  background:transparent; color:var(--lg-text3); font-size:14px;
  cursor:pointer; display:grid; place-items:center; transition:background .15s,color .15s;
}
#loginDialog .lg-main .icon-x:hover{background:var(--lg-field);color:var(--lg-text)}

#loginDialog .lg-title{
  margin:0; text-align:center;
  font-size:21px; font-weight:700; line-height:1.4; color:var(--lg-text);
}
#loginDialog .lg-sub{
  margin:6px 0 16px; text-align:center;
  font-size:12.5px; font-weight:400; color:var(--lg-text2);
}

/* 注册权益条（原 .login-tip，挪到页签上方，剪映 banner 式） */
#loginDialog .login-tip{
  display:flex; align-items:center; justify-content:center; gap:4px;
  margin:0 0 14px; padding:8px 12px; border-radius:10px;
  font-size:12px; font-weight:500; line-height:1.5;
  color:var(--lg-v600); background:rgba(139,92,246,.10);
  border:1px solid rgba(139,92,246,.28);
}
/* 🔴 配对铁律第 3 条：index 用 .hide 控制本条显隐，id 特异性会压过 .login-tip.hide */
#loginDialog .login-tip.hide{display:none !important}

/* 页签（登录 / 注册） */
#loginDialog .login-tabs{
  display:flex; gap:6px; padding:4px; margin:0 0 16px;
  background:var(--lg-field); border-radius:12px;
}
#loginDialog .login-tabs button{
  flex:1; padding:9px 0; border:none; border-radius:9px; background:transparent;
  font-family:inherit; font-size:13.5px; font-weight:600; color:var(--lg-text2);
  cursor:pointer; transition:all .15s;
}
#loginDialog .login-tabs button.on{
  background:var(--lg-bg); color:var(--lg-text);
  box-shadow:0 2px 8px rgba(0,0,0,.10);
}

/* 输入行：去掉左侧文字标签，通栏大圆角输入框（剪映式） */
#loginDialog .lg-main .form-row{
  display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center;
  gap:0; margin:0 0 12px;
}
#loginDialog .lg-main .form-row>span{display:none}
/* 🔴 配对铁律第 3 条：index 的行显隐靠 .form-row.hide */
#loginDialog .lg-main .form-row.hide{display:none !important}
#loginDialog .lg-main .form-input{
  display:block; flex:1 1 auto; width:100%; min-width:0; box-sizing:border-box;
  height:44px; padding:0 14px;
  border:1.5px solid transparent; border-radius:12px;
  background:var(--lg-field); color:var(--lg-text);
  font-family:inherit; font-size:13.5px; font-weight:400; line-height:normal;
  outline:none; transition:border-color .15s, background .15s, box-shadow .15s;
}
#loginDialog .lg-main .form-input::placeholder{color:var(--lg-text3)}
#loginDialog .lg-main .form-input:focus{
  border-color:var(--lg-v500); background:var(--lg-field-focus);
  box-shadow:0 0 0 3px rgba(139,92,246,.13);
}
/* 验证码行 / 图形验证码行内部的小并排结构保持 8px 间距 */
#loginDialog .lg-main .form-row>div{gap:8px; align-items:center}

/* 小按钮（获取验证码）与主按钮 */
#loginDialog .lg-main .mini-btn{
  box-sizing:border-box; height:44px; padding:0 14px;
  border:1.5px solid var(--lg-border); border-radius:12px;
  background:var(--lg-field); color:var(--lg-text2);
  font-family:inherit; font-size:13px; font-weight:600; line-height:normal;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; white-space:nowrap;
  transition:border-color .15s, color .15s, background .15s;
}
#loginDialog .lg-main .mini-btn:hover:not(:disabled){
  border-color:var(--lg-v500); color:var(--lg-v600); background:transparent;
}
#loginDialog .lg-main .mini-btn:disabled{opacity:.55; cursor:not-allowed}
#loginDialog .lg-main .mini-btn.primary{
  height:46px; border:none; border-radius:12px;
  background:var(--lg-grad); color:#fff;
  font-size:15px; font-weight:700; letter-spacing:2px;
  box-shadow:0 10px 24px -8px rgba(124,58,237,.50);
  transition:filter .15s, opacity .15s;
}
#loginDialog .lg-main .mini-btn.primary:hover:not(:disabled){
  background:var(--lg-grad); filter:brightness(1.07);
}

/* 错误行 / 链接行 */
#loginDialog .login-links{display:flex; justify-content:center; gap:18px; margin:2px 0 8px}
#loginDialog .login-links a{color:var(--lg-text2); font-size:12px; text-decoration:none}
#loginDialog .login-links a:hover{color:var(--lg-v600)}

/* 条款提示行：登录/注册/快捷登录都覆盖（协议页 9 月已上线，注册另有强制勾选） */
#loginDialog .lg-terms{
  margin:0 0 12px; text-align:center;
  font-size:11px; font-weight:400; line-height:1.6; color:var(--lg-text3);
}
#loginDialog .lg-terms a{color:var(--lg-v600); text-decoration:none}
#loginDialog .lg-terms a:hover{text-decoration:underline}

/* ---------- 第三方登录（微信 / 支付宝，组件由 wx-login.js / alipay-login.js 注入） ---------- */
/* 🔴 必须 wrap：分隔线 .lg-socdiv 是 width:100% 的 flex 项，nowrap 下会吃光整行
   把两枚按钮压成 0 宽互叠（10-04 晚实测踩坑）；wrap 让分隔线独占一行、按钮共享下一行 */
#loginDialog .lg-social{display:flex; flex-wrap:wrap; gap:10px; margin-top:2px}
#loginDialog .lg-socdiv{
  display:flex; align-items:center; gap:12px;
  flex:0 0 100%; width:100%; min-width:0;
  margin:0 0 12px; color:var(--lg-text3); font-size:11px; line-height:1;
}
#loginDialog .lg-socdiv::before,
#loginDialog .lg-socdiv::after{content:""; display:block; flex:1 1 0; min-width:0; height:1px; background:var(--lg-border)}
/* 压掉组件自带的全宽块级与「或」分隔线，改成两枚并排半宽按钮（即梦式）。
   组件容器内部必须保持纵向堆叠：否则二维码展开后 按钮/二维码/提示语 会挤成一行 */
#loginDialog .lg-social .hs-wx-wrap,
#loginDialog .lg-social .hs-ali-wrap{
  display:flex !important; flex-direction:column; align-items:stretch;
  flex:1 1 0; width:auto !important; min-width:0; margin:0 !important;
}
#loginDialog .lg-social .hs-wx-sep,
#loginDialog .lg-social .hs-ali-sep{display:none !important}
#loginDialog .lg-social .hs-wx-btn,
#loginDialog .lg-social .hs-ali-btn{
  width:100%; box-sizing:border-box; height:42px; border-radius:12px;
  font-size:13px; font-weight:600;
}
/* ---------- 扫码视图（.lg-qr，由 wx-login.js 在二维码渲染成功后加到 .lg-box 上） ----------
   点「微信登录」后整个弹窗切成居中窄卡扫码视图（对齐剪映），表单整体隐藏。
   🔴 用 JS class 驱动、布局退化为最朴素的 block —— 不依赖 :has()（老内核不支持），
      也不会被 flex 压缩（10-04 用户 800px 窗口实测：二维码塞进双栏会把表单挤成竖条）。
   关闭弹窗 / 二维码过期 / 手动刷新时 wx-login.js 会 destroyQr() → 摘掉此类回到表单视图。 */
#loginDialog .lg-box.lg-qr .lg-hero{display:none}
#loginDialog .lg-box.lg-qr{max-width:400px}
#loginDialog .lg-box.lg-qr .lg-main{
  display:block; padding:30px 26px 22px; overflow-y:auto;
}
/* 隐藏表单层，只留社交区（icon-x 是关闭按钮，必须保留） */
#loginDialog .lg-box.lg-qr .lg-main>:not(.lg-social):not(.icon-x){display:none !important}
#loginDialog .lg-box.lg-qr .lg-social{
  display:block; margin-top:8px; text-align:center;
}
#loginDialog .lg-box.lg-qr .lg-socdiv,
#loginDialog .lg-box.lg-qr .hs-wx-sep,
#loginDialog .lg-box.lg-qr .hs-ali-wrap{display:none !important}
#loginDialog .lg-box.lg-qr .hs-wx-wrap{
  display:block !important; width:100% !important; margin:0 !important;
}

/* ---------- 窄屏：收起品牌面板，退化为单栏 ---------- */
@media (max-width:720px){
  #loginDialog .lg-hero{display:none}
  #loginDialog .dialog.lg-box{max-width:420px}
  #loginDialog .lg-main{padding:26px 22px 18px}
}