/* Login page – professional, minimal, mobile-first (320px+) */
:root{
  --bg:#f6f7fb; --surface:#fff; --border:#e3e6ee;
  --text:#0f172a; --text-muted:#64748b;
  --primary:#4f46e5; --primary-hover:#4338ca; --primary-ring:rgba(79,70,229,.18);
  --danger:#ef4444; --danger-soft:#fef2f2;
  --success:#10b981; --success-soft:#d1fae5;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased;
  display:flex; align-items:center; justify-content:center; padding:1rem;
}

/* Subtle dot pattern background */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, #d1d5db 1px, transparent 0);
  background-size:24px 24px; opacity:.4;
}

.login-card{
  width:100%; max-width:400px;
  background:var(--surface);
  border:1px solid rgba(226,232,240,.8);
  border-radius:24px;
  box-shadow:0 20px 60px -15px rgba(15,23,42,.12), 0 1px 3px rgba(15,23,42,.05), 0 0 0 1px rgba(255,255,255,.5) inset;
  padding:2.25rem;
  animation:rise .6s cubic-bezier(.2,.7,.2,1) both;
  position:relative;
}
@media (min-width:480px){ .login-card{padding:2.75rem} }

/* Subtle gradient border effect */
.login-card::before{
  content:""; position:absolute; inset:0; border-radius:24px; padding:1px;
  background:linear-gradient(135deg, rgba(255,255,255,.8), rgba(255,255,255,0), rgba(255,255,255,.4));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}

.brand{
  display:flex; align-items:center; gap:.75rem; margin-bottom:1.75rem;
}
.brand-mark{
  width:44px; height:44px; border-radius:12px; background:var(--primary);
  display:grid; place-items:center; color:#fff; font-weight:700; font-size:18px;
  box-shadow:0 8px 24px rgba(79,70,229,.35), inset 0 0 0 1px rgba(255,255,255,.1);
}
.brand-text strong{display:block;font-size:1rem;font-weight:600;color:var(--text);letter-spacing:-.01em}
.brand-text span{display:block;font-size:.7rem;color:var(--text-muted);font-weight:500;letter-spacing:.06em;text-transform:uppercase;margin-top:.15rem}

h1.title{font-size:1.5rem; margin:0 0 .35rem; letter-spacing:-.02em;font-weight:700}
.subtitle{color:var(--text-muted); font-size:.9rem; margin:0 0 1.5rem;font-weight:400}

