/* Login page layout (uses the same tokens from core.css :root) */

.login-page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:linear-gradient(180deg, var(--bg) 0%, #eef3fb 100%);
  color:var(--text);
}

/* Reuse same spacing behavior as panel */
.panel-header{
  height:86px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 40px;
}

.panel-footer{
  border-top:1px solid var(--border);
  background:rgba(255,255,255,.62);
  backdrop-filter:saturate(160%) blur(10px);
  padding:12px 16px;
}

/* Center shell */
.login-main{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 18px;
}

.login-shell{
  width:min(420px, 100%);
}

/* Card */
.login-card{
  border-radius:22px;
  background:rgba(255,255,255,.92);
  border:1px solid var(--border);
  box-shadow:0 30px 80px rgba(2,6,23,.10);
  backdrop-filter:saturate(160%) blur(14px);
  overflow:hidden;
}

.login-head{
  padding:18px 18px 12px;
  border-bottom:1px solid var(--border);
}

.login-title{
  display:block;
  font-size:16px;
}

.login-subtitle{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}

.login-form{
  padding:16px 18px 18px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Error */
.login-error{
  border:1px solid rgba(239,68,68,.25);
  background:rgba(239,68,68,.08);
  color:#991b1b;
  border-radius:16px;
  padding:10px 12px;
  font-size:12.5px;
}

/* Fields (match the panel look) */
.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12.5px;
  color:var(--muted);
}

.field input{
  height:44px;
  border-radius:16px;
  border:1px solid var(--border);
  padding:0 12px;
  background:#fff;
  box-shadow:0 10px 26px rgba(15,23,42,.04);
  font-size:13px;
  color:var(--text);
  outline:none;
}

.field input:focus{
  border-color:rgba(37,99,235,.35);
  box-shadow:0 10px 26px rgba(15,23,42,.04), 0 0 0 4px rgba(37,99,235,.10);
}

/* Submit */
.login-submit{
  width:100%;
  height:44px;
  border-radius:16px;
}

/* Footer identity inside the shared footer already exists;
   keep mobile spacing consistent */
@media(max-width:780px){
  .panel-header{ padding:0 18px; }
}