/* ===========================================================
   AnNingDay 运营中台 · 登录页 V2
   版式语言沿用 V1（玻璃拟态 + 浮动标签），
   配色改为适配「独立设计师店铺」场景 —— 暖木色 + 靛蓝/橄榄点缀
   =========================================================== */

:root{
  /* 取自新背景图：木架暖棕 + 墙面冷灰 */
  --wood-900:#241d18;
  --wood-700:#56432f;
  --wood-500:#8a7051;
  --amber:#cf7f3e;
  --amber-soft:#e6a76a;
  --indigo:#3d5570;
  --olive:#5c6b45;

  --cream:#f6f2ec;
  --cream-dim:rgba(246,242,236,.74);

  /* 卡片玻璃：偏冷一点，贴合背景的墙面灰 */
  --glass-bg:linear-gradient(152deg, rgba(253,251,248,.88) 0%, rgba(247,243,237,.76) 58%, rgba(240,234,226,.70) 100%);
  --glass-brd:rgba(255,255,255,.68);
  --glass-shadow:0 34px 84px -30px rgba(30,22,16,.58), 0 8px 26px -14px rgba(30,22,16,.30);

  --ink:#241d18;
  --ink-2:#665747;
  --ink-3:#9b8b79;

  --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:#e6e0d7;
  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% 52%;
  transform:scale(1.05);
  filter:saturate(.98) contrast(1.04) brightness(.98);
  animation:bgDrift 28s ease-in-out infinite alternate;
}
@keyframes bgDrift{
  from{transform:scale(1.05) translate3d(0,0,0);}
  to{transform:scale(1.10) translate3d(-1%,-.7%,0);}
}

/* 背景本身较暗且左密右疏，压低中部杂讯、托住左侧文案 */
.bg-veil{
  position:absolute;inset:0;
  background:
    radial-gradient(1200px 780px at 22% 50%, rgba(26,18,11,.58) 0%, rgba(26,18,11,.20) 58%, transparent 80%),
    linear-gradient(100deg, rgba(22,15,9,.46) 0%, rgba(22,15,9,.16) 44%, rgba(22,15,9,.34) 100%);
}
/* 顶部暖光，呼应背景货架上的日光 */
.bg-warm{
  position:absolute;inset:0;
  background:radial-gradient(820px 540px at 74% 6%, rgba(230,167,106,.26) 0%, transparent 72%);
  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);
  /* 两列各自按内容高度排布、顶端对齐。
     左侧品牌区靠自身 padding-block 控制留白，
     右侧登录卡保持「内容自然高度」，不被拉伸也不做额外的垂直居中 */
  align-items:start;
  gap:64px;
  padding-block:72px;
}

