/* 登录页 v6 · 视觉美化：统一对齐基线 / 8px 间距刻度 / 分层字阶 / 完整状态反馈
   仅调整样式，不改变 DOM 结构、信息结构与交互逻辑 */
html,body{height:100%}
body{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:22px;padding:28px 20px;
  background:radial-gradient(ellipse at 10% 6%,#ffddd0 0%,transparent 52%),
             radial-gradient(ellipse at 90% 94%,#ffe7c8 0%,transparent 52%),
             linear-gradient(150deg,#fffdf9,#fff3e6 55%,#ffe6d6)}

.login-shell{width:min(1120px,100%);background:#fff;border:1px solid #edd9ba;
  border-radius:18px;overflow:hidden;display:grid;grid-template-columns:1.06fr .94fr;
  box-shadow:0 26px 70px rgba(160,60,30,.14),0 2px 8px rgba(150,70,30,.05)}

/* ---------- 左：品牌区（上文下图，文字区与 K 线带完全分区） ---------- */
.hero{position:relative;min-height:560px;padding:36px 40px;overflow:hidden;
  background:#fff2e4 url("../assets/login-hero.svg?v=31") left bottom/100% 100% no-repeat;
  background-origin:border-box}
/* 遮罩只护住标题带（标题底约 41%），41% 以下完全放开，
   保证红色上涨 K 线与主升箭头的箭尖都不被洗淡 */
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,252,246,.92) 0%,rgba(255,251,244,.70) 22%,
    rgba(255,250,242,.22) 34%,rgba(255,249,240,0) 41%)}
.hero-inner{position:relative;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;height:100%;padding-top:66px}

/* 两行文字共用一条左基线：第二行缩进 = 图标宽 + 间距；
   字距一疏一密让 5 字与 6 字等宽，左右两端同时对齐；
   装饰线改为与标题等宽的基线，把两行束成一组 */
/* --mark = 图标宽 1.02em + 间距 .14em，按标题字号换算成绝对长度；
   避免 em 在自定义属性里按使用处的 14px 正文字号解析造成基线错位 */
.brand-block{position:relative;width:max-content;
  --mark:clamp(51.04px,6.728vw,76.56px)}
.hero-title{margin:0;font-size:clamp(44px,5.8vw,66px);line-height:1.28;
  font-weight:900;white-space:nowrap}
.hero-title .ln1{display:flex;align-items:center;gap:.14em}
.hero-apple{width:1.02em;height:1.02em;flex:none;
  filter:drop-shadow(0 5px 10px rgba(170,80,20,.26))}
.hero-title .ln1 .txt{letter-spacing:.28em;margin-right:-.28em;color:#c02a1c;
  -webkit-text-stroke:.5px rgba(140,24,16,.26);
  text-shadow:0 2px 0 #fff,0 9px 20px rgba(150,30,18,.24)}
/* 黄金字：加深暗部 + 深金描边 + 白色外晕，解决浅米底上"看不清" */
.hero-title .ln2{display:block;padding-left:var(--mark);
  letter-spacing:.07em;margin-right:-.07em;margin-top:9px;font-weight:900;color:#d99a08;
  background:linear-gradient(180deg,#FFF4C8 0%,#FFD24A 20%,#E29A08 48%,
             #A96A05 74%,#FFD96E 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:1px rgba(146,92,4,.55);
  filter:drop-shadow(0 0 1.2px rgba(255,255,255,.95))
         drop-shadow(0 0 1.2px rgba(255,255,255,.95))
         drop-shadow(0 3px 0 rgba(255,255,255,.78))
         drop-shadow(0 5px 9px rgba(110,65,0,.30))}
.hero-rule{width:calc(100% - var(--mark));height:3px;border-radius:2px;
  margin:16px 0 0 var(--mark);
  background:linear-gradient(90deg,#c8362b 0%,#e0532b 20%,#f0b90c 46%,
             rgba(240,185,12,.42) 72%,rgba(240,185,12,0) 100%)}

/* ---------- 右：表单区（8px 间距刻度 + 明确文字层级） ---------- */
.panel{position:relative;overflow:hidden;padding:44px 42px;display:flex;flex-direction:column;
  justify-content:center;border-left:1px solid #f0ddc2;
  background:radial-gradient(ellipse at 100% 100%,#fff3e0 0%,transparent 52%),#fff}
/* 抽象金环压小压淡，只做留白肌理，不与内容抢注意力 */
.panel::before{content:"";position:absolute;right:-130px;top:-130px;width:196px;height:196px;
  border-radius:50%;border:1px solid rgba(207,154,30,.075);
  box-shadow:0 0 0 26px rgba(207,154,30,.028),0 0 0 52px rgba(207,154,30,.016);
  pointer-events:none}
.panel::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,rgba(200,54,43,.75),rgba(240,185,12,.85));pointer-events:none}
.panel > *{position:relative;z-index:1}
.panel .welcome{font-size:26px;font-weight:800;color:#a63020;letter-spacing:2px}
.panel .welcome::before{content:"";display:block;width:32px;height:3px;border-radius:2px;
  margin-bottom:14px;background:linear-gradient(90deg,#c8362b,#f0b90c)}
.panel .tip{margin-top:8px;font-size:13px;line-height:1.7;color:#8c7963}
.panel .form{margin-top:28px;display:flex;flex-direction:column;gap:18px}
.fld label{display:block;font-size:12px;font-weight:600;color:#7a6754;margin-bottom:8px}
.fld .wrap{position:relative}
.fld .wrap svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:#c3a583;transition:color .15s;pointer-events:none}
.fld input{width:100%;height:44px;padding:0 12px 0 38px;border:1px solid var(--line2);
  border-radius:9px;background:#fffaf4;color:var(--text);font-size:14px;
  transition:border-color .15s,background .15s,box-shadow .15s}
.fld input::placeholder{color:#bba88f}

/* ---- 状态反馈：hover / 聚焦 / 图标联动 / 禁用 / 校验失败 / 键盘焦点 / 按下 ---- */
.fld input:hover{border-color:#d8b98c;background:#fffdf9}
.fld input:focus,.fld input:focus-visible{background:#fff;border-color:var(--red);
  box-shadow:0 0 0 3px rgba(200,54,43,.12)}
.fld .wrap:focus-within svg{color:var(--red)}
.fld input:disabled{background:#f7f2ea;color:#a99a88;border-color:var(--line);cursor:not-allowed}
.fld input[aria-invalid="true"],.fld input.invalid{border-color:var(--red);background:#fff6f3}
.fld input[aria-invalid="true"]:focus,.fld input.invalid:focus{
  box-shadow:0 0 0 3px rgba(200,54,43,.16)}

.links{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px;font-size:12.5px}
.links .save{display:flex;align-items:center;gap:7px;color:var(--text2);cursor:pointer}
.links .save input[type=checkbox]{appearance:none;-webkit-appearance:none;
  width:15px;height:15px;margin:0;flex:none;border:1px solid #d8b98c;border-radius:4px;
  background:#fff;cursor:pointer;display:inline-grid;place-content:center;transition:.15s}
.links .save input[type=checkbox]:hover{border-color:var(--red)}
.links .save input[type=checkbox]:checked{background:linear-gradient(135deg,#cf3b2b,#e0a82c);
  border-color:#c25226}
.links .save input[type=checkbox]:checked::after{content:"";width:7px;height:4px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg) translate(1px,-1px)}
.links a{color:#a8461f;cursor:pointer}
.links a:hover{color:var(--red2);text-decoration:underline}
.links .sep{width:1px;height:12px;background:var(--line2)}
.links a:focus-visible,.links .save input:focus-visible,
.actions button:focus-visible{outline:2px solid var(--red);outline-offset:2px}

.actions{display:flex;gap:10px;margin-top:24px}
.actions button{height:44px;border-radius:9px;font-size:15px;font-weight:700;
  border:1px solid transparent;transition:filter .15s,transform .1s,box-shadow .15s,background .15s}
.actions .login{flex:1;color:#fff;
  background:linear-gradient(135deg,#cf3b2b 0%,#d9762a 52%,#f0b90c 100%);
  border-color:#c25226;box-shadow:0 4px 14px rgba(190,70,35,.22);letter-spacing:4px}
.actions .login:hover{filter:brightness(1.06)}
.actions .login:active,.actions .exit:active{transform:translateY(1px);
  box-shadow:0 2px 6px rgba(190,70,35,.18)}
.actions .login:disabled{opacity:.6;cursor:wait;filter:grayscale(.25);box-shadow:none}
.actions .exit{width:88px;background:#fff6ea;border-color:var(--line2);color:var(--text2)}
.actions .exit:hover{background:#ffeeda}

.panel .divider{margin:24px 0 20px;height:1px;background:var(--line)}
.demo-box{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;
  background:#fff8ec;border:1px dashed #e8cfa6;border-radius:9px;padding:11px 12px;
  font-size:11.5px;line-height:1.7;color:#8c7355}
.demo-box b{color:#a13b28;font-weight:700}
.demo-box code{font-family:Consolas,monospace;background:#fbeed8;padding:1px 5px;
  border-radius:4px;color:#7a4a1c}

.login-foot{color:#8c7c68;font-size:11.5px;text-align:center;max-width:1000px;line-height:1.8}
.login-foot a{color:#8c7c68}
.login-foot a:hover{color:var(--red2)}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

@media(max-width:900px){
  .login-shell{grid-template-columns:1fr;max-width:560px}
  .hero{min-height:216px;padding:22px 26px;
    background-size:cover;background-position:center bottom}
  .hero::after{background:linear-gradient(180deg,rgba(255,252,246,.95) 0%,
    rgba(255,251,245,.90) 45%,rgba(255,249,240,.82) 100%)}
  .hero-inner{justify-content:center;padding-top:0}
  .hero-title{font-size:clamp(32px,7.4vw,44px)}
  .hero-title .ln1{justify-content:center}
  .hero-title .ln1 .txt{letter-spacing:.16em;margin-right:-.16em}
  .hero-title .ln2{padding-left:0;text-align:center;letter-spacing:.10em;
    margin-right:-.10em;margin-top:6px}
  .hero-rule{margin:18px auto 0;width:60%;height:3px}
  .panel{padding:28px 26px;border-left:0;border-top:1px solid #f0ddc2}
  .panel::before{display:none}
  .panel .form{margin-top:22px}
}
/* 更窄的视口：演示账号改为「标题独占一行 + 三个账号整齐一行」，避免零碎换行 */
@media(max-width:480px){
  .demo-box{display:grid;grid-template-columns:repeat(3,auto);gap:6px 8px;justify-content:start}
  .demo-box b{grid-column:1/-1}
}
@media(max-width:420px){
  body{padding:14px;gap:16px}
  .hero{min-height:176px;padding:18px}
  .hero-title{font-size:clamp(28px,7.6vw,34px)}
  .panel{padding:22px 18px}
  .links{gap:10px}
}