.alert{
  display:flex; gap:.6rem; align-items:flex-start;
  padding:.75rem 1rem; border-radius:10px; font-size:.85rem;
  background:var(--danger-soft); color:#991b1b; border:1px solid #fecaca;
  margin-bottom:1.25rem;
  animation:rise .25s ease both;
}
.alert.success{background:#ecfdf5;color:#065f46;border-color:#a7f3d0}
.alert .ico{width:18px;height:18px;flex-shrink:0;margin-top:1px;stroke-width:2}

.form-group{margin-bottom:1.1rem; position:relative}
.form-label{
  display:block; font-size:.78rem; font-weight:600;
  color:#374151; margin-bottom:.4rem; letter-spacing:.01em;
}
.input-wrap{position:relative}
.input-wrap .ico{
  position:absolute; left:1rem; top:50%; transform:translateY(-50%);
  width:20px; height:20px; color:#94a3b8; pointer-events:none; stroke-width:1.75;
  transition:color .2s;
}
.form-control:focus + .ico, .input-wrap:focus-within .ico{color:var(--primary)}
.form-control{
  width:100%; padding:1rem 1rem 1rem 2.8rem;
  font-size:.95rem; color:var(--text); line-height:1.5;
  border:1.5px solid #e2e8f0; border-radius:14px;
  background:#f8fafc;
  transition:all .2s ease;
}
.form-control:hover{background:#f1f5f9; border-color:#cbd5e1}
.form-control:focus{outline:0; border-color:var(--primary); background:#fff; box-shadow:0 0 0 4px var(--primary-ring), 0 1px 2px rgba(79,70,229,.05)}

/* Password field with eye icon needs right padding */
#password{padding-right:3.5rem}
.form-control::placeholder{color:#9ca3af}
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 30px #f8fafc inset !important;
  -webkit-text-fill-color:var(--text) !important;
}

.toggle-eye{
  position:absolute; right:.75rem; top:50%; transform:translateY(-50%);
  background:#f1f5f9; border:1px solid #e2e8f0; color:#64748b; 
  width:36px; height:36px; cursor:pointer; border-radius:10px;
  transition:all .2s ease;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  padding:0;
  margin:0;
  line-height:1;
}
.toggle-eye:hover{
  color:var(--primary); 
  background:#e0e7ff; 
  border-color:var(--primary);
  box-shadow:0 2px 8px rgba(79,70,229,.15);
}
.toggle-eye:active{transform:translateY(-50%) scale(.95)}
.toggle-eye svg, .toggle-eye .ico{
  width:20px;
  height:20px;
  display:block;
  margin:auto;
  flex-shrink:0;
}

/* Active state when password is visible */
.toggle-eye.showing{
  color:var(--primary);
  background:#e0e7ff;
  border-color:var(--primary);
}

.row-between{display:flex; align-items:center; justify-content:space-between; margin:.5rem 0 1.5rem; font-size:.85rem}
.check{display:inline-flex; align-items:center; gap:.5rem; color:#4b5563; cursor:pointer; user-select:none;font-weight:500}
.check input{accent-color:var(--primary); width:16px; height:16px; cursor:pointer}
.link{color:var(--primary); font-weight:600;text-decoration:none;transition:color .15s}
.link:hover{color:var(--primary-hover); text-decoration:underline}

.btn-submit{
  width:100%; padding:1rem 1.25rem; font-size:1rem; font-weight:600;
  color:#fff; background:linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); border:0; border-radius:14px;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(79,70,229,.4), 0 1px 2px rgba(79,70,229,.2), inset 0 1px 0 rgba(255,255,255,.15);
  transition:all .2s ease;
  position:relative; overflow:hidden;
}
.btn-submit::before{
  content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,.15), transparent);
  opacity:0; transition:opacity .2s;
}
.btn-submit:hover{
  background:linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
  box-shadow:0 8px 24px rgba(79,70,229,.5), 0 2px 4px rgba(79,70,229,.2);
  transform:translateY(-1px);
}
.btn-submit:hover::before{opacity:1}
.btn-submit:active{transform:translateY(0)}
.btn-submit[disabled]{opacity:.7; cursor:not-allowed;box-shadow:none; transform:none}
.btn-submit .ico{width:20px;height:20px;stroke-width:2}

.foot{margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--border); text-align:center; font-size:.8rem; color:#94a3b8;font-weight:500;letter-spacing:.02em}
.foot strong{color:#64748b; font-weight:600}

.hint-card{
  margin-top:1.5rem; padding:1rem 1.25rem; border:1px dashed #cbd5e1; border-radius:12px;
  font-size:.8rem; color:#64748b; background:#f8fafc; line-height:1.6;
  transition:border-color .2s, background .2s;
}
.hint-card:hover{border-color:#94a3b8; background:#f1f5f9}
.hint-card code{font-family:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace; color:#4f46e5; background:#e0e7ff; padding:.2rem .45rem; border-radius:6px; font-size:.75rem;font-weight:600}

/* Form validation states */
.form-control.is-invalid{border-color:var(--danger);background:var(--danger-soft)}
.form-control.is-invalid:focus{box-shadow:0 0 0 4px rgba(239,68,68,.15)}
.field-error{color:var(--danger);font-size:.75rem;margin-top:.35rem;display:flex;align-items:center;gap:.25rem}
.field-error::before{content:"⚠ "}

/* Loading spinner animation */
@keyframes spin{to{transform:rotate(360deg)}}
.spin{animation:spin 1s linear infinite}

@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}