:root{
  --bg:#0b1b33;
  --panel:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#dbe3ee;
  --primary:#0b5ea8;
  --primary-2:#0ea5b7;
  --danger:#dc2626;
  --success:#15803d;
  --shadow:0 18px 44px rgba(2,6,23,.30);
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{
  width:100%;
  min-height:100%;
  margin:0;
}

body{
  min-height:100vh;
  min-height:100dvh;
  overflow-x:hidden;
  color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
}

.bg{
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 18% 10%,rgba(14,165,183,.20),transparent 43%),
    radial-gradient(circle at 82% 72%,rgba(11,94,168,.28),transparent 48%),
    linear-gradient(180deg,rgba(11,27,51,.84),rgba(10,37,64,.90)),
    url("../SFBack.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(2,6,23,.25),rgba(2,6,23,.48));
}

.wrap{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:28px 16px;
}

.login-shell{ width:min(420px,94vw); }

.card{
  width:100%;
  padding:26px 26px 20px;
  border:1px solid rgba(226,232,240,.90);
  border-radius:18px;
  background:rgba(255,255,255,.97);
  box-shadow:var(--shadow);
  backdrop-filter:blur(8px);
}

.brand{
  display:grid;
  place-items:center;
  gap:12px;
  margin-bottom:16px;
}

.logo{
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:16px;
  background:rgba(14,165,183,.10);
  box-shadow:inset 0 0 0 1px rgba(14,165,183,.18);
}

.logo img{
  width:100%;
  height:100%;
  padding:10px;
  object-fit:contain;
}

.title{
  margin:0;
  text-align:center;
  font-size:22px;
  font-weight:800;
  letter-spacing:.1px;
}

.subtitle{
  margin:6px 0 0;
  text-align:center;
  color:var(--muted);
  font-size:13px;
}

form{
  display:grid;
  gap:12px;
  margin-top:16px;
}

.field{ display:grid; gap:7px; }

.label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:var(--muted);
  font-size:12px;
}

.req{
  color:#ef4444;
  font-size:11px;
  font-weight:800;
}

.input{
  width:100%;
  padding:12px;
  border:1px solid var(--border);
  border-radius:12px;
  outline:none;
  background:#fff;
  color:var(--text);
  font-size:16px;
  transition:border-color .15s ease,box-shadow .15s ease;
  -webkit-text-size-adjust:100%;
}

.input:focus{
  border-color:rgba(14,165,183,.70);
  box-shadow:0 0 0 4px rgba(14,165,183,.13);
}

.input:disabled{ opacity:.72; cursor:not-allowed; }

.pw-wrap{
  position:relative;
  width:100%;
}

.pw-wrap .input{
  width:100%;
  padding-right:52px;
}

/* 隐藏 Microsoft Edge 自带的密码眼睛 */
.pw-wrap .input::-ms-reveal,
.pw-wrap .input::-ms-clear{
  display:none;
}

/* 密码显示/隐藏按钮 */
.pw-eye{
  position:absolute;
  top:50%;
  right:7px;
  transform:translateY(-50%);

  width:40px;
  height:40px;
  padding:0;
  margin:0;

  display:flex;
  align-items:center;
  justify-content:center;

  border:0;
  border-radius:10px;
  background:transparent;
  color:#64748b;

  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  -webkit-tap-highlight-color:transparent;

  transition:
    color .15s ease,
    background-color .15s ease,
    transform .12s ease;
}

.pw-eye:hover{
  color:var(--primary);
  background:#eef6fb;
}

.pw-eye:active{
  transform:translateY(-50%) scale(.92);
}

.pw-eye:focus-visible{
  outline:2px solid rgba(14,165,183,.65);
  outline-offset:1px;
}

.pw-eye:disabled{
  opacity:.5;
  cursor:not-allowed;
}

/* SVG 眼睛图标 */
.eye-icon{
  width:19px;
  height:19px;

  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;

  pointer-events:none;
}

/* 默认隐藏“闭眼”图标 */
.eye-closed{
  display:none;
}

/* 密码已显示时，切换图标 */
.pw-eye[aria-pressed="true"] .eye-open{
  display:none;
}

.pw-eye[aria-pressed="true"] .eye-closed{
  display:block;
}

.btn{
  width:100%;
  padding:12px 14px;
  border:0;
  border-radius:12px;
  color:#fff;
  background:linear-gradient(180deg,rgba(14,165,183,.96),rgba(11,94,168,.96));
  box-shadow:0 10px 18px rgba(11,94,168,.22);
  cursor:pointer;
  font-size:14px;
  font-weight:800;
  letter-spacing:.6px;
  text-transform:uppercase;
  transition:transform .12s ease,filter .12s ease,opacity .12s ease;
}

.btn:hover{ transform:translateY(-1px); filter:brightness(1.03); }
.btn:disabled{ opacity:.65; cursor:not-allowed; transform:none; }

.meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding-top:12px;
}

.link{
  color:var(--primary);
  font-size:13px;
  font-weight:700;
  text-decoration:none;
}
.link:hover{ text-decoration:underline; }
.version{ color:var(--muted); font-size:12px; }

.status{
  min-height:20px;
  margin-top:4px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.status.error{ color:var(--danger); font-weight:700; }
.status.ok{ color:var(--success); font-weight:700; }

.foot{
  margin-top:14px;
  text-align:center;
  color:rgba(219,234,254,.90);
  font-size:12px;
  user-select:none;
}

@media(max-width:420px){
  .card{ padding:22px 18px 17px; }
  .title{ font-size:20px; }
}