/* Modern login styles ported from client_news layout (simplified) */

/* Page background moved from inline <style> to external CSS to satisfy CSP */
body{background:linear-gradient(180deg,#0b1220 0%,#000 100%); color:#fff}
.login-bg{background:transparent}

/* Container / wrapper to replace legacy layout (.container-login100 / .wrap-login100) */
.login-container, .container-login100 {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2.5rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.limiter{min-height:100vh;display:flex;align-items:center;justify-content:center}

.login-wrapper, .wrap-login100 {
  width: 100%;
  max-width: 1100px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 0;
}

:root{
  --card:#0f1724;
  --muted:#9aa4b2;
  --accent:#06b6d4;
  --focus-shadow: rgba(6,182,212,0.16);
}

.login-modern-wrapper {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: calc(100vh - 0px);
  padding: 2.5rem;
  background: transparent;
  animation: fadeInUp .6s ease both;
}

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

.login-modern-card{
  width:100%;
  max-width:1000px;
  display:flex;
  background: transparent;
  border-radius:12px;
  overflow:hidden;
  box-shadow: 0 8px 30px rgba(2,6,23,0.55);
  border: 1px solid rgba(255,255,255,0.06);
}

.login-modern-left{
  flex:1;
  padding:40px 44px;
  color:#fff;
}

.login-modern-right{
  width:40%;
  min-width:260px;
  position:relative;
}

.login-modern-right img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:brightness(0.45) saturate(0.85);
}

.login-image-upload{position:absolute;left:12px;bottom:12px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.login-image-upload .upload-note{font-size:12px;color:var(--muted)}
.login-image-upload input[type="file"]{display:none}
@media (max-width:768px){
  .login-image-upload{display:none}
}

.login-modern-title{font-size:24px;margin-bottom:8px;font-weight:700}
.login-modern-sub{color:var(--muted);margin-bottom:20px}

.login-field{margin-bottom:16px}
.login-field label{display:block;font-size:13px;margin-bottom:8px;color:var(--muted)}

.login-field input{
  width:100%;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  background:rgba(255,255,255,0.02);
  color:#fff;
  font-size:15px;
  transition: box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

.login-field input::placeholder{color:rgba(255,255,255,0.35)}

/* Focus-visible for keyboard users */
.login-field input:focus-visible, .login-btn:focus-visible, .btn-ghost:focus-visible, .social-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px var(--focus-shadow);
  border-color: var(--accent);
}

.login-actions{display:flex;gap:10px;align-items:center;margin-top:14px}

.login-btn{
  background:var(--accent);
  color:#06202a;
  padding:12px 16px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  font-weight:700;
  font-size:15px;
  transition: transform .12s cubic-bezier(.2,.8,.2,1), box-shadow .12s ease, filter .12s ease;
}

.login-btn:hover{transform: translateY(-3px); box-shadow: 0 8px 20px rgba(6,182,212,0.12); filter:brightness(1.02)}

.social-btn{border:1px solid rgba(255,255,255,0.06);padding:12px;border-radius:10px;background:transparent;display:flex;align-items:center;justify-content:center;color:#fff;gap:8px;transition:transform .12s ease, box-shadow .12s ease}
.social-btn:hover{transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.5)}
.social-btn .mdi{font-size:18px}

.discord-btn{background: linear-gradient(90deg,#5865f2,#6a7df6); color:#fff; border:none}
.discord-btn:hover{filter:brightness(1.05)}

.google-btn{background: linear-gradient(90deg,#4285F4,#34A853,#FBBC05,#EA4335); color:#fff; border:none}
.google-btn:hover{filter:brightness(1.03)}

.btn-ghost{
  background:transparent;
  color:var(--muted);
  padding:12px 14px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.06);
  cursor:pointer;
}

.field-separator{margin-top:20px;text-align:center;color:var(--muted);font-size:13px}

.social-grid{display:grid;grid-template-columns:1.4fr 0.2fr 1.4fr;gap:14px;margin-top:18px;align-items:center}
.social-slot{min-height:55px; width:100%}
.social-btn{width:100%;border:1px solid rgba(255,255,255,0.06);padding:16px 22px;border-radius:12px;background:transparent;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;min-height:56px}
.social-btn svg{display:block}
.social-btn .mdi{font-size:22px}

/* On narrow screens, stack the buttons and hide the slot */
@media (max-width: 420px){
  .social-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .social-slot{display:none}
}

.login-terms{font-size:13px;color:var(--muted);margin-top:16px}

/* Make buttons easier to tap on mobile */
@media (max-width: 768px){
  .login-modern-card{flex-direction:column}
  .login-modern-right{width:100%;height:220px}
  .login-modern-left{padding:28px}
  .login-modern-title{font-size:20px}
  .login-actions{flex-direction:column;align-items:stretch}
  .login-actions .login-btn, .login-actions .btn-ghost{width:100%}
  .social-grid{grid-template-columns:repeat(3,1fr);gap:8px}
}

@media (max-width: 420px){
  .login-wrapper{padding:0 12px}
  .login-modern-left{padding:20px}
  .login-modern-right{height:160px}
  .login-modern-title{font-size:18px}
  .login-field input{font-size:14px;padding:10px 12px}
}

/* Respect user prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .login-btn, .login-field input{transition:none}
}