/* ---------------- 左侧品牌区 ---------------- */
/* 文案块整体略低于顶端，与右侧登录卡形成视觉呼应 */
.brand{
  color:var(--cream);
  max-width:600px;
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;   /* 顶部三项紧凑排列，间距交给 gap 控制 */
  gap:36px;
  padding-block:8px;
  align-self:stretch;           /* 撑满栅格行高，为状态条沉底预留空间 */
  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(207,127,62,.24),0 0 18px rgba(207,127,62,.7);
}
.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(246,242,236,.34);
  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(16,9,4,.55);
}
.brand-title em{
  font-style:normal;
  background:linear-gradient(96deg,#ffdcb0 0%,var(--amber-soft) 50%,#c36f2c 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(246,242,236,.78);
  max-width:520px;
  text-shadow:0 2px 14px rgba(16,9,4,.5);
}

/* ---- 状态提示条：数据同步 / 服务运行 ---- */
.status-bar{
  display:inline-flex;align-items:center;gap:0;
  align-self:flex-start;
  margin-top:auto;              /* 吸收上方剩余空间，把状态条下移到品牌区底部 */
  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(16,9,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(246,242,236,.62);letter-spacing:.02em;}
.status-v{color:#fff;font-weight:650;}
.status-t{
  color:rgba(246,242,236,.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(230,167,106,.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;}
}

/* ---------------- 右侧登录卡片 ---------------- */
/* 卡片按内容自然高度，不做拉伸；垂直方向由 .stage 的 align-items:center 居中 */
.card-wrap{
  display:flex;
  align-items:flex-start;
  animation:riseIn 1s cubic-bezier(.2,.7,.25,1) .12s both;
}

.glass-card{
  position:relative;
  width:100%;
  display:flex;
  flex-direction:column;
  /* 高度自适应内容，禁止被父级撑开 */
  flex:0 0 auto;
  padding:34px 34px 22px;
  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.3);
  -webkit-backdrop-filter:blur(28px) saturate(1.3);
  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(61,85,112,.22),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(86,67,47,.16);
  background:rgba(255,255,255,.44);
}

.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;
  padding:20px 18px 18px;
  border-radius:20px;
  background:linear-gradient(165deg, rgba(255,255,255,.54), rgba(255,255,255,.32));
  border:1px solid rgba(255,255,255,.56);
}

.field{
  position:relative;
  display:flex;align-items:center;
  height:56px;
  border-radius:var(--radius-field);
  background:rgba(255,255,255,.64);
  border:1px solid rgba(86,67,47,.13);
  box-shadow:0 1px 0 rgba(255,255,255,.72) inset, 0 6px 16px -12px rgba(30,22,16,.42);
  transition:border-color .25s, box-shadow .25s, background .25s;
  margin-bottom:14px;
}
.field:hover{background:rgba(255,255,255,.74);}
.field:focus-within{
  border-color:rgba(207,127,62,.62);
  background:rgba(255,255,255,.88);
  box-shadow:0 0 0 4px rgba(207,127,62,.15), 0 8px 20px -14px rgba(30,22,16,.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(86,67,47,.06);
  color:var(--ink-2);
  display:grid;place-items:center;
  transition:background .2s,color .2s;
}
.toggle-eye:hover{background:rgba(207,127,62,.14);color:var(--amber);}
.toggle-eye svg{width:18px;height:18px;}
.toggle-eye.off svg{opacity:.42;}

/* 校验错误态 */
.field.error{
  border-color:rgba(190,62,46,.55);
  background:rgba(255,247,245,.88);
}
.field.error .field-icon{color:#bc3f2c;}
.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(86,67,47,.30);
  background:rgba(255,255,255,.62);
  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),#c86f2b);
  border-color:transparent;
  box-shadow:0 3px 9px -3px rgba(207,127,62,.75);
}
.remember input:checked + .box svg{opacity:1;transform:scale(1);}
.remember input:focus-visible + .box{box-shadow:0 0 0 3px rgba(207,127,62,.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(207,127,62,.55);}

/* 主按钮 */
.btn-primary{
  position:relative;
  width:100%;height:56px;
  border:0;border-radius:var(--radius-field);cursor:pointer;
  background:linear-gradient(120deg,#2d241c 0%,#241d18 55%,#33291f 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(30,22,16,.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(230,167,106,.95),rgba(207,127,62,.92));
  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(207,127,62,.62), 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:#bc3f2c;text-align:center;
}
.form-msg.ok{color:#3b8f56;}

.card-foot{
  flex:0 0 auto;
  margin-top:14px;padding-top:15px;
  border-top:1px solid rgba(86,67,47,.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(246,242,236,.55);
  text-shadow:0 1px 10px rgba(16,9,4,.55);
}
.dot-sep{width:3px;height:3px;border-radius:50%;background:rgba(246,242,236,.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;
    align-self:auto;            /* 单列堆叠时取消拉伸，状态条回归自然流 */
  }
  .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;
}

/* ===========================================================
   初始账号提示块（新增）
   沿用玻璃拟态语言：暖米底 + 琥珀描边，与登录卡同一族
   =========================================================== */
.login-hint{
  margin:14px 4px 0;
  padding:12px 14px;
  border-radius:14px;
  background:linear-gradient(150deg, rgba(255,252,247,.82), rgba(250,244,235,.68));
  border:1px solid rgba(207,127,62,.34);
  box-shadow:0 2px 10px -6px rgba(30,22,16,.28);
  text-align:left;
}
.login-hint .lh-t{
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--amber);
  margin-bottom:7px;
}
.login-hint .lh-r{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  font-size:12.5px;
  color:var(--ink-2);
}
.login-hint .lh-k{
  color:var(--ink-3);
  margin-left:4px;
}
.login-hint .lh-k:first-child{margin-left:0;}
.login-hint code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;
  padding:2px 7px;
  border-radius:6px;
  background:rgba(207,127,62,.13);
  color:var(--wood-700);
  font-weight:600;
}
.login-hint .lh-n{
  margin-top:7px;
  font-size:11.5px;
  color:var(--ink-3);
}

/* 状态条数值可动态更新时的过渡 */
.status-v{transition:color .2s ease;}