/* ===========================================================
   Amazon 运营中台 · 登录页
   设计参考：玻璃拟态（Glassmorphism）+ 暖调场景背景
   =========================================================== */

:root{
  /* 取自背景图的暖木色系 */
  --wood-900:#2b1d15;
  --wood-700:#5a3c29;
  --wood-500:#8a6039;
  --amber:#e0803c;
  --amber-soft:#f0a463;
  --cream:#f7f1e8;
  --cream-dim:rgba(247,241,232,.72);

  /* 卡片玻璃 */
  --glass-bg:linear-gradient(150deg, rgba(255,252,247,.86) 0%, rgba(250,241,229,.74) 58%, rgba(244,231,214,.68) 100%);
  --glass-brd:rgba(255,255,255,.65);
  --glass-shadow:0 32px 80px -28px rgba(43,29,21,.55), 0 8px 24px -12px rgba(43,29,21,.28);

  /* 文本 */
  --ink:#2b1d15;
  --ink-2:#6b5849;
  --ink-3:#9c8877;

  --radius-card:26px;
  --radius-field:14px;

  --font:"Inter","Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}

html,body{height:100%;}

body{
  font-family:var(--font);
  color:var(--ink);
  background:#e9e2d8;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------------- 背景层 ---------------- */
.bg-layer{position:fixed;inset:0;z-index:0;overflow:hidden;}

.bg-img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:50% 58%;
  transform:scale(1.04);
  filter:saturate(1.02) contrast(1.02);
  animation:bgDrift 26s ease-in-out infinite alternate;
}
@keyframes bgDrift{
  from{transform:scale(1.04) translate3d(0,0,0);}
  to{transform:scale(1.09) translate3d(-1.2%,-.8%,0);}
}

/* 压暗 + 提亮左侧，保证文字可读 */
.bg-veil{
  position:absolute;inset:0;
  background:
    radial-gradient(1100px 720px at 18% 48%, rgba(30,18,10,.52) 0%, rgba(30,18,10,.16) 55%, transparent 78%),
    linear-gradient(105deg, rgba(24,14,8,.42) 0%, rgba(24,14,8,.12) 46%, rgba(24,14,8,.30) 100%);
}
/* 顶部暖光，呼应背景的午后光线 */
.bg-warm{
  position:absolute;inset:0;
  background:radial-gradient(760px 520px at 78% 8%, rgba(240,164,99,.30) 0%, transparent 70%);
  mix-blend-mode:screen;
}

/* ---------------- 主舞台 ---------------- */
.stage{
  position:relative;z-index:1;
  flex:1;
  width:min(1360px,100%);
  margin:0 auto;
  padding:56px 60px 40px;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(380px,440px);
  align-items:stretch;
  gap:64px;
}

/* ---------------- 左侧品牌区 ---------------- */
/* 用列布局把内容在「卡片高度」内均匀撑开，与右侧登录卡片上下齐平 */
.brand{
  color:var(--cream);
  max-width:600px;
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-evenly;
  gap:36px;
  padding-block:96px;
  animation:riseIn .9s cubic-bezier(.2,.7,.25,1) both;
}

.brand-mark{display:flex;align-items:center;gap:10px;}
.brand-dot{
  width:11px;height:11px;border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 0 5px rgba(224,128,60,.22),0 0 18px rgba(224,128,60,.75);
}
.brand-name{font-size:17px;font-weight:700;letter-spacing:.2px;}
.brand-sub{
  font-size:11.5px;letter-spacing:.16em;
  padding:3px 9px;border-radius:999px;
  border:1px solid rgba(247,241,232,.36);
  color:var(--cream-dim);
}

.brand-title{
  font-size:clamp(34px,3.9vw,52px);
  line-height:1.24;
  font-weight:800;
  letter-spacing:-.02em;
  text-shadow:0 3px 30px rgba(20,10,4,.5);
}
.brand-title em{
  font-style:normal;
  background:linear-gradient(96deg,#ffd9a8 0%,var(--amber-soft) 48%,#e07a2f 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

.brand-desc{
  margin-top:0;
  font-size:16px;line-height:2;
  color:rgba(247,241,232,.78);
  max-width:520px;
  text-shadow:0 2px 14px rgba(20,10,4,.42);
}

/* ---- 状态提示条：数据同步 / 服务运行 ---- */
.status-bar{
  display:inline-flex;align-items:center;gap:0;
  align-self:flex-start;
  padding:12px 20px;
  border-radius:999px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.17);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 10px 30px -18px rgba(20,10,4,.7), 0 1px 0 rgba(255,255,255,.14) inset;
  animation:riseIn .9s cubic-bezier(.2,.7,.25,1) .22s both;
}
.status-item{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;
  white-space:nowrap;
}
.status-k{color:rgba(247,241,232,.62);letter-spacing:.02em;}
.status-v{color:#fff;font-weight:650;}
.status-t{
  color:rgba(247,241,232,.52);
  font-variant-numeric:tabular-nums;
}
.status-t::before{content:"·";margin-right:5px;opacity:.6;}
.status-divider{
  width:1px;height:15px;
  margin:0 16px;
  background:rgba(255,255,255,.2);
}

/* 呼吸状态灯 */
.dot{
  width:7px;height:7px;border-radius:50%;
  flex:0 0 7px;position:relative;
  animation:breathe 2.4s ease-in-out infinite;
}
.dot::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1.5px solid currentColor;opacity:.5;
  animation:ripple 2.4s ease-out infinite;
}
.dot.green{background:#7fd18a;color:#7fd18a;box-shadow:0 0 10px rgba(127,209,138,.7);}
.dot.amber{background:var(--amber-soft);color:var(--amber-soft);box-shadow:0 0 10px rgba(240,164,99,.7);}
@keyframes breathe{
  0%,100%{opacity:1;}
  50%{opacity:.68;}
}
@keyframes ripple{
  0%{transform:scale(.7);opacity:.5;}
  70%{transform:scale(1.25);opacity:0;}
  100%{transform:scale(1.25);opacity:0;}
}

/* ---------------- 右侧登录卡片 ---------------- */
/* 高度撑满整列，使「品牌区」与「登录卡片」严格等高对齐 */
.card-wrap{
  display:flex;
  animation:riseIn 1s cubic-bezier(.2,.7,.25,1) .12s both;
}

/* 高度撑满整列，使「品牌区」与「登录卡片」严格等高对齐。
   多余空间用 margin:auto 集中在表单上方，卡片内部间距保持不变 */
.glass-card{
  position:relative;
  width:100%;
  display:flex;
  flex-direction:column;
  padding:34px 34px 26px;
  border-radius:var(--radius-card);
  background:var(--glass-bg);
  border:1px solid var(--glass-brd);
  box-shadow:var(--glass-shadow);
  backdrop-filter:blur(28px) saturate(1.35);
  -webkit-backdrop-filter:blur(28px) saturate(1.35);
  overflow:hidden;
}
/* 玻璃高光 */
.glass-card::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
}
.glass-card::after{
  content:"";
  position:absolute;width:320px;height:320px;
  right:-150px;top:-160px;border-radius:50%;
  background:radial-gradient(circle,rgba(240,164,99,.30),transparent 68%);
  pointer-events:none;
}

.card-top{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:34px;
  flex:0 0 auto;
}
/* 标题与说明成组：卡片被拉高时，多余空间不在这里散开 */
.card-head{flex:0 0 auto;margin-bottom:28px;}
.card-logo{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14.5px;font-weight:650;letter-spacing:.01em;
  color:var(--wood-700);
}
.logo-icon{width:22px;height:22px;color:var(--wood-700);}
.card-lang{
  font-size:12px;color:var(--ink-3);
  padding:5px 11px;border-radius:999px;
  border:1px solid rgba(90,60,41,.16);
  background:rgba(255,255,255,.42);
}

.card-title{
  font-size:32px;font-weight:800;letter-spacing:-.025em;
  color:var(--ink);
}
.card-tip{
  margin-top:9px;
  font-size:13px;color:var(--ink-2);line-height:1.6;
}
/* 表单区域铺垫一层浅底，保证输入框在玻璃上依然清晰 */
.login-form{
  flex:0 0 auto;
  margin-top:auto;
  padding:20px 18px 18px;
  border-radius:20px;
  background:linear-gradient(165deg, rgba(255,255,255,.52), rgba(255,255,255,.30));
  border:1px solid rgba(255,255,255,.55);
}

.field{
  position:relative;
  display:flex;align-items:center;
  height:56px;
  border-radius:var(--radius-field);
  background:rgba(255,255,255,.62);
  border:1px solid rgba(90,60,41,.13);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 6px 16px -12px rgba(43,29,21,.4);
  transition:border-color .25s, box-shadow .25s, background .25s;
  margin-bottom:14px;
}
.field:hover{background:rgba(255,255,255,.72);}
.field:focus-within{
  border-color:rgba(224,128,60,.62);
  background:rgba(255,255,255,.86);
  box-shadow:0 0 0 4px rgba(224,128,60,.14), 0 8px 20px -14px rgba(43,29,21,.5);
}

.field-icon{
  display:grid;place-items:center;
  width:52px;flex:0 0 52px;height:100%;
  color:var(--ink-3);
  transition:color .25s;
}
.field-icon svg{width:19px;height:19px;}
.field:focus-within .field-icon{color:var(--amber);}

.field input{
  flex:1;height:100%;
  border:0;outline:0;background:transparent;
  font-family:var(--font);
  font-size:14.5px;color:var(--ink);
  letter-spacing:.01em;
  padding:20px 14px 0 0;
  appearance:none;-webkit-appearance:none;
}
.field input::placeholder{color:transparent;}
.field input:focus,
.field input:focus-visible,
.field input:active{
  outline:none !important;box-shadow:none !important;
  border-color:transparent;
}

/* 浮动标签 */
.field-label{
  position:absolute;left:52px;top:50%;
  transform:translateY(-50%);
  font-size:14.5px;color:var(--ink-3);
  pointer-events:none;
  transform-origin:left top;
  transition:transform .2s cubic-bezier(.2,.7,.3,1), font-size .2s, color .2s;
  white-space:nowrap;
}
.field input:focus + .field-label,
.field input:not(:placeholder-shown) + .field-label{
  top:50%;
  transform:translateY(-50%) translateY(-13px) scale(.72);
  font-weight:600;
  letter-spacing:.06em;
  color:var(--amber);
}
.field input:not(:focus):not(:placeholder-shown) + .field-label{color:var(--ink-3);}

/* 密码可见切换 */
.toggle-eye{
  width:42px;height:42px;margin-right:7px;
  border:0;border-radius:11px;cursor:pointer;
  background:rgba(90,60,41,.06);
  color:var(--ink-2);
  display:grid;place-items:center;
  transition:background .2s,color .2s;
}
.toggle-eye:hover{background:rgba(224,128,60,.14);color:var(--amber);}
.toggle-eye svg{width:18px;height:18px;}
.toggle-eye.off svg{opacity:.42;}

/* 校验错误态 */
.field.error{
  border-color:rgba(200,60,45,.55);
  background:rgba(255,248,246,.86);
}
.field.error .field-icon{color:#c4412f;}
.shake{animation:shake .38s cubic-bezier(.36,.07,.19,.97);}
@keyframes shake{
  10%,90%{transform:translateX(-2px);}
  20%,80%{transform:translateX(4px);}
  30%,50%,70%{transform:translateX(-6px);}
  40%,60%{transform:translateX(6px);}
}

/* 辅助行 */
.form-aux{
  display:flex;align-items:center;justify-content:space-between;
  margin:4px 2px 22px;
}
.remember{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13px;color:var(--ink-2);cursor:pointer;user-select:none;
}
.remember input{position:absolute;opacity:0;width:0;height:0;}
.remember .box{
  width:17px;height:17px;border-radius:5px;
  border:1.5px solid rgba(90,60,41,.30);
  background:rgba(255,255,255,.6);
  display:grid;place-items:center;
  color:#fff;
  transition:all .2s;
}
.remember .box svg{width:12px;height:12px;opacity:0;transform:scale(.6);transition:all .2s;}
.remember input:checked + .box{
  background:linear-gradient(140deg,var(--amber-soft),#d9712e);
  border-color:transparent;
  box-shadow:0 3px 9px -3px rgba(224,128,60,.75);
}
.remember input:checked + .box svg{opacity:1;transform:scale(1);}
.remember input:focus-visible + .box{box-shadow:0 0 0 3px rgba(224,128,60,.28);}

.link-forgot{
  font-size:13px;color:var(--wood-500);
  text-decoration:none;font-weight:550;
  border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;
}
.link-forgot:hover{color:var(--amber);border-bottom-color:rgba(224,128,60,.55);}

/* 主按钮 */
.btn-primary{
  position:relative;
  width:100%;height:56px;
  border:0;border-radius:var(--radius-field);cursor:pointer;
  background:linear-gradient(120deg,#33231a 0%,#2b1d15 55%,#3b2a1d 100%);
  color:#fff;
  font-family:var(--font);
  font-size:15px;font-weight:650;letter-spacing:.06em;
  display:flex;align-items:center;justify-content:center;gap:12px;
  overflow:hidden;
  box-shadow:0 16px 32px -18px rgba(43,29,21,.95), 0 2px 0 rgba(255,255,255,.10) inset;
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .25s;
}
.btn-primary::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(240,164,99,.95),rgba(224,128,60,.9));
  opacity:0;transition:opacity .28s;
}
.btn-primary > *{position:relative;z-index:1;}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 22px 40px -18px rgba(224,128,60,.65), 0 2px 0 rgba(255,255,255,.14) inset;}
.btn-primary:hover::after{opacity:1;}
.btn-primary:active{transform:translateY(0);}
.btn-arrow{display:grid;place-items:center;transition:transform .28s cubic-bezier(.2,.7,.3,1);}
.btn-arrow svg{width:19px;height:19px;}
.btn-primary:hover .btn-arrow{transform:translateX(5px);}
.btn-primary:disabled{cursor:progress;opacity:.85;transform:none;}

/* 按钮加载态 */
.btn-primary.loading .btn-text{letter-spacing:.12em;}
.btn-primary.loading .btn-text::after{
  content:"";display:inline-block;width:13px;height:13px;
  margin-left:9px;vertical-align:-1px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* 提示信息 */
.form-msg{
  min-height:19px;margin-top:12px;
  font-size:12.5px;line-height:1.5;
  color:#c4412f;text-align:center;
}
.form-msg.ok{color:#3f9a5a;}

.card-foot{
  flex:0 0 auto;
  margin-top:20px;padding-top:18px;
  border-top:1px solid rgba(90,60,41,.13);
  font-size:11.5px;color:var(--ink-3);
  text-align:center;letter-spacing:.02em;
}

/* ---------------- 页脚 ---------------- */
.site-foot{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:0 40px 26px;
  font-size:12px;color:rgba(247,241,232,.55);
  text-shadow:0 1px 10px rgba(20,10,4,.5);
}
.dot-sep{width:3px;height:3px;border-radius:50%;background:rgba(247,241,232,.4);}

/* ---------------- 入场动画 ---------------- */
@keyframes riseIn{
  from{opacity:0;transform:translateY(26px);}
  to{opacity:1;transform:translateY(0);}
}

/* ---------------- 响应式 ---------------- */
@media (max-width:1080px){
  .stage{
    grid-template-columns:minmax(0,1fr);
    gap:44px;
    padding:44px 32px 32px;
    align-items:start;          /* 单列堆叠时取消拉伸，避免品牌区被撑开 */
  }
  .brand{
    max-width:100%;
    display:block;              /* 取消列布局与均匀分布 */
    padding-block:0;
  }
  .brand-mark{margin-bottom:32px;}
  .brand-desc{max-width:640px;margin-top:20px;}
  .status-bar{margin-top:28px;align-self:auto;}
  .card-wrap{max-width:440px;margin:0 auto;width:100%;display:block;}
  .glass-card{display:block;}
}

@media (max-width:640px){
  body{overflow-x:hidden;}
  .stage{padding:30px 16px 22px;gap:30px;width:100%;max-width:100%;}
  /* 窄屏单列排布，恢复常规上下间距 */
  .brand{width:100%;max-width:100%;display:block;gap:0;padding-block:0;}
  .brand-mark{margin-bottom:22px;flex-wrap:wrap;}
  .brand-title{font-size:clamp(24px,7.4vw,30px);line-height:1.28;}
  .brand-desc{
    font-size:13.5px;line-height:1.8;
    max-width:100%;
    margin-top:16px;
    overflow-wrap:anywhere;
  }
  /* 状态条改为上下两行，避免窄屏挤压 */
  .status-bar{
    flex-direction:column;
    align-items:stretch;
    gap:11px;
    margin-top:24px;
    padding:14px 18px;
    border-radius:16px;
    width:100%;
    align-self:auto;
  }
  .status-item{justify-content:flex-start;gap:7px;font-size:12px;}
  .status-t{margin-left:auto;}
  .status-divider{
    width:100%;height:1px;
    margin:0;
    background:linear-gradient(90deg,rgba(255,255,255,.22),rgba(255,255,255,.06));
  }
  .glass-card{padding:24px 18px 20px;border-radius:22px;}
  .card-title{font-size:26px;}
  .card-top{margin-bottom:24px;}
  .login-form{padding:16px 12px 14px;border-radius:16px;}
  .field{height:54px;}
  .field-icon{width:46px;flex:0 0 46px;}
  .field-label{left:46px;}
  .site-foot{padding:0 16px 18px;font-size:11px;flex-wrap:wrap;gap:8px;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}

/* 键盘无障碍：仅键盘导航时显示描边 */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--amber);outline-offset:2px;
}