@charset "utf-8";
/* ============================================================================
   小都AI · 登录页样式
   ----------------------------------------------------------------------------
   视觉令牌与 templates/default/ai/css/ai.css 保持一致（品牌蓝 #0011ff、浅色底）
   两种登录方式：① 验证码登录  ② 密码登录
   结构分区：
     0  设计令牌
     1  基础
     2  卡片与左品牌区
     3  表单区（标题 / 切换 / 字段 / 协议 / 按钮 / 提示）
   4  已登录状态面板（登录成功 / 进入聊天 / 退出）
   5  启动骨架（session 判定中）
   6  窄屏
   ----------------------------------------------------------------------------
   2026-10-05 尺寸整体下调约 12%（用户：整体框架有点大）：
     卡片 1000×600 → 880×520，左栏 400 → 340，内边距与字号同步收一档。
   ========================================================================== */

/* ---------------------------------------------------------------- 0 令牌 */
:root{
  --ai-text:#222;
  --ai-text-2:#666;
  --ai-text-3:#999;
  --ai-text-off:#ccc;
  --ai-brand:#01f;
  --ai-brand-hover:#0010dd;
  --ai-brand-soft:#0011ff14;
  --ai-bg:#fff;
  --ai-bg-side:#f7f7f9;
  --ai-line:#2222221f;
  --ai-line-soft:#2222220f;
  --ai-err:#e34d59;
  --ai-ok:#22a06b;
  --ai-radius:8px;
  --ai-radius-lg:10px;
  --ai-radius-xl:16px;
  --ai-font:"Microsoft YaHei","Segoe UI",system-ui,Roboto,"Noto Sans SC",
            "Helvetica Neue",Arial,sans-serif;
  --ai-shadow-card:0 18px 48px -16px rgba(0,17,255,.16),0 2px 10px rgba(0,0,0,.04);
  --ai-shadow-btn:0 6px 16px -6px rgba(0,17,255,.55);
}

