/* ============================================================= */
/* 三狗云支付 · 登录 / 注册页现代蔚蓝样式  sanguo-auth.css        */
/* 命名空间 .sg- 覆盖 app.css，保留原有表单字段与 JS 逻辑          */
/* ============================================================= */

.sg-auth-body {
  margin: 0; padding: 0;
  font-family: "PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  background: #eef5fd; color: #47596b;
}
.sg-auth { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }

/* ---------- 左侧品牌面板 ---------- */
.sg-auth-brand {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(150deg,#1491f0 0%,#0b72e7 48%,#0a57b8 100%);
  display: flex; align-items: center; padding: 56px;
}
.sg-auth-brand::before, .sg-auth-brand::after { content:""; position:absolute; border-radius:50%; background:rgba(255,255,255,.10); pointer-events:none; }
.sg-auth-brand::before { width:420px; height:420px; top:-140px; right:-120px; }
.sg-auth-brand::after { width:300px; height:300px; bottom:-120px; left:-80px; background:rgba(255,255,255,.08); }
.sg-auth-brand-inner { position:relative; z-index:1; width:100%; max-width:420px; margin:0 auto; }
.sg-auth-logo { display:inline-flex; align-items:center; gap:10px; font-size:22px; font-weight:800; color:#fff; text-decoration:none; }
.sg-mark { width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.35); display:inline-flex; align-items:center; justify-content:center; font-size:20px; }
.sg-mark.sg-mark-img { background:#fff; padding:4px; border:none; }
.sg-mark-img img { width:100%; height:100%; object-fit:contain; display:block; }
.sg-pitch { margin-top:56px; }
.sg-pitch h2 { color:#fff; font-size:38px; font-weight:800; line-height:1.28; margin:0 0 16px; text-balance; }
.sg-pitch p { color:rgba(255,255,255,.9); font-size:17px; margin:0 0 30px; }
.sg-pitch ul { list-style:none; margin:0; padding:0; }
.sg-pitch ul li { display:flex; align-items:center; gap:12px; font-size:16px; color:rgba(255,255,255,.95); margin-bottom:16px; }
.sg-pitch ul li i { color:#bff0d0; font-size:18px; }
.sg-brand-foot { position:absolute; bottom:34px; left:56px; right:56px; color:rgba(255,255,255,.78); font-size:13px; display:flex; align-items:center; gap:8px; }

/* ---------- 右侧表单面板 ---------- */
.sg-auth-main { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 24px; }
.sg-auth-card {
  width:100%; max-width:432px; background:#fff; border-radius:22px; padding:40px 38px;
  box-shadow:0 30px 60px -20px rgba(7,59,125,.28); border:1px solid #eaf2fb;
  animation:sgCardIn .5s ease;
}
@keyframes sgCardIn { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
.sg-card-head { text-align:center; margin-bottom:26px; }
.sg-card-head h3 { font-size:24px; font-weight:700; color:#16283a; margin:0 0 8px; }
.sg-card-head p { color:#8296a8; font-size:14px; margin:0; }
.sg-auth-foot { margin-top:22px; text-align:center; font-size:13px; color:#9fb3c8; }
.sg-auth-foot a { color:#9fb3c8; }

/* ---------- Tabs（登录方式） ---------- */
.sg-tabs { display:flex; border-bottom:2px solid #eef3f9; margin:0 0 22px; padding:0; list-style:none; }
.sg-tabs li { margin:0; }
.sg-tabs li > a { display:block; text-align:center; padding:11px 0; color:#8296a8; font-weight:500; border:none; border-radius:0; position:relative; transition:color .2s; }
.sg-tabs li > a:hover { color:#0b72e7; background:none; }
.sg-tabs li.active > a { color:#0b72e7; background:none; font-weight:600; }
.sg-tabs li.active > a::after { content:""; position:absolute; left:50%; bottom:-2px; transform:translateX(-50%); width:46px; height:3px; border-radius:3px; background:#0b72e7; }

/* ---------- 输入字段 ---------- */
.sg-fields { margin:0; padding:0; border:none; background:none; }
.sg-fields .list-group-item { padding:0; border:none; background:none; position:relative; margin:0 0 14px; }
.sg-fields .sg-ic { position:absolute; left:4px; top:50%; transform:translateY(-50%); color:#9fb3c8; font-size:16px; z-index:2; }
.sg-fields .form-control {
  border:1.5px solid #e3edf8; border-radius:12px; height:50px; padding:6px 14px 6px 38px;
  font-size:15px; background:#f8fbff; box-shadow:none; color:#16283a;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.sg-fields .form-control::placeholder { color:#a9bacb; }
.sg-fields .form-control:focus { border-color:#0b72e7; background:#fff; box-shadow:0 0 0 4px rgba(11,114,231,.10); outline:none; }
.sg-fields .input-group { position:relative; display:flex; align-items:stretch; gap:8px; }
.sg-fields .input-group .form-control { flex:1 1 auto; min-width:0; padding-right:14px; text-align:left; }
.sg-fields .input-group .form-control::placeholder { text-align:left; }
.sg-fields .input-group-addon {
  flex:0 0 auto; padding:0 16px; margin:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.6); border-radius:12px;
  background:linear-gradient(135deg, rgba(90,178,255,.85), rgba(11,114,231,.74));
  color:#fff; font-size:13px; white-space:nowrap; cursor:pointer;
  backdrop-filter:blur(9px) saturate(160%); -webkit-backdrop-filter:blur(9px) saturate(160%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7), 0 4px 12px rgba(11,114,231,.28);
  position:relative; overflow:hidden;
  transition:transform .12s ease, box-shadow .22s ease, filter .22s ease;
}
.sg-fields .input-group-addon::after {
  content:""; position:absolute; top:-25%; left:-85%; width:42%; height:150%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.92), transparent);
  transform:skewX(-22deg); opacity:0; pointer-events:none;
}
.sg-fields .input-group-addon:hover { filter:brightness(1.06); box-shadow:inset 0 1px 1px rgba(255,255,255,.8), 0 6px 16px rgba(11,114,231,.4); }
.sg-fields .input-group-addon:active { transform:translateY(1px) scale(.97); }
.sg-fields .input-group-addon:active::after { animation:sgAuthReflect .55s ease-out; }

/* ---------- 提交按钮 ---------- */
.sg-submit {
  display:block; width:100%; margin-top:8px; height:52px; border:none; border-radius:12px;
  font-size:16px; font-weight:600; letter-spacing:1px; color:#fff; cursor:pointer;
  background:linear-gradient(135deg,#1491f0,#0b72e7 55%,#0a57b8);
  box-shadow:0 10px 22px -8px rgba(11,114,231,.55);
  transition:transform .14s ease, box-shadow .24s ease, filter .24s ease; position:relative; overflow:hidden;
}
.sg-submit:hover { color:#fff; transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 16px 28px -8px rgba(11,114,231,.6); }
.sg-submit:active { transform:translateY(1px) scale(.98); filter:brightness(.96); }
.sg-submit::before { content:""; position:absolute; top:0; left:-70%; width:45%; height:100%; background:linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent); transform:skewX(-20deg); transition:left .55s ease; }
.sg-submit:hover::before { left:135%; }

/* ---------- 表单链接 ---------- */
.sg-form-links { display:flex; align-items:center; justify-content:space-between; margin-top:18px; }
.sg-form-links a { color:#0b72e7; font-size:14px; text-decoration:none; }
.sg-form-links a:hover { color:#0a57b8; }

/* ---------- 分隔 + 快捷登录 ---------- */
.sg-divider { display:flex; align-items:center; gap:12px; margin:24px 0 16px; color:#b7c6d6; font-size:13px; }
.sg-divider::before, .sg-divider::after { content:""; flex:1; height:1px; background:#eaf1f9; }
.sg-oauth { display:flex; justify-content:center; gap:16px; }
.sg-oauth-btn {
  width:48px; height:48px; border-radius:50%; border:1.5px solid #e3edf8; background:#fff; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; font-size:22px; padding:0;
  transition:transform .18s, border-color .18s, box-shadow .18s;
}
.sg-oauth-btn:hover { transform:translateY(-3px); border-color:#0b72e7; box-shadow:0 8px 18px -8px rgba(11,114,231,.4); }
.sg-oauth-btn img { width:26px; height:26px; border-radius:50%; }
.sg-oauth-btn .fa-qq { color:#0bb2ff; }
.sg-oauth-btn .fa-wechat { color:#07c160; }

/* ---------- 注册页补充 ---------- */
.sg-back-link { display:block; text-align:center; margin-top:16px; color:#8296a8; font-size:14px; text-decoration:none; }
.sg-back-link:hover { color:#0b72e7; }
.sg-agree { padding:2px 0 6px; font-size:14px; color:#5a6b7b; }
.sg-agree a { color:#0b72e7; }
.sg-agree .i-checks input { margin-top:2px; }
.sg-price-note { background:rgba(11,114,231,.06); border:1px solid rgba(11,114,231,.15); color:#0a57b8; border-radius:10px; padding:10px 14px; font-size:14px; margin-bottom:18px; text-align:center; }

/* ---------- 注册须知弹窗蔚蓝化 ---------- */
#myModal .modal-content { border-radius:16px; border:none; box-shadow:0 24px 60px -18px rgba(7,59,125,.4); }
#myModal .modal-header { border-bottom:1px solid #eef3f9; }
#myModal .modal-title { color:#16283a; font-weight:700; }
#myModal .modal-footer .btn-white { border-color:#e3edf8; color:#0b72e7; }

/* ---------- 移动端 ---------- */
@media (max-width: 900px) {
  .sg-auth { grid-template-columns:1fr; }
  .sg-auth-brand { padding:34px 24px; }
  .sg-pitch { margin-top:22px; }
  .sg-pitch h2 { font-size:26px; }
  .sg-pitch ul { display:none; }
  .sg-brand-foot { position:static; margin-top:20px; }
  .sg-auth-main { padding:28px 18px 40px; }
  .sg-auth-card { padding:30px 22px; box-shadow:0 18px 40px -18px rgba(7,59,125,.25); }
}

/* ---------- 找回密码：下拉选择框 ---------- */
.sg-fields select.form-control { cursor: pointer; padding-right: 34px; appearance: auto; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%230b72e7' stroke-width='2' fill='none' stroke-linecap='round'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; }

/* ---------- 液态玻璃化 + 点击反光 ---------- */
.sg-submit {
  background: linear-gradient(135deg, rgba(90,178,255,.85), rgba(11,114,231,.74)) !important;
  border: 1px solid rgba(255,255,255,.6) !important;
  backdrop-filter: blur(9px) saturate(160%);
  -webkit-backdrop-filter: blur(9px) saturate(160%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.7), 0 10px 22px -8px rgba(11,114,231,.55);
}
.sg-submit::after {
  content:""; position:absolute; top:-25%; left:-85%; width:42%; height:150%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.92), transparent);
  transform: skewX(-22deg); opacity:0; pointer-events:none;
}
.sg-submit:active::after { animation: sgAuthReflect .55s ease-out; }
@keyframes sgAuthReflect { 0%{left:-85%;opacity:0} 20%{opacity:1} 100%{left:135%;opacity:0} }
.sg-oauth-btn {
  background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(224,237,252,.55)) !important;
  border: 1.5px solid rgba(255,255,255,.85) !important;
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.85), 0 4px 12px rgba(11,114,231,.14);
  position: relative; overflow: hidden;
}
.sg-oauth-btn::after {
  content:""; position:absolute; top:-25%; left:-85%; width:42%; height:150%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.9), transparent);
  transform: skewX(-22deg); opacity:0; pointer-events:none;
}
.sg-oauth-btn:active::after { animation: sgAuthReflect .55s ease-out; }

/* ---------- 记住我 ---------- */
.sg-remember { display:flex; align-items:center; margin:2px 0 16px; }
.sg-remember label { display:inline-flex; align-items:center; gap:8px; font-size:14px; color:#5a6b7b; cursor:pointer; min-height:24px; user-select:none; }
.sg-remember input[type="checkbox"] { width:16px; height:16px; margin:0; accent-color:#0b72e7; cursor:pointer; }