/* =====================================================================
 * Sello Auth Shared — login / forgot-password / reset-password 共用样式
 * 变量依赖 design-tokens.css（--sello-* 前缀）
 * 使用页面需先引入 design-tokens.css
 * 页面特有样式留在各自模板的 <style> 中。
 * ===================================================================== */

/* ===== Reset ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html,body{
  height:100%;
}

body{
  font-family:var(--sello-font-body);
  background:var(--sello-color-bg);
  color:var(--sello-color-text-primary);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  overflow-x:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--sello-space-lg);
  position:relative;
}

/* ===== Background ===== */
.bg-glow{
  position:fixed;
  border-radius:50%;
  filter:blur(100px);
  pointer-events:none;
  z-index:0;
}
.bg-glow-1{width:500px;height:500px;background:rgba(99,102,241,0.04);top:-200px;left:-150px}
.bg-glow-2{width:400px;height:400px;background:rgba(6,182,212,0.03);bottom:-150px;right:-100px}

.bg-grid{
  position:fixed;
  inset:0;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,0.03) 1px,transparent 0);
  background-size:32px 32px;
  pointer-events:none;
  z-index:0;
}

/* ===== Auth Card ===== */
.auth-card{
  position:relative;
  z-index:1;
  width:100%;
  max-width:400px;
  padding:40px;
  border-radius:var(--sello-radius-lg);
  background:var(--sello-color-bg-card);
  backdrop-filter:blur(var(--sello-blur));
  -webkit-backdrop-filter:blur(var(--sello-blur));
  border:1px solid var(--sello-color-border);
  box-shadow:var(--sello-shadow-md);
  animation:cardIn .5s cubic-bezier(0.16,1,0.3,1);
}

@keyframes cardIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}

/* ===== Brand Header ===== */
.auth-header{
  text-align:center;
  margin-bottom:28px;
}

.auth-logo{
  font-family:var(--sello-font-brand);
  font-size:var(--sello-font-size-xl);
  font-weight:700;
  background:linear-gradient(135deg,var(--sello-color-primary),var(--sello-color-accent));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  display:inline-block;
  margin-bottom:14px;
  text-decoration:none;
}

.auth-header h1{
  font-family:var(--sello-font-heading);
  font-size:var(--sello-font-size-2xl);
  font-weight:700;
  letter-spacing:-0.3px;
  margin-bottom:6px;
}

.auth-header p{
  font-size:var(--sello-font-size-base);
  color:var(--sello-color-text-secondary);
}

/* ===== Forms ===== */
.form-group{
  margin-bottom:14px;
}

label{
  display:block;
  font-size:var(--sello-font-size-sm);
  font-weight:500;
  color:var(--sello-color-text-secondary);
  margin-bottom:6px;
  letter-spacing:0.2px;
}

input{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--sello-color-border);
  border-radius:var(--sello-radius-md);
  background:var(--sello-color-bg-input);
  color:var(--sello-color-text-primary);
  font-size:var(--sello-font-size-lg);
  font-family:var(--sello-font-body);
  outline:none;
  transition:border-color var(--sello-transition),box-shadow var(--sello-transition);
}

input:focus{
  border-color:var(--sello-color-border-focus);
  box-shadow:var(--sello-shadow-focus);
}

input::placeholder{
  color:var(--sello-color-text-disabled);
}

/* Override browser autofill white background */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
  -webkit-box-shadow:0 0 0 30px var(--sello-color-bg-input) inset !important;
  -webkit-text-fill-color:var(--sello-color-text-primary) !important;
  caret-color:var(--sello-color-text-primary);
  transition:background-color 5000s ease-in-out 0s;
}

/* ===== Button ===== */
.btn-primary{
  width:100%;
  padding:12px;
  border:none;
  border-radius:var(--sello-radius-md);
  background:linear-gradient(135deg,rgba(99,102,241,0.9),rgba(6,182,212,0.7));
  color:var(--sello-color-text-primary);
  font-size:var(--sello-font-size-lg);
  font-weight:600;
  font-family:var(--sello-font-body);
  cursor:pointer;
  transition:all var(--sello-transition);
  letter-spacing:0.2px;
  margin-top:var(--sello-space-xs);
  position:relative;
  overflow:hidden;
}

.btn-primary:hover{
  background:linear-gradient(135deg,rgba(129,140,248,0.95),rgba(6,182,212,0.8));
  box-shadow:var(--sello-shadow-sm);
}

.btn-primary:disabled{
  opacity:0.6;
  cursor:not-allowed;
}

/* ===== Loading spinner on button ===== */
.btn-loading .btn-text{visibility:hidden}
.btn-loading .btn-spinner{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

.btn-spinner{
  display:none;
  width:16px;
  height:16px;
  border:2px solid rgba(255,255,255,0.3);
  border-top-color:var(--sello-color-text-primary);
  border-radius:50%;
  animation:spin .6s linear infinite;
}

.btn-loading .btn-spinner{display:block}

@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ===== Messages ===== */
.msg{
  font-size:13px;
  margin-top:12px;
  text-align:center;
  padding:10px 14px;
  border-radius:8px;
  display:none;
  animation:msgPop .35s cubic-bezier(0.16,1,0.3,1);
}

.msg.show{display:block}
.msg.error{background:var(--sello-color-error-soft);color:var(--sello-color-error);border:1px solid var(--sello-color-error-border)}
.msg.success{background:var(--sello-color-success-soft);color:var(--sello-color-success);border:1px solid var(--sello-color-success-border)}

@keyframes msgPop{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}

/* ===== Back link ===== */
.auth-back{
  text-align:center;
  margin-top:16px;
}

.auth-back a{
  font-size:var(--sello-font-size-sm);
  color:var(--sello-color-text-disabled);
  text-decoration:none;
  transition:color var(--sello-transition);
}

.auth-back a:hover{color:var(--sello-color-text-secondary)}

/* ===== Footer ===== */
.auth-footer{
  position:fixed;
  left:0;right:0;bottom:var(--sello-space-md);
  text-align:center;
  font-size:var(--sello-font-size-sm);
  color:var(--sello-color-text-disabled);
  z-index:1;
}

.auth-footer a{
  color:var(--sello-color-text-disabled);
  text-decoration:none;
  transition:color var(--sello-transition);
}
.auth-footer a:hover{color:var(--sello-color-text-secondary)}

@media(max-width:480px){
  .auth-card{padding:var(--sello-space-xl) var(--sello-space-lg)}
  body{padding:var(--sello-space-md)}
}

/* ===== Toast ===== */
.toast-container{
  position:fixed;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:8px;
  pointer-events:none;
}

.toast{
  padding:12px 20px;
  border-radius:10px;
  font-size:13px;
  font-weight:500;
  pointer-events:auto;
  animation:toastIn .35s cubic-bezier(0.16,1,0.3,1);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.06);
}

.toast.success{
  background:var(--sello-color-success-soft);
  color:var(--sello-color-success);
}

.toast.info{
  background:var(--sello-color-primary-soft);
  color:var(--sello-color-primary-hover);
}

@keyframes toastIn{
  from{opacity:0;transform:translateY(-12px)}
  to{opacity:1;transform:translateY(0)}
}