/* ---------------------------------------------------------------- 1 基础 */
*,::before,::after{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;padding:24px;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(900px 520px at 12% -10%, #0011ff14, transparent 62%),
    radial-gradient(760px 460px at 108% 112%, #0011ff0f, transparent 60%),
    var(--ai-bg-side);
  font-family:var(--ai-font);color:var(--ai-text);font-size:14px;
  -webkit-font-smoothing:antialiased;
}
[hidden]{display:none !important;}

/* ---------------------------------------------------------------- 2 卡片 */
.lg-card{
  width:100%;min-width:0;max-width:880px;min-height:520px;
  display:grid;grid-template-columns:340px 1fr;
  background:var(--ai-bg);border-radius:var(--ai-radius-xl);overflow:hidden;
  box-shadow:var(--ai-shadow-card);
}

/* 左：品牌 */
.lg-brand{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  padding:38px 32px 32px;color:#fff;
  background:linear-gradient(158deg,#0009d6 0%,#0011ff 42%,#3a58ff 100%);
}
.lg-brand::after{
  content:"";position:absolute;right:-110px;bottom:-140px;
  width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle at 32% 32%, #ffffff33, #ffffff08 62%, transparent 72%);
}
.lg-brand::before{
  content:"";position:absolute;left:-90px;top:-120px;
  width:230px;height:230px;border-radius:50%;
  background:radial-gradient(circle at 60% 60%, #ffffff1f, transparent 68%);
}
.lg-logo{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:9px;
  font-size:22px;font-weight:700;letter-spacing:.5px;
}
.lg-logo em{font-style:normal;font-weight:400;opacity:.86;font-size:19px;}
.lg-mark{
  width:30px;height:30px;flex:0 0 auto;border-radius:8px;
  background:#ffffff26;border:1px solid #ffffff3d;
  display:grid;place-items:center;
}
.lg-mark svg{width:17px;height:17px;display:block;}
.lg-brand-body{position:relative;z-index:1;margin-top:auto;}
.lg-brand-title{font-size:23px;font-weight:700;line-height:1.45;letter-spacing:.3px;}
.lg-brand-desc{margin-top:11px;font-size:12.5px;line-height:1.8;color:#ffffffc2;}
.lg-points{
  position:relative;z-index:1;margin-top:22px;
  display:flex;flex-direction:column;gap:9px;
}
.lg-point{display:flex;align-items:center;gap:8px;font-size:12px;color:#ffffffd4;}
.lg-point i{
  width:16px;height:16px;flex:0 0 auto;border-radius:50%;
  background:#ffffff26;border:1px solid #ffffff40;
  display:grid;place-items:center;font-style:normal;font-size:9.5px;
}

/* ---------------------------------------------------------------- 3 表单区 */
.lg-form-wrap{
  min-width:0;max-width:100%;min-height:440px;
  display:flex;flex-direction:column;justify-content:center;
  padding:36px 46px 34px;
}
.lg-head h1{margin:0;font-size:19px;font-weight:700;letter-spacing:.2px;}
.lg-head p{margin:6px 0 0;font-size:12.5px;color:var(--ai-text-3);}

/* 方式切换 */
.lg-tabs{
  position:relative;margin:20px 0 18px;
  display:flex;gap:24px;
  border-bottom:1px solid var(--ai-line-soft);
}
.lg-tabs button{
  position:relative;padding:0 2px 10px;border:0;background:transparent;
  font:inherit;font-size:13.5px;color:var(--ai-text-2);cursor:pointer;
  transition:color .2s;
}
.lg-tabs button:hover{color:var(--ai-text);}
.lg-tabs button.on{color:var(--ai-brand);font-weight:700;}
.lg-ink{
  position:absolute;bottom:-1px;left:0;width:0;height:2px;
  background:var(--ai-brand);border-radius:2px;
  transition:transform .28s cubic-bezier(.4,0,.2,1),width .28s cubic-bezier(.4,0,.2,1);
}

.lg-form-wrap form,
.lg-field,
.lg-ctrl{min-width:0;}

/* 两个面板等高：密码登录三个字段（自然高 212px），验证码登录两个字段 + 提示行（166.5px）。
   面板高度不同 → justify-content:center 会把整块内容重新居中 → 切 tab 时欢迎语上下跳 27px。
   给两块同一个 min-height，两边内容总高相等，居中量不变，切 tab 时全页纹丝不动。
   ⚠️ 值 = 三字段面板的自然高度（2026-10-13 实测 212）；字段字号/输入框高度改动后要同步复核。 */
#paneCode,#panePwd{min-height:212px;}

/* 面板内最后一个字段不留底边距。否则那 13px 会「穿透」面板去撑下面的协议行
   （父元素无 padding/border 时发生外边距合并），面板下方的间距就跟着多出 9px，
   切 tab 时下半部分仍会挪一下。最后一格到底了就到底，间距交给协议行自己的 margin。 */
#paneCode .lg-field:last-child,
#panePwd .lg-field:last-child{margin-bottom:0;}

/* 字段 */
.lg-field{margin-bottom:13px;}
.lg-field label{display:block;margin-bottom:6px;font-size:12px;color:var(--ai-text-2);}
.lg-ctrl{position:relative;display:flex;align-items:center;}
.lg-ctrl input{
  flex:1 1 0%;width:100%;min-width:0;height:40px;padding:0 13px;
  font:inherit;font-size:13.5px;color:var(--ai-text);
  background:var(--ai-bg);border:1px solid var(--ai-line);border-radius:var(--ai-radius);
  outline:none;transition:border-color .18s,box-shadow .18s,background .18s;
}
.lg-ctrl input::placeholder{color:var(--ai-text-off);}
.lg-ctrl input:focus{border-color:var(--ai-brand);box-shadow:0 0 0 3px var(--ai-brand-soft);}
.lg-ctrl input:disabled{background:var(--ai-bg-side);cursor:not-allowed;}
.lg-ctrl.err input{border-color:var(--ai-err);box-shadow:0 0 0 3px #e34d591a;}

/* 手机号区号 */
.lg-ctrl.is-phone input{padding-left:60px;letter-spacing:.5px;}
.lg-cc{
  position:absolute;left:1px;top:1px;bottom:1px;width:52px;
  display:flex;align-items:center;justify-content:center;gap:3px;
  font-size:13px;color:var(--ai-text-2);
  border-right:1px solid var(--ai-line-soft);
}
.lg-cc svg{width:10px;height:10px;opacity:.5;}

/* 密码显隐 */
.lg-ctrl.has-eye input{padding-right:42px;}
.lg-eye{
  position:absolute;right:5px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border:0;border-radius:6px;background:transparent;
  display:grid;place-items:center;cursor:pointer;color:var(--ai-text-3);
  transition:background .16s,color .16s;
}
.lg-eye:hover{background:var(--ai-bg-side);color:var(--ai-text-2);}
.lg-eye svg{width:16px;height:16px;display:block;}

/* 验证码 */
.lg-ctrl.is-code input{padding-right:108px;letter-spacing:7px;font-size:15px;}
.lg-ctrl.is-code input::placeholder{letter-spacing:0;font-size:13.5px;}
.lg-send{
  position:absolute;right:5px;top:50%;transform:translateY(-50%);
  height:30px;padding:0 11px;border:0;border-radius:6px;
  background:var(--ai-brand-soft);color:var(--ai-brand);
  font:inherit;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;
  transition:background .16s,color .16s;
}
.lg-send:hover{background:#0011ff26;}
.lg-send:disabled{background:var(--ai-bg-side);color:var(--ai-text-3);cursor:not-allowed;font-weight:400;}

/* 图形验证码（密码登录，图源 /userc/codeNum.jsp）
   ⚠️ 接口出的图原生只有 60×20 像素（2026-10-13 实测，接口不吃任何尺寸参数），
   必须 1:1 显示 —— 早先 height:33px 放大 1.65 倍，字看着发毛；回到原生尺寸即清晰。 */
.lg-ctrl.is-imgcode input{padding-right:76px;letter-spacing:6px;font-size:15px;}
.lg-ctrl.is-imgcode input::placeholder{letter-spacing:0;font-size:12.5px;}
.lg-cap{
  position:absolute;right:5px;top:50%;transform:translateY(-50%);
  height:20px;padding:0;border:0;border-radius:4px;background:transparent;
  cursor:pointer;overflow:hidden;line-height:0;
  transition:transform .12s,box-shadow .16s;
}
.lg-cap img{width:60px;height:20px;display:block;border-radius:4px;}
.lg-cap:hover{box-shadow:0 0 0 2px var(--ai-brand-soft);}
.lg-cap:active{transform:translateY(-50%) scale(.96);}

/* 提示行 */
.lg-hint{
  margin:-3px 0 0;font-size:11.5px;line-height:1.7;color:var(--ai-text-3);
}

/* 协议 */
.lg-agree{
  display:flex;align-items:flex-start;gap:7px;
  margin:4px 0 15px;font-size:12px;line-height:1.7;color:var(--ai-text-3);
  cursor:pointer;user-select:none;
}
.lg-agree input{
  width:14px;height:14px;margin:2px 0 0;flex:0 0 auto;
  accent-color:var(--ai-brand);cursor:pointer;
}
.lg-agree.shake{animation:lg-shake .4s;}
@keyframes lg-shake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-5px);}
  40%{transform:translateX(4px);}
  60%{transform:translateX(-3px);}
  80%{transform:translateX(2px);}
}
.lg-link{color:var(--ai-brand);text-decoration:none;background:none;border:0;
         padding:0;font:inherit;cursor:pointer;}
.lg-link:hover{text-decoration:underline;}

/* 提交 */
.lg-submit{
  width:100%;height:42px;border:0;border-radius:var(--ai-radius);
  background:var(--ai-brand);color:#fff;
  font:inherit;font-size:14.5px;font-weight:700;letter-spacing:3px;cursor:pointer;
  box-shadow:var(--ai-shadow-btn);
  transition:background .18s,transform .12s,box-shadow .18s;
}
.lg-submit:hover{background:var(--ai-brand-hover);}
.lg-submit:active{transform:translateY(1px);box-shadow:0 3px 10px -4px rgba(0,17,255,.5);}
.lg-submit:disabled{background:#b9c2ff;box-shadow:none;cursor:not-allowed;}

/* 提示条 */
.lg-tip{
  margin-top:12px;min-height:17px;font-size:12px;color:var(--ai-err);
  display:flex;align-items:center;gap:6px;
}
.lg-tip.is-ok{color:var(--ai-ok);}
.lg-tip:empty{visibility:hidden;}

/* ---------------------------------------------------------- 4 已登录面板 */
/* 已登录时隐藏登录表单，改在表单区中间显示状态面板 */
.lg-form-wrap.is-done > .lg-head,
.lg-form-wrap.is-done > .lg-tabs,
.lg-form-wrap.is-done > form,
.lg-form-wrap.is-done > .lg-skel{display:none;}

/* 启动态：session 判定中，只显示骨架 —— 表单与状态面板都先藏着，
   避免「先闪一下登录框、再跳成状态面板」。判定完由 login.js 摘掉 is-boot。 */
.lg-form-wrap.is-boot > .lg-head,
.lg-form-wrap.is-boot > .lg-tabs,
.lg-form-wrap.is-boot > form,
.lg-form-wrap.is-boot > .lg-done{display:none;}

.lg-done{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:10px 0;
  animation:lg-done-in .34s cubic-bezier(.2,.8,.3,1);
}
@keyframes lg-done-in{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}
.lg-done-badge{
  width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,#33b27a 0%,#1a8a5a 100%);
  box-shadow:0 14px 30px -14px rgba(34,160,107,.8);
}
.lg-done-badge svg{width:27px;height:27px;display:block;}
/* 头像版（/scac/u_info_*.js 取到头像/昵称时启用） */
.lg-done-ava{
  position:relative;width:64px;height:64px;border-radius:50%;
  background:var(--ai-bg-side);
  box-shadow:0 14px 30px -16px rgba(0,0,0,.4);
}
.lg-done-ava img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;}
.lg-done-tick{
  position:absolute;right:-1px;bottom:-1px;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  border:2px solid var(--ai-bg);
  background:linear-gradient(150deg,#33b27a 0%,#1a8a5a 100%);
}
.lg-done-tick svg{width:11px;height:11px;display:block;}
.lg-done-title{margin:18px 0 0;font-size:19px;font-weight:700;letter-spacing:.2px;}
.lg-done-sub{margin:8px 0 0;font-size:12.5px;color:var(--ai-text-3);}
.lg-done-sub b{color:var(--ai-text);font-weight:700;letter-spacing:.3px;}
.lg-done-acts{
  width:100%;max-width:280px;margin-top:24px;
  display:flex;flex-direction:column;gap:10px;
}
.lg-done-btn{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:42px;margin:0;padding:0;
  border:0;border-radius:var(--ai-radius);cursor:pointer;
  font:inherit;font-size:14.5px;font-weight:700;letter-spacing:2px;
  text-decoration:none;
  transition:background .18s,color .18s,border-color .18s,
             transform .12s,box-shadow .18s;
}
.lg-done-btn.is-main{
  background:var(--ai-brand);color:#fff;box-shadow:var(--ai-shadow-btn);
}
.lg-done-btn.is-main:hover{background:var(--ai-brand-hover);}
.lg-done-btn.is-main:active{transform:translateY(1px);box-shadow:0 3px 10px -4px rgba(0,17,255,.5);}
.lg-done-btn.is-ghost{
  background:var(--ai-bg);color:var(--ai-text-2);border:1px solid var(--ai-line);
}
.lg-done-btn.is-ghost:hover{border-color:#c9c9d2;color:var(--ai-text);background:var(--ai-bg-side);}
.lg-done-btn.is-ghost:active{transform:translateY(1px);}
/* 「管理中心」= 描边款 + 一枚小图标（2026-10-14）：与同为描边款的「退出」区分开，
   避免两枚灰按钮长得一模一样。图标是页面内联 SVG，不复用 ai/images/icons.svg
   （登录页与聊天页各写各的，少一个跨目录依赖）。 */
.lg-done-btn.is-icon{gap:6px;}
.lg-done-btn.is-icon svg{width:15px;height:15px;flex:none;display:block;}

/* ---------------------------------------------------------------- 5 启动骨架
   页面加载时并不知道 session 里有没有人（要问 /userc/get.jsp）。
   这段等待里先摆一副与表单同形的灰条，判定出结果再换成表单或状态面板。
   行距刻意贴近真实表单，切换时不跳版。 */
.lg-skel{
  display:none;flex:1;min-height:0;
  flex-direction:column;justify-content:center;
}
.lg-form-wrap.is-boot > .lg-skel{display:flex;}

.lg-skel-ln{
  display:block;border-radius:6px;
  background:linear-gradient(90deg,#2222220a 0%,#22222217 40%,#2222220a 78%);
  background-size:240% 100%;
  animation:lg-skel-sweep 1.5s ease-in-out infinite;
}
.lg-skel-ln.is-t{width:104px;height:18px;margin-bottom:10px;}
.lg-skel-ln.is-s{width:158px;height:11px;margin-bottom:22px;}
.lg-skel-ln.is-f{height:40px;margin-bottom:13px;border-radius:8px;}
.lg-skel-ln.is-b{height:42px;margin-top:4px;border-radius:8px;}
@keyframes lg-skel-sweep{
  0%{background-position:130% 0;}
  100%{background-position:-30% 0;}
}

/* ---------------------------------------------------------------- 6 窄屏 */
@media (max-width:880px){
  body{padding:0;}
  .lg-card{
    max-width:none;min-height:100vh;border-radius:0;
    grid-template-columns:1fr;grid-template-rows:auto 1fr;
    box-shadow:none;
  }
  .lg-brand{padding:24px 22px 22px;}
  .lg-brand-title{font-size:19px;}
  .lg-brand-body{margin-top:14px;}
  .lg-points,.lg-brand-desc{display:none;}
  .lg-form-wrap{padding:26px 22px 40px;min-height:380px;}
  .lg-ctrl.is-code input{padding-right:102px;letter-spacing:6px;}
  .lg-ctrl.is-imgcode input{padding-right:106px;}
}