/* Gray-white tech style login overrides */
:root {
  --accent:#1a4b8c;
  --accent-glow:#2563eb;
  --accent-gradient-start: #3b82f6; /* 渐变起始色 - 较浅的蓝 */
  --accent-gradient-end: #1e3a8a; /* 渐变结束色 - 更深的蓝 */
  --bg-light:#f8f9fa;
  --bg-panel:#ffffff;
  --bg-panel-alt:#f1f3f4;
  --line:#e0e3e7;
  --text:#1a1d20;
  --text-dim:#5f6368;
  --text-muted:#9aa0a6;
  --focus-ring:0 0 0 2px rgba(26,75,140,.4),0 0 0 4px rgba(26,75,140,.15);
}

body, .login-page {background: linear-gradient(135deg, #f8f9fa 0%, #e8eaed 40%, #f1f3f4 100%) fixed; color:var(--text); font-family: "Segoe UI", system-ui, sans-serif; min-height: 100vh;}

.login-page .container {
  min-height: 100vh;
}

.login-page::before {background:linear-gradient(45deg, rgba(224,227,231,.6), rgba(241,243,244,.3)) !important; filter:none !important; -webkit-filter:none !important; opacity:.7;}
.login-page .form-holder.login-card {background:linear-gradient(145deg, var(--bg-panel), var(--bg-panel-alt)) !important; border:1px solid var(--line);}
.login-page .form-holder.login-card .form {min-height:auto;}
.login-page .form-holder.login-card .content {padding:0;}

.dark-login-bg::before { /* subtle animated grid */
  content:""; position:fixed; inset:0; pointer-events:none; background:
      linear-gradient(var(--line) 1px, transparent 1px) 0 0/ 80px 80px,
      linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0/ 80px 80px;
  mask:linear-gradient(180deg, rgba(0,0,0,.3), transparent 60%);
  animation:gridMove 20s linear infinite;
  opacity:.5;
  z-index:0;
}
@keyframes gridMove {from {transform:translateY(0);} to {transform:translateY(80px);} }

.login-card {background:linear-gradient(145deg, var(--bg-panel), var(--bg-panel-alt)); backdrop-filter: blur(10px);
  position:relative; width:100%; max-width:380px; border-radius:16px; padding:36px 32px 30px; 
  box-shadow:
    /* 主要阴影 */ 0 4px 20px -4px rgba(26,29,32,.15), 
    /* 边框 */ 0 0 0 1px var(--line), 
    /* 微妙的蓝色发光 */ 0 0 12px -6px rgba(26,75,140,.2);
  transition:max-width .3s, padding .3s;
}
.login-card::after { /* accent glow line */
  content:""; position:absolute; inset:0; padding:1px; border-radius:inherit; 
  background:linear-gradient(135deg, 
    rgba(26,75,140,.6) 0%, 
    rgba(26,75,140,.3) 30%, 
    rgba(26,75,140,0) 50%, 
    rgba(26,75,140,.4) 80%, 
    rgba(26,75,140,.6) 100%); 
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite:exclude; pointer-events:none;
  opacity: 0.7;
}

.login-title {font-size:1.7rem; background:linear-gradient(90deg,var(--text),var(--text-dim)); -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:.05em;}
.login-sub {letter-spacing:.15em; font-size:.6rem; text-transform:uppercase; color:var(--text-muted);}

.logo-spark {width:54px; height:54px; border:2px solid var(--accent); border-radius:12px; margin:0 auto; position:relative; box-shadow:0 0 0 1px rgba(26,75,140,.3),0 0 8px -2px var(--accent-glow) inset,0 0 12px -4px var(--accent-glow); display:flex; align-items:center; justify-content:center; background:rgba(26,75,140,.05);}
.logo-spark::before, .logo-spark::after {content:""; position:absolute; background:var(--accent); border-radius:2px;}
.logo-spark::before {width:60%; height:2px;}
.logo-spark::after {height:60%; width:2px;}

.login-form .form-label {color:var(--text-dim); letter-spacing:.12em; font-weight:600; font-size:.8rem;}
.tracking-wide {letter-spacing:.12em;}

.floating-input {position:relative;}
.floating-input .form-control {background:rgba(0,0,0,.02); border:1px solid var(--line); padding:10px 12px; color:var(--text); font-size:.9rem; border-radius:8px; transition:.25s border-color, .25s background, .25s transform;}
.floating-input .form-control:hover {border-color:var(--text-dim); background:rgba(0,0,0,.04);}
.floating-input .form-control:focus {border-color:var(--accent); box-shadow:var(--focus-ring); background:rgba(26,75,140,.03);}
.floating-input .focus-border {position:absolute; inset:0; pointer-events:none; border:1px solid rgba(26,75,140,.3); opacity:0; border-radius:10px; transition:.4s; filter:blur(1px);} 
.floating-input .form-control:focus + .focus-border {opacity:1; box-shadow:0 0 0 2px rgba(26,75,140,.2),0 0 12px -2px var(--accent-glow);} 

.styled-check {background:var(--bg-panel); border:1px solid var(--line); width:18px; height:18px; cursor:pointer;}
.styled-check:focus {box-shadow:var(--focus-ring);} 
.styled-check:checked {background:var(--accent); border-color:var(--accent);}

.btn-accent { --btn-bg:linear-gradient(135deg, var(--accent-gradient-start) 0%, var(--accent-gradient-end) 100%); position:relative; background:var(--btn-bg); color:#fff; border:1px solid var(--accent-gradient-end); border-radius:12px; overflow:hidden; letter-spacing:.08em; text-transform:uppercase; font-size:.9rem; box-shadow: inset 0 1px 0 rgba(255,255,255,0.15); }
.btn-accent .btn-accent-bg {position:absolute; inset:0; background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.25), transparent 60%); mix-blend-mode:overlay; opacity:0; transition:.5s;}
.btn-accent:hover { background: linear-gradient(135deg, #60a5fa 0%, var(--accent-gradient-start) 100%); border-color: var(--accent-gradient-start); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); }
.btn-accent:hover .btn-accent-bg {opacity:.9;} 
.btn-accent:active {transform:translateY(1px);} 
.btn-accent:focus {box-shadow:var(--focus-ring);} 

.subtle-link {position:relative; text-decoration:none;}
.subtle-link::after {content:""; position:absolute; left:50%; bottom:-2px; width:0; height:1px; background:var(--accent); transition:.35s; box-shadow:0 0 6px -1px var(--accent-glow);} 
.subtle-link:hover::after {width:100%; left:0;} 
.text-accent {color:var(--accent-glow)!important;} 
.text-accent:hover {color:var(--accent)!important;} 

/* micro animation for card floating */
@media (prefers-reduced-motion: no-preference) {
  .login-card {animation:floatY 9s ease-in-out infinite;}
  .login-card::after {animation:subtleGlow 6s ease-in-out infinite;}
  @keyframes floatY {0%,100% {transform:translateY(0);} 50% {transform:translateY(-6px);} }
  @keyframes subtleGlow {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 0.5; }
  }
}

@media (max-width:576px) {
  .login-card {max-width:340px; padding:30px 24px 26px;}
  .login-title {font-size:1.45rem;}
}
@media (max-width:380px) {
  .login-card {max-width:100%; padding:26px 20px 24px; border-radius:14px;}
  .login-title {font-size:1.35rem;}
  .login-form .form-label {font-size:.75rem;}
  .floating-input .form-control {padding:9px 11px; font-size:.85rem;}
}

/* 为注册页面提供更多空间 */
.login-card.register-card {
  max-width: 420px;
  padding: 32px 28px 28px;
}

@media (max-width:576px) {
  .login-card.register-card {max-width:360px; padding:28px 22px 24px;}
}
@media (max-width:380px) {
  .login-card.register-card {max-width:100%; padding:24px 18px 22px;}
}