/* 统一登录页 · 与技师工作台同一套色板（墨灰 + Guards Red） */

/* ---------- 品牌字体（文件在 /fonts/，Porsche 官方字体） ---------- */
@font-face{
  font-family:"Porsche Next TT";
  src:url("/fonts/PorscheNextTT-Thin_0.ttf") format("truetype");
  font-weight:100 400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Porsche Design Font";
  src:url("/fonts/PorscheDesignFont.otf") format("opentype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  /* 与 workshop-dispatch-h5/public/style.css 深灰覆盖层一致 */
  --bg:#2b2d2f;
  --card:#35383a;
  --text:#f2f3f4;
  --text2:rgba(240,242,244,.64);
  --text3:rgba(240,242,244,.32);
  --label:rgba(240,242,244,.56);
  --label2:rgba(240,242,244,.30);
  --line:rgba(240,242,244,.13);
  --fill:rgba(255,255,255,.09);

  --accent:#e01b2f;          /* Guards Red，深灰底上亮一档 */
  --accent-press:#c31627;
  --gold:#e0c286;
  --green:#07c160;

  --radius-card:6px;
  --radius-ctl:5px;
  --ease:cubic-bezier(.32,.72,0,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:var(--bg);
  color:var(--text);
  /* 拉丁字母与数字走 Porsche Next TT Thin；中文自动回退系统字体 */
  font-family:"Porsche Next TT",-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Helvetica Neue","Noto Sans SC",sans-serif;
  -webkit-font-smoothing:antialiased;
  font-size:16px;
}
.page{
  position:relative;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  padding:
    calc(28px + env(safe-area-inset-top)) 22px
    calc(16px + env(safe-area-inset-bottom));
  overflow:hidden;
  background:radial-gradient(140% 90% at 50% 0%, #3a3d40 0%, #2b2d2f 55%, #26282a 100%);
}
/* 顶部红色光晕：呼应技师工作台 hero 的深红 */
.halo{
  position:absolute;inset:-8% -30% auto -30%;height:400px;
  background:
    radial-gradient(58% 52% at 50% 26%, rgba(224,27,47,.20), rgba(224,27,47,0) 72%),
    radial-gradient(40% 36% at 84% 4%, rgba(224,194,134,.08), rgba(224,194,134,0) 70%);
  pointer-events:none;filter:blur(1px);
}
.brand{position:relative;text-align:center;padding:6px 0 22px}
/* 品牌字标 PORZI：Porsche Design Font（替代原盾形 LOGO）
   字号为原 52px 的一半；inline-block + 负右外边距抵消末字字距，保证视觉居中 */
.wordmark{
  display:inline-block;vertical-align:top;
  margin:29px -.14em 12px 0;
  font-family:"Porsche Design Font",-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:400;font-size:clamp(20px,6.65vw,26px);line-height:1;letter-spacing:.14em;
  text-align:center;color:var(--text);
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.5));
}
/* 表单区整体下移：上部自动留白，底部与理念行固定 5 行间距 */
.auth{margin-top:auto}

.banner{
  position:relative;
  margin:0 0 12px;padding:11px 13px;border-radius:6px;
  background:rgba(224,27,47,.14);
  border:.5px solid rgba(224,27,47,.28);
  color:#ffb3bb;font-size:13.5px;line-height:1.5;
  animation:fade .22s var(--ease);
}
.banner.err{background:rgba(224,27,47,.16);color:#ffc2c8}
@keyframes fade{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}

.card{
  position:relative;
  background:var(--card);
  border-radius:var(--radius-card);
  overflow:hidden;
  box-shadow:0 12px 34px rgba(0,0,0,.42), 0 0 0 .5px rgba(255,255,255,.06);
}
.row{display:flex;align-items:center;gap:12px;padding:0 14px;height:56px}
.ico{width:19px;height:19px;flex:none;fill:none;stroke:rgba(240,242,244,.42);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.divider{height:.5px;background:var(--line);margin-left:45px}
input{
  flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;
  font-size:17px;color:var(--text);font-family:inherit;letter-spacing:.1px;
  caret-color:var(--accent);
}
input::placeholder{color:var(--label2)}
.row:focus-within{background:rgba(255,255,255,.03)}
.row:focus-within .ico{stroke:var(--accent)}
.eye{
  flex:none;width:34px;height:34px;margin-right:-6px;border:0;background:transparent;
  display:grid;place-items:center;padding:0;cursor:pointer;
}
.eye svg{width:20px;height:20px;fill:none;stroke:rgba(240,242,244,.34);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.eye.on svg{stroke:var(--accent)}
.eye.on svg circle{fill:var(--accent);stroke:var(--accent)}

.btn-primary{
  position:relative;
  margin-top:18px;
  width:100%;height:50px;border:0;border-radius:var(--radius-ctl);
  background:var(--accent);color:#fff;
  font-size:17px;font-weight:600;font-family:inherit;letter-spacing:.6px;
  cursor:pointer;
  transition:transform .12s var(--ease),background .15s var(--ease),opacity .15s;
  display:grid;place-items:center;
  box-shadow:0 8px 22px rgba(224,27,47,.28);
}
.btn-primary:active{transform:scale(.985);background:var(--accent-press)}
.btn-primary[disabled]{opacity:.6;cursor:default;transform:none}
.btn-primary .spin{
  display:none;width:19px;height:19px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:rot .7s linear infinite;position:absolute;
}
.btn-primary.loading .label{opacity:0}
.btn-primary.loading .spin{display:block}
@keyframes rot{to{transform:rotate(360deg)}}

.or{display:flex;align-items:center;gap:12px;margin:18px 2px;color:var(--text3);font-size:12.5px}
.or::before,.or::after{content:"";flex:1;height:.5px;background:var(--line)}

.btn-wecom{
  display:flex;align-items:center;justify-content:center;gap:9px;
  height:50px;border-radius:var(--radius-ctl);text-decoration:none;
  background:rgba(255,255,255,.09);
  color:var(--text);
  border:.5px solid rgba(255,255,255,.18);
  font-size:16.5px;font-weight:500;letter-spacing:.2px;
  transition:transform .12s var(--ease),background .15s var(--ease);
}
.btn-wecom:active{transform:scale(.985);background:rgba(255,255,255,.1)}
.btn-wecom .wx{width:22px;height:22px;fill:var(--green);flex:none}

.creed{margin:120px 0 0;padding:0 6px;text-align:center}
.creed .tags{font-size:12.5px;color:var(--gold);letter-spacing:3px;font-weight:600}
.creed .tags i{font-style:normal;opacity:.45;margin:0 6px;letter-spacing:0}
.creed p{margin:8px 0 0;font-size:12.5px;line-height:1.65;color:var(--text3);letter-spacing:.4px}

.company{
  margin-top:22px;padding-top:0;
  text-align:center;font-size:11.5px;color:rgba(240,242,244,.28);letter-spacing:.6px;
}

/* 桌面预览：保持手机尺度居中 */
@media (min-width:520px){
  body{background:#26282a}
  .page{max-width:430px;margin:0 auto;min-height:100dvh}
}

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