/* 弹窗、提示条、登录框 */

/* ---------- 弹窗 ---------- */

.s-modal-back { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; background: rgba(2, 3, 8, .6); backdrop-filter: blur(8px); animation: fade .3s ease-out; }
.s-modal-back.out { opacity: 0; transition: opacity .26s; }
.s-modal {
  position: relative;
  width: min(520px, 100%);
  max-height: calc(100vh - 40px);
  padding: 28px;
  border: 1px solid var(--line-2);
  border-radius: 22px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .8);
  overflow-y: auto;
  animation: modal-in .5s var(--ease-spring);
}
.s-modal.wide { width: min(760px, 100%); }
@keyframes modal-in { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.s-modal-x { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 10px; background: transparent; color: var(--text-3); cursor: pointer; transition: color .25s, background .25s; }
.s-modal-x:hover { background: var(--card-2); color: var(--text); }
.s-modal-t { margin: 0 40px 18px 0; font-size: 19px; }
.s-modal-p { margin: 12px 0 0; font-size: 14.5px; line-height: 1.85; color: var(--text-2); }
.s-modal .s-work-f { margin-top: 22px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.s-modal.auth { width: min(1080px, 100%); padding: 0; overflow: hidden; }

/* ---------- 提示条 ---------- */

.s-toasts { position: fixed; left: 50%; bottom: 32px; z-index: 80; display: flex; flex-direction: column; align-items: center; gap: 8px; transform: translateX(-50%); pointer-events: none; }
.s-toast {
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  background: rgba(20, 22, 34, .92);
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 40px -10px rgba(0, 0, 0, .6);
  color: #fff;
  font-size: 13.5px;
  letter-spacing: .04em;
  white-space: nowrap;
  animation: toast-in .45s var(--ease-spring);
}
.s-toast.out { opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; }

/* ---------- 登录框 ---------- */

/* 手机号登录框 */
.s-login { display: grid; gap: 10px; margin-top: 18px; }
.s-login input { height: 44px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 11px; outline: 0; background: var(--field); color: var(--text); font: 15px var(--font-latin); transition: border-color .25s; }
.s-login input:focus { border-color: var(--text-3); }
.s-login input::placeholder { color: var(--text-3); font-family: var(--font); }
.s-login-code { display: flex; gap: 8px; }
.s-login-code input { flex: 1; min-width: 0; }
.s-login-code .s-btn { flex: none; min-width: 116px; }
.s-login-err { min-height: 18px; margin: 0; font-size: 12.5px; color: #ff8f8f; }
.s-login .s-btn.primary { width: 100%; }
.s-login-note { font-size: 11.5px; color: var(--text-3); text-align: center; }
.s-auth { display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); min-height: 540px; }
.s-auth-demo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: 44px 40px 34px;
  border-right: 1px solid var(--line);
  background:
    radial-gradient(520px 360px at 18% 0%, rgba(91, 140, 255, .16), transparent 62%),
    radial-gradient(480px 360px at 100% 100%, rgba(255, 122, 217, .1), transparent 62%),
    var(--card-2);
}
.s-auth-form { display: flex; flex-direction: column; justify-content: center; padding: 52px 36px 36px; }
.s-auth-form .s-modal-t { margin-right: 24px; font-size: 21px; line-height: 1.45; }

/* ---------- 白天 ---------- */

body.day .s-login-err { color: #d93a44; }
body.day .s-modal-back { background: rgba(20, 23, 34, .26); }
body.day .s-modal { box-shadow: 0 40px 120px -30px rgba(20, 30, 60, .35); }

@media (max-width: 820px) {
  .s-modal.auth { overflow-y: auto; }
  .s-auth { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .s-auth-demo { gap: 14px; padding: 22px 16px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .s-auth-form { padding: 22px 20px 24px; }
  .s-toast { white-space: normal; }
}