/* ============================================================
   义乌采购网 — 访问密码海报页
   左图右表单；图到表单为渐隐过渡；配色跟随站点主色（--accent）
   ============================================================ */
:root{
  --ink:#191919; --ink-2:#4a4a4a; --slate:#8a8a8a;
  --accent:#ff6a00; --accent-700:#e85d00; --accent-soft:#fff4ec; --accent-ring:#ffe0cc;
  --line:#e6e6e6; --bg:#fff;
}
*{box-sizing:border-box}
html,body{height:100%}
body.gate-body{
  margin:0;background:var(--bg);color:var(--ink);
  font-size:15px;line-height:1.6;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI","Noto Sans",sans-serif;
  -webkit-font-smoothing:antialiased;
}
html[dir="rtl"] body.gate-body{line-height:1.8}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none}
h1,p{margin:0}

/* ---------- 布局 ---------- */
.gate{
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  min-height:100vh;min-height:100dvh;background:var(--bg);
}
.gate-art{
  position:relative;overflow:hidden;
  background:linear-gradient(140deg,var(--accent) 0%,var(--accent-700) 62%,#b24300 100%);
}
.gate-art img{width:100%;height:100%;object-fit:cover;object-position:center}
/* 渐隐：图片右侧溶进白底表单区 */
.gate-art::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 40%, rgba(255,255,255,.35) 68%, rgba(255,255,255,.85) 88%, #fff 100%);
}
html[dir="rtl"] .gate-art::after{
  background:linear-gradient(270deg,
    rgba(255,255,255,0) 40%, rgba(255,255,255,.35) 68%, rgba(255,255,255,.85) 88%, #fff 100%);
}
.gate-panel{
  display:grid;place-items:center;padding:56px 40px;background:var(--bg);
}
.gate-box{width:100%;max-width:330px}

/* ---------- 品牌 / 站名 ---------- */
.gate-hd{display:flex;align-items:center;gap:11px;margin-bottom:26px}
.gate-logo{height:34px;width:auto;max-width:110px;object-fit:contain}
.gate-mark{
  width:34px;height:34px;border-radius:9px;flex:0 0 auto;
  display:grid;place-items:center;font-size:18px;font-weight:700;color:#fff;
  background:linear-gradient(140deg,var(--accent) 0%,var(--accent-700) 100%);
}
.gate-name{
  font-size:23px;font-weight:700;line-height:1.25;letter-spacing:.2px;
}
html[dir="rtl"] .gate-name{letter-spacing:0}
.gate-tag{
  font-size:11px;font-weight:600;letter-spacing:1.4px;color:var(--slate);
  text-transform:uppercase;margin-top:3px;
}

/* ---------- 密码表单 ---------- */
.gate-form{margin-top:22px}
.gate-field{display:block;position:relative}
.gate-field input{
  width:100%;height:52px;padding:0 46px 0 16px;
  font-size:15px;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:12px;outline:none;
  transition:border-color .16s,box-shadow .16s;
  -webkit-appearance:none;appearance:none;
}
html[dir="rtl"] .gate-field input{padding:0 16px 0 46px}
.gate-field input::placeholder{color:#aaa}
.gate-field input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-ring);
}
/* 输入框内右侧小锁 */
.gate-lock{
  position:absolute;top:50%;right:16px;transform:translateY(-50%);
  color:#b9b9b9;pointer-events:none;display:flex;
}
html[dir="rtl"] .gate-lock{right:auto;left:16px}
.gate-field input:focus ~ .gate-lock{color:var(--accent)}

.gate-btn{
  width:100%;height:52px;margin-top:12px;border-radius:12px;
  font-size:15.5px;font-weight:600;color:#fff;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-700) 100%);
  box-shadow:0 8px 20px -8px var(--accent);
  transition:transform .15s,box-shadow .15s,filter .15s;
}
.gate-btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px -10px var(--accent);filter:brightness(1.03)}
.gate-btn:active{transform:none}

.gate-err{
  margin-top:10px;font-size:13.5px;color:#e4393c;
  display:flex;align-items:center;gap:6px;
}
.gate-err::before{content:"!";display:grid;place-items:center;width:16px;height:16px;border-radius:50%;
  background:#fde8e8;font-size:11px;font-weight:700;color:#e4393c}

.gate-hint{
  margin-top:16px;font-size:13px;line-height:1.65;color:var(--slate);
}
.gate-langs{
  margin-top:34px;display:flex;gap:16px;font-size:12.5px;color:#b3b3b3;
}
.gate-langs a{padding:2px 0;border-bottom:1px solid transparent;transition:.15s}
.gate-langs a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.gate-langs a.on{color:var(--ink);font-weight:600}
.gate-copy{margin-top:14px;font-size:11.5px;color:#c4c4c4}

/* ---------- 手机 ---------- */
@media (max-width:860px){
  .gate{grid-template-columns:1fr;grid-template-rows:auto auto;min-height:100dvh}
  .gate-art{height:40vh;min-height:230px}
  .gate-art::after,
  html[dir="rtl"] .gate-art::after{
    background:linear-gradient(180deg,
      rgba(255,255,255,0) 46%, rgba(255,255,255,.4) 70%, rgba(255,255,255,.9) 90%, #fff 100%);
  }
  .gate-panel{padding:6px 24px 46px;place-items:start center}
  .gate-box{max-width:400px;margin:0 auto}
  .gate-name{font-size:21px}
  .gate-hd{margin-bottom:20px}
  .gate-langs{margin-top:26px;justify-content:center}
}
@media (max-width:380px){
  .gate-art{height:34vh;min-height:190px}
  .gate-name{font-size:19.5px}